Google recommends four steps for using various tools and reports to measure, understand, and improve Core Web Vitals metrics for your site.
- Identify poor performers: use Search Console’s new Core Web Vitals report to uncover pages that need optimization.
- Diagnose the issues on the page: use PageSpeed Insights (which you can also access through Search Console) to diagnose lab and field issues on a page.
- Optimize your site: measure Core Web Vitals using Chrome DevTools and Lighthouse to uncover actionable direction on what you need to fix. You can also use the Web Vitals Chrome extension to get real-time view of metrics on desktop.
- Monitor performance: put together a custom dashboard for Core Web Vitals using the CrUX Dashboard or Chrome UX Report API for field data or PageSpeed Insights API for lab data.
So let’s take this a step further and walk through how to do this for your site.
Step 1: Identify poor performers with Google Search Console
The new Core Web Vitals report available in your Google Search Console is a great tool to identify groupings of pages across your site that need fixing.
You can check out scores for all three Core Web Vitals metrics based on real-world field data from CrUX (Chrome User Experience).
You have the option to look at your data by desktop or mobile. We recommend checking out your mobile scores first and starting there, as we know Google is prioritizing mobile for indexing now.
You can also look at performance by status (poor, needs improvement, and good), metric type, and URL grouping.
Click through flagged issues to see page groupings and get an idea of types of content that may have similar issues.
Once you’ve identified the types of URLs that are performing worst from a Core Web Vitals standpoint, you can proceed to the next step with Page Speed Insights.
This is a great place to start, but you should be aware that there are some limitations of Google Search Console’s Web Vitals data:
- It has varying delays that can go more than 48 hours between updates.
- It is not possible to access every single affected URL as an export.
- If your page doesn’t get enough traffic, it will not show up. The field data needs a critical mass of users visiting your site to be able to report the data back.
You can also use Cloudflare to capture your site’s Core Web Vitals data
Cloudflare provides free access to some really nifty tools, including the ability to capture real-time Core Web Vitals data from your site with their Browser Insights tool. We have a handy guide on how to set that up here in the AdThrive Help Center.
Step 2: Diagnose the Core Web Vitals issues on the page
Use PageSpeed Insights to find Core Web Vitals issues
You can access PageSpeed Insights directly or via Search Console to help identify issues on the page using lab and field data for both mobile and desktop.
This tool gives you insight into how your readers experience the page and provides a list of actionable recommendations to help you update and improve the page experience.
1. Input the URL. In the PageSpeed Insights portal, input one of the URLs you identified in Search Console as performing poorly for Core Web Vitals.
2. Check out your current performance. At the top of the report, you can see the field and lab data results for the URL.
3. Identify areas for improvement. Scroll down the page to dig into the Opportunities and Diagnostics reports for Google’s suggestions on how you can improve your site’s loading.
4. Repeat the first steps with multiple poor-performing URLs. Take note of the list of issues and perform the PageSpeed report audit on different URLs you noted from your Search Console analysis.
5. Look for repeating issues — this can help you figure out where to prioritize your efforts and find bigger sitewide issues impacting more than just one page.
Use Chrome DevTools to find Core Web Vitals issues
The Chrome browser’s built-in DevTools can help you identify those same opportunities above in real time.
1. Enter the URL into your Chrome browser. Open a new window in incognito mode to remove any impact of browser extensions or other things that might interfere with loading.
2. Right-click anywhere on the page and select “Inspect.”
3. When the DevTools interface opens, navigate to the Performance tab. Select “Web Vitals.” You can also check the box for “Screenshots” to see the loading of the page, which might help when looking at CLS and LCP.
4. Then, click the button (the circular arrow) to “Start profiling and reload page.”
5. When the report loads, you can start looking for issues.
First, you can hover over the timeline at the top to see how the page loads and look for shifting (CLS) and loading issues (LCP).
Next, you can click on LCP in the Timings profile, and it will show you what on-page element is considered LCP for that page:
Finally, at the bottom of the screen, you can see a report on Total Blocking Time (TBT), a metric that DevTools uses to approximate FID.
Use Lighthouse to find Core Web Vitals issues
Lighthouse is another helpful website auditing tool that includes LCP and CLS and uses a number of other metrics to audit your page and give you a final score for performance.
This overall site score should only be used to point you in the right direction because the way Lighthouse calculates a score doesn’t necessarily reflect how the Google algorithm judges pages.
You can access Lighthouse as a browser extension, in the Chrome DevTools, as a Node command-line tool, or via PageSpeed Insights.
To run a Lighthouse report via the Chrome DevTools:
- First, enter the URL you want to audit into a Chrome incognito window.
- Right-click anywhere on the page and select “Inspect”.
- When the DevTools interface opens, click the Lighthouse tab at the top.
- For the Device option, select “Mobile”, then click “Generate Report”. After, you can repeat the test for Desktop.
The Lighthouse report might already look familiar because it also powers PageSpeed Insights.
Lighthouse will provide some top-level performance metrics:
- Best Practices
- Progressive Web App score (if applicable)
Note that the overall performance score combines all the individual page experience metrics, and each one is given its own “weight” or how much it contributes to the overall score.
For example, acing CLS only contributes 5% to your whole performance score in Lighthouse.
Lighthouse includes some of your Core Web Vitals scores for the specific URL you’re looking at:
- LCP (Largest Contentful Paint)
- TBT (Total Blocking Time) – correlates well with FID which isn’t available via lab data
- CLS (Cumulative Layout Shift)
The Opportunities and Diagnostics reports can also be very helpful, with suggestions and areas of improvement that you can focus on to boost your page speed scores.
More on that in the next section!
Step 3: Optimize your site
When it comes to Core Web Vitals, your optimization strategy must be as unique as your site.
There is no cookie-cutter approach, so we recommend working with an experienced developer to review the site-specific issues you identify so that you can come up with customized solutions.
The AdThrive-exclusive Facebook group, full of professional publishers and miles of expertise, is a great place to find developer recommendations!
Use PageSpeed Insights to diagnose Core Web Vitals issues
PageSpeed Insights’ Opportunities and Diagnostic sections are one quick way to figure out how to learn more about and fix those issues on your site.
You can also find these same sections in a Lighthouse report.
Click on each opportunity for more details.
The “Learn more” link under each suggestion takes you to Google’s resource on the subject.
For example, by expanding on the “Preload key requests” opportunity above and clicking “Learn more,” you are directed to an entire page from web.dev (below) to help fix that specific issue.
For developers: Google has compiled a ton of resources
- Go to web.dev/measure for helpful guides and codelabs for optimization using PSI data.
- Check out Google’s optimization guides for each of the Core Web Vitals metrics: CLS, LCP, and FID.
Step 4: Monitor performance
Google offers three different strategies for monitoring Core Web Vitals performance, and we’re sharing them in order of required skill level.
Beginner: Track performance with the Web Vitals extension
You can track a page’s performance for Core Web Vitals in real-time using the Web Vitals extension, available here in the Chrome Web Store.
This is a great solution if you’re making page updates or monitoring the general impact of a site-wide optimization you’re making.
However, it’s a bit more of a tedious process to check each URL you want to monitor, so the next strategies can streamline monitoring so you or your developer can efficiently keep tabs on how your optimizations are helping.
Intermediate: Create a CrUX monitoring dashboard in Data Studio
Google put together a helpful guide on setting up a CrUX dashboard on Data Studio so you can monitor your performance.
Note: The CrUX Dashboard data has some limitations, including the fact that you can’t see day-by-day performance, just monthly performance.
Advanced: Tap into Google’s tool APIs
For those looking for a more advanced and robust option, you can also tap into Google’s open APIs to collect and monitor your performance data:
- Demystifying Speed Tooling (Google I/O ’19) — a great video from the Chrome team walking through the various tools available and optimization strategies
- Site Speed Topography (CSS Wizardry)
- Addy Osmani | Web Performance Recipes With Puppeteer
- Treo.sh for monitoring
- Lighthouse Metrics for geographically-scoped Lighthouse scores
Your Core Web Vitals roadmap
Knowledge is power! Start here:
Dig deeper to understand each metric and why it’s important for user experience:
- What is Largest Contentful Paint (LCP)?
- What is First Input Delay (FID)?
- What is Cumulative Layout Shift (CLS)?
Benchmark your site’s Core Web Vitals, so you understand your starting position:
Make a step-by-step plan to improve Core Web Vitals:
- Your four-step playbook for diagnosing and improving Core Web Vitals [You are here!]
Tackle low-hanging fruit:
- How to choose the right hosting service for a speedy site
- 5 tell-tale signs you’ve outgrown your hosting service
- How a good host can help boost page speed and improve Core Web Vitals + a checklist for hosting optimizations
- How switching to a high-quality host can improve Core Web Vitals [Case Study]
- Use a CDN to help speed up your site
- 23 optimizations to improve your page speed and Core Web Vitals scores