Core Web Vitals: How To Measure & Improve Them

Oct 22, 2020 | 6 min

In May 2020, Google announced an upcoming change to its ranking algorithm.

The goal of this update:

Adding more organic ranking signals for user experience.

That’s why in May 2021, the Core Web Vitals will form a new ranking factor.

These Core Web Vitals are three metrics representing the load time, interactivity and visual stability of a page.

Core Web Vitals Visualized

  • Largest Contentful Paint (LCP) tracks when the largest above the fold content element appears;

  • Cumulative Layout Shift (CLS) shows how much unexpected layout shifts (ads, pop-ups, etc.) affect a page’s visual stability;

  • First Input Delay (FID) measures the delay between the first user interaction and the browser’s response.

It’s essential to optimize these new metrics for your website’s user experience and organic rankings.

Let’s start by measuring how your site is currently performing.

Measuring Your Website’s Core Web Vitals

Recently Google created new tests, reports and extensions to help analyze Core Web Vitals performance.

The most important of these are:

  • The updated field data assessment in PageSpeed Insights;

  • The new report in Google Search Console;

  • The Core Web Vitals Chrome extension.

Chrome’s DevTools also has some nice functionalities for analyzing LCP, CLS and FID. We’ll get into those later on.

For now, let’s start with PageSpeed Insights.

Core Web Vitals Assessment in PageSpeed Insights

Google’s PageSpeed Insights (PSI) gives you a Core Web Vitals assessment for any page.

Field Data Assessment PageSpeed Insights

This assessment is part of the Field Data report. Field data are provided by the Chrome User Experience Report (CrUX).

This information is collected from real users and is based on what they experience on your website. When it comes to search rankings, Google will use these field results, not lab data.

PSI also provides Opportunities and Diagnostics for improving your overall web performance.

Opportunities in PageSpeed Insights

Google’s Lab test generates these suggestions, so they don’t cover the full range of problems that real users might encounter.

Sill, these tips give you an overall direction on where to start with site speed improvements.

Core Web Vitals Report in Google Search Console

Google Search Console (GSC) has two new Core Web Vitals reports - one for mobile and one for desktop.

Google Search Console Core Web Vitals Report

Each report gives you information about the groups of URLs and their Core Web Vitals.

Google Search Console URLs

These reports are great for finding common issues across different URLs. That way, you get information about your entire site instead of just one page.

For example, if you have lots of identical product pages where the largest element is a product image, the LCP metric will be similar for all of them. In that case, GSC finds LCP problems across all of these product pages.

Also, after fixing any Core Web Vitals problems, you can alert Google by clicking on “Validate fix”.

Validate Fix Button

In short, these new GSC reports are the best way to track Core Web Vitals performance for your entire site.

Core Web Vitals Chrome Extension

For a quick Core Web Vitals check, you can use this Chrome extension.

The extension automatically gives you a short LCP, CLS and FID audit.

Core Web Vitals Extension

It’s not very detailed, but it is the quickest way to check a page’s Core Web Vitals.

Just make sure to validate the numbers in PSI or GSC since the extension can produce weird results now and then.

How To Optimize For The Core Web Vitals

After you’ve measured your site’s Core Web Vitals, it’s time to optimize them.

But a quick disclaimer before we begin:

Each website is different and we can’t possibly cover every potential problem here.

Below you’ll find tried and tested techniques for improving web performance. However, your site can also be affected by factors that we haven’t discussed here.

Always analyze your specific problems before implementing any optimizations.

Improving Largest Contentful Paint Time

Largest Contentful Paint (LCP) measures the time it takes for the largest above the fold content element to load.

That element can be a picture, video, or a block of text.

Largest Element LCP Example

Everything below 2.5s is considered a good LCP score. If your largest above the fold elements load faster than that, you're good.

To check which element triggers the LCP metric, open the page you want to analyze in Chrome, right-click and select “Inspect”.

From there, go to "Performance."

Performance Panel in DevTools

Click on the Reload button and wait for Chrome to analyze the page.

Once the report is ready, you’ll find a small LCP icon in the “Timings” section. When you hover over it, it will paint the largest element of the page blue.

LCP Example

Example - Yahoo News - https://news.yahoo.com/

You can also use a waterfall chart to see how many resources were loaded before LCP.

Here’s how that looks for the website above:

Resource Loading in Waterfall Chart

Source - WebPageTest.org

From here, you can find resources that cause problems and figure out how to improve their load time.

Here are a few ways to reduce your LCP:

  • Get a better hosting plan. Fast server response time (TTFB) is essential for site speed. If you’re on a slow, shared hosting server, consider upgrading to a dedicated plan;

  • Implement Critical CSS. Critical CSS means finding the CSS necessary to load above the fold content and inlining it in the head tag. This technique improves actual and perceived performance;

  • Minify and compress code files. Minification removes unnecessary parts from the code like whitespace and line breaks. Compression also modifies code files, making them smaller in size. Some hosting and CDN providers implement these techniques by default;

  • Optimize images. Often the biggest reason for slow websites, images must be compressed, resized and converted to the right format.

Fixing Cumulative Layout Shift Scores

CLS measures the effect of unexpected layout shifts on a page.

Unexpected layout shifts occur when content on the page moves around without user input.

A CLS score below 0.1 means a page is visually stable.

To compute your CLS score, Google answers two questions:

  • How much of the viewport did the shift affect?

  • How far did the elements move during the shift compared to the viewport?

The overall CLS score is the sum total of all individual unexpected layout shift scores.

Again, only unexpected shifts affect this metric. If a shift occurs after a user clicks on a button, your CLS score remains the same.

Good Layout Shift Example

You only need to worry about shifts that happen without prior user input. For example, ads, pop-ups and promo banners.

Bad Layout Shift Example

Chrome's DevTools helps detect unexpected layout shifts.

Again, right-click on a page you want to analyze and select “Inspect.” Go to “More Tools” and select “Rendering”.

Steps in DevTools

At the bottom, you’ll see a “Layout Shift Regions” option with a checkbox next to it. Select it.

Layout Shift Regions Button

Now every time a layout shift happens, the shifted area will be highlighted.

CLS Example

Source: forbes.com

This CLS generator is also great for finding layout shifts. It computes your overall CLS score and shows shifting areas.

CLS Tool Example

Here are a few optimizations that can reduce layout shifts significantly:

  • Avoid inserting ads and pop-ups above other content. The GIF above (from forbes.com) is a perfect example of why you shouldn’t do this. Inserting content at the top of a page causes everything below to shift, resulting in a bad CLS score;

  • Add width and height attributes to images. These attributes help the browser allocate the correct amount of space for each image in advance. This reduces layout shifts significantly;

  • Optimize font delivery. Using link rel="preload" and font-display: optional in combination can prevent layout shifts and flashes of invisible text. Check out this article for more information on how to do that.

Fixing First Input Delay Problems

First Input Delay (FID) is the time it takes for the browser to respond to the first user interaction.

FID measures the delay only after distinct actions like clicks or taps. Scrolls and zooms don’t affect this metric.

To be in the green zone, your website’s FID should be less than 100ms.

Now, FID tracks the delay after only the first input. Why is that?

Well, first impressions are everything on the web. Users instantly leave and, in most cases, don’t return if a website frustrates them on their first visit.

That’s why keeping a low FID is crucial.

JavaScript is the main villain when it comes to FID. JavaScript is a very expensive resource, which can clog up the Main Thread and slow down FID.

To find what causes input delays, open the “Performance” panel in DevTools (steps are in the LCP section).

Next, click on main and open the “Bottom-up” analysis.

Main Section analysis in DevTools

You can find Long Tasks (all tasks longer than 50ms) in the “Main” section. These tasks are painted in gray with a red overlay.

The “Bottom-Up” analysis lets you group files by URL and find exactly what causes delays.

In the example above, the first script alone takes 164ms to execute, which is way too long.

WebPageTest’s processing breakdown is another great way to find problem areas.

WebPageTest Processing Breakdown

Source - WebPageTest.org

Here’s what you can do to improve your FID:

  • Delay or remove non-critical third-party scripts. Third party-scripts can sometimes prevent your own scripts from executing on time. Consider which scripts provide the most value to the user and prioritize them. In most cases, ad and pop-up scripts aren’t at the top of the list;

  • Break up Long Tasks. Long Tasks prevent the Main Thread from responding to user interactions in time. By breaking them up, you can significantly improve the performance of your website;

  • Use web workers. Web workers allow you to run scripts in the background without affecting the Main Thread. Moving non-UI operations to a background thread is generally a good practice.

How Much Will The Core Web Vitals Affect SEO?

It’s rare that Google straight up tells us that something will become a ranking factor.

But they did so for the Core Web Vitals. That’s why people are wondering just how much will this new signal affect their organic rankings.

Recently, Google dropped lots of info on the topic. Most notably, they released a whole video on Core Web Vitals and SEO.

 

Here’s probably the most important quote from the video:

Google Quote about SEO and Core Web Vitals

As expected, factors like topical relevance and content quality will remain much more important.

At the same time, the Core Web Vitals will undoubtedly increase the importance of overall user experience as a ranking factor.

That’s why, if you’re trying to rank in a space where information quality is largely identical, optimizing for the Core Web Vitals can make a big difference.

Also, Google will make pages with “Poor” Core Web Vitals ineligible for the “Top Stories” carousel. This is incredibly important for publishers and news websites.

Top Stories Carousel

In short:

Fixing your Core Web Vitals will pay SEO dividends down the road. Especially if you're trying to rank for a “Top Stories” spot.

Just remember that nothing can replace having valuable content on your site