Your four-step playbook for diagnosing and improving Core Web Vitals

Google recommends four steps for using various tools and reports to measure, understand, and improve Core Web Vitals metrics for your site.

1. Identify poor performers: use Search Console’s new Core Web Vitals report to uncover pages that need optimization.
2. 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. 
3. 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.

Need guidance? Go to web.dev/measure to help measure your page and see a helpful set of guides and codelabs you can use for optimization, using PSI data.

4. 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 areas to focus your efforts. 

This can help you identify groupings of pages across your site that are in need of fixing.

You can check out scores for all three Core Web Vitals metics: LCP, FID, and CLS. This report is 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, as well as URL grouping.

(source: https://web.dev/vitals-tools/) 

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 then proceed to the next step with Page Speed Insights.  

Note: 

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. 

Step 2: Diagnose the Core Web Vitals issues on the page 

Using 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, so you can understand specific issues. 

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 site-wide issues impacting more than just one page. 

Using 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 onpage element is considered LCP for that page:

Finally, at the very bottom of the screen you can see a report on Total Blocking Time (TBT), which is a metric that DevTools uses to approximate FID.

Using Chrome DevTools: Lighthouse Report 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:

1. First, enter the URL you want to audit into a Chrome incognito window.
2. Right-click anywhere on the page and select “Inspect”.
3. When the DevTools interface opens, click the Lighthouse tab at the top.
4. 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:

• Performance
• Accessibility
• Best Practices
• SEO
• Progressive Web App score (if applicable) 

Note that the overall performance score is the combination of 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 work with your development team to identify site-specific issues and come up with customized solutions. 

Using 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 to monitor the general impact of a site-wide optimization you’re making. 

However, it’s a bit more tedious of a 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 how to set up a CrUX dashboard on Data Studio so you can monitor your performance.

Note: There are some limitations of the CrUX Dashboard data, 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: 

• CrUX (Chrome User Experience) Report API for field data
• PageSpeed Insights API for lab data

Dig deeper:

• 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