Guide To Core Web Vitals

Last updated on July 31, 2021.

The Core Web Vitals guide to help you get your site ready for the upcoming Core Web Vitals update.

Core Web Vitals are a set of three metrics, such as Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), which – respectively – relate to loading, interactivity, and visual stability of websites. 

Core Web Vitals are one of Google Page Experience ranking factors, so it’s definitely a good idea to dive deep into the topic and make your site future-proof.

Google provides a ton of technical and specialistic documentation on Web Vitals and page experience. This documentation is awesome but may be hard to digest by regular website owners or even some less technical SEOs. That’s why I did my best to make this topic simple and accessible so that when you finish reading it you will understand what Core Web Vitals are and know what your next step should be.

⚡ Make sure to check my Core Web Vitals audit to learn how to audit the Core Web Vitals metrics of the site.

SEO NEWSLETTER

Subscribe to receive free weekly updates with SEO news, SEO tips, SEO tools, and more!
Join 3000+ ambitious SEOs.

Why are Core Web Vitals important? 

Core Web Vitals are important. Here is why. 

  • Core Web Vitals are an essential part of a great page experience. 
  • A great page experience allows searchers to get more out of visiting a website.
  • A web page that offers a great user experience is way more likely to meet its user’s needs. 
  • Meeting a user’s needs is a top priority for Google. 
  • If you want Google to like your website, it must also be a top priority for you to satisfy your user’s needs. 

Core Web Vitals are one of a total of five Google page experience signals which – in addition to the three new metrics – include HTTPS, safe browsing, intrusive interstitial guidelines, and whether a website is mobile-friendly.

Core Web Vitals
Here are the five Google page experience metrics.

Fortunately, Google is pretty clear about what it wants when it comes to Core Web Vitals and other page experience signals.

  • Google wants your website to provide a great user experience
  • To provide a great user experience, your website should ideally pass all three Core Web Vitals metrics and other page experience signals 

As it lies now, according to a recent study by Screaming Frog, less than 15% of all existing websites are currently optimized well enough to pass the Core Web Vitals assessment. 

Core Web Vitals: a study by Screaming Frog
The results of the study conducted by Screaming Frog.

While this means you won’t be alone if your website does not pass these metrics, it may have a negative impact on your business in the long run. It is even more likely if your website is a lot worse than its competition regarding Core Web Vitals. 

But don’t worry. I got you covered. You now understand why Core Web Vitals are important. Let’s uncover what they really are.

⚡ In my Google page experience audit you will learn how to do a page experience audit step by step.

What are Core Web Vitals?

Let’s now dig a bit deeper into what Core Web Vitals are.  For now, the core web vitals include the following three measurable metrics:

  • Largest Contentful Paint (LCP) which is about how fast a web page loads.
    For a web page to deliver a good user experience, it must have the LCP not exceeding 2.5 s. 
  • First Input Delay (FID) which is about the interactivity of a web page.
    For a web page to deliver a good user experience, its FID should be less than or equal to 100 ms. 
  • Cumulative Layout Shift (CLS) which is about the visual stability of a web page.
    For a web page to deliver a good user experience, its CLS should be equal to or less than 0.1. 
Core Web Vitals: largest contentful paint, first input delay, cumulative layout shift
The three Core Web Vitals metrics and their possible scores.

I will talk in detail about each metric in a moment. But first I want you to understand the bigger picture of Core Web Vitals and where they come from: 

  • Web Vitals is a Google initiative that aims at providing unified guidelines on how to deliver a great user experience on a website.
  • The purpose of the Web Vitals initiative is to make it easier for websites to deliver a great page experience. 
  • Core Web Vitals are a set of 3 metrics that are a subset of Web Vitals.
  • Each of the three metrics is a representation of a different aspect of a user experience.
  • The metrics that currently create Core Web Vitals are not permanent. They will evolve in the future. 
  • All of the three metrics are ranked on a scale ranging from Poor, Needs Improvement, to Good.
  • In order for a web page to pass Core Web Vitals, it needs to meet the recommended thresholds at the 75th percentile of page loads. In simple terms, the web page needs to hit the recommended targets for the majority of its users (75% of the time). 
  • To be in line with the Web Vitals initiative, all website owners should measure and optimize Core Web Vitals.
  • Google wants to surface Core Web Vitals in all of its tools.  
Guide to Core Web Vitals
Here is the info about Web Vitals and Core Web Vitals from web.dev.

I believe you now have a good overall understanding of Core Web Vitals. Let’s now analyze each metric separately. 

Largest Contentful Paint (LCP)

The largest Contentful Paint (LCP) refers to loading. The page speed matters a lot because pages that load slowly provide a poor user experience, and thus, do not retain their visitors for more than a few seconds. 

Core Web Vitals: Largest Contenful Paint
These are the thresholds and scores for the Largest Contentful Paint metric.

To put it simply, the Largest Contentful Paint: 

  • is a point in the page load time when the main content of the page has loaded,
  • often looks at the largest block of text or the largest block visible within the viewport,
  • is ideally below 2.5 seconds. 

The Largest Contentful Paint measures the time it takes for a page to load fully and for you to be able to interact with it. 

The speed at which a page loads its largest content in the viewport is one of the first impressions that a website makes, and if it fails to do so in a matter of seconds, it has lost a visitor. 

⚡ Make sure to check my full guide to Largest Contentful Paint (its optimization, measurement, and more).

Largest Contentful Paint Vs First Paint 

It’s important to remember that the Largest Contentful Paint differs from the First Paint

The First Paint is when the screen changes and displays something other than what was previously displayed. However, this could simply also mean a blank green space, while the content and elements of the page continue loading. 

The Largest Contentful Paint measures the largest bit of useful content that is displayed, which is the thing that the user was actually waiting to view. Thus, it is a far better metric and insight than the First Paint. 

Below are a few examples of FCP and LCP and how they differ.

Core Web Vitals: Largest Contenful Paint and First Contentful Paint on examples
The First Contentful Paint and the Largest Contentful Paint on CNN.COM.
Core Web Vitals: Largest Contenful Paint and First Contentful Paint on examples
The First Contentful Paint and the Largest Contentful Paint on Instagram.
Core Web Vitals: Largest Contenful Paint and First Contentful Paint on examples
The First Contentful Paint and the Largest Contentful Paint on Google.com.

You can check your LCP score with Google PageSpeed Insights (and a bunch of other tools I am about to show you). 

  • A Good score indicates that the page loads within 2.5 seconds or less. 
  • If a page takes up to 4 seconds to load, the scale will read Needs Improvement.
  • Anything more than 4 seconds will warrant a Poor rating.
Largest Contentful Paint
Here are the CrUX originals classified as good.

You can also generate the Lighthouse report for your site to check what is considered to be the Largest Contentful Paint element of the page.

Core Web Vitals guide: Largest Contenful Paint
The Largest Contentful Paint element on my homepage.

In the further part of the guide, I will show you all the tools you can use to measure all of the three Core Web Vitals metrics.

First Input Delay (FID)

The First Input Delay (FID) corresponds to interactivity on the website. 

The name itself suggests the same; the first input is your interaction with the page, and the delay refers to how much time it takes for the page to respond to that action. 

Core Web Vitals: First Input Delay
These are the thresholds and scores for the First Input Delay metric.

To put it simply, the First Input Delay metric:

  • measures the load responsiveness by quantifying the experience of users trying to interact with pages that are unresponsive,
  • focuses only on input events from actions, such as clicks, caps, scrolls, or keypresses,
  • is ideally 100 ms or less.

A loaded page is not of much use unless a user can interact with the site and take action. 

Online interaction with a website or webpage refers to clicking on a button, clicking on a link, selecting an option, or using a JavaScript command. 

Core Web Vitals Guide: First Input Delay
Here is the visualization of FID against other Web Vitals metrics.

You can check your FID using Google Search Console or Google PageSpeed Insights (if the PSI has enough data for your site). 

  • On the scale, a Good ranking is given to pages that have an FDI of 100 ms or less.
  • A range of 101-300 ms falls squarely in the category of Needs Improvement
  • If a page takes longer than 300 milliseconds to respond, it is dropped into the Poor category, which means that action has to be taken to ensure that it’s not demoted in the rankings. 
Core Web Vitals Guide: First Input Delay thresholds
Here are the good thresholds for the CrUX origins.

The First Input Delay is a crucial part of making a good first impression on the user. If there is a higher delay on their first interaction with the site, there are likely to be no more interactions from the user at all.

The time it takes to process and load the relevant information is not measured by the FID. 

⚡ Make sure to check my full guide to First Input Delay (its optimization, measurement, and more).

Cumulative Layout Shift (CLS)

The Cumulative Layout Shift relates to page stability. 

The CLS formula measures how many elements shifted on the screen before the page became stable; the fewer the shifts, the better. 

Core Web Vitals Guide: Cumulative Layout Shift
These are the thresholds and scores for the Cumulative Layout Shift metric.

To put it simply, the Cumulative Layout Shift:

  • measures the total number of individual layout shifts for every unexpected layout shift that takes place in the entire lifespan of a web page,
  • looks for unstable elements in the viewport,
  • is ideally 0.1 or less.  

It often happens that while a page is loading, the various elements on the page shift around before they fall into place. While this is normal to an extent, the quicker the page stabilizes, the better. 

If the elements are constantly shifting or are taking too long to shift, it will ultimately drive a poor user experience because of how frustrating it would be to interact with the page. 

Core Web Vitals Guide: Cumulative Layout Shift example
Here is an example of a layout shift that can occur during the page load.

Imagine clicking on a link, but the sudden layout shift results in you clicking on an ad or the wrong link. The negative impact of a poor CLS is not merely drawing the ire of the visitor to the site, but it may also result in accidental consent for cookies, etc. The user, rightfully so, will never want to visit the site again.

Core Web Vitals Guide: Cumulative Layout Shift example
If the layout of the site shifts around, the user may not click what he or she desires to click.

This is clearly a priority to Google and something that many websites have taken into consideration until now. 

It should be noted that the CLS values reported by lab tools could be less than what the actual user experiences in the field. This is mainly because lab tools tend to load pages in a synthetic environment. This means they can only measure layout shifts that occur during page load. 

Core Web Vitals Guide: Cumulative Layout Shift example
Here are the CrUX origins classified as good for the Cumulative Layout Metric.
  • It is possible for the CLS score to be as low as 0 for a perfectly static page. 
  • Anything between 0 – 0.1 deserves a Good score. 
  • Anything between 0.1 and 0.25 Needs Improvement. 
  • Anything more than that gets a Poor rating.

⚡ Make sure to check my full guide to Cumulative Layout Shift (its optimization, measurement, and more).

Other Web Vitals To Consider

But, there are other Web Vitals that serve as supplemental metrics for the Core Web Vitals. 

Core Web Vitals: Other metrics
Here are other metrics, such as FCP, TTI, and TBT that should also be taken into account.

How To Measure Core Web Vitals 

Optimizing for quality is key to the long-term success of any site in the eyes of users and Google. Core Web Vitals represent the best available signals that developers and website owners can use for measuring the quality of the page experience of their websites.   

Fortunately, Google is very precise and clear about Web Vitals. In addition to providing lots of documentation and helpful resources, Google also provides tools that take the guesswork out of optimizing websites to ensure that they pass Core Web Vitals. 

  • This is the reason why practically all of Google’s tools now support the measurement of Core Web Vitals.  
  • The ideal threshold you should measure will be the 75th percentile of your website’s page loads, segmented across desktop and mobile devices. 

This method should be repeated for each of the above metrics. Google is currently working on visual indicators to identify pages that meet all of the page experience criteria listed. This could also mean adding labels to search results, which will indicate which results offer a “good” page experience.

Core Web Vitals: tools to measure web vitals
Google gives you tons of various tools to measure Core Web Vitals.

Let me now show you the tools you can use to measure Core Web Vitals. 

Tools To Measure Core Web Vitals

When it comes to measuring Core Web Vitals, there are 2 types of tools: 

  • Field tools, also known as Real User Monitoring (RUM) which offer valuable insights into how real users are experiencing a website. The data collected by these tools is called field data
  • Lab tools that offer insights into how a potential user will likely experience a website and will provide reproducible results for debugging. The data collected by these tools is called lab data
Core Web Vitals: tools to measure web vitals
The tools to measure Core Web Vitals are divided into field and lab tools.

Both types of tools and the data they provide are important. 

  • If you are a developer, then you are most likely to work mainly with lab tools. 
  • A website owner or an SEO auditing a site is probably more likely to use field tools since they provide real-world data from real users of the website. 

The good news is that Google provides both field and lab tools that you can use to measure Core Web Vitals on your website. Even though Core Web Vitals are Google metrics, there are also non-Google tools that also do a great job assessing these metrics. 

Let’s now briefly talk about each tool. 

Field Tools To Measure Core Web Vitals

If you are an SEO or a website owner, you are probably going to rely mostly on field tools. 

  • Field tools provide information on how real users are actually experiencing a website. 
  • This type of measurement is often referred to as Real User Monitoring (RUM). The data gathered by field tools are called field data

Here are the field tools you can use to measure Core Web Vitals.

Google Chrome UX Report (CrUX)  

The Google Chrome UX Report (CrUX) is a public dataset that contains data on real-world user experiences based on millions of websites. It measures the field values of Core Web Vitals. The Google Chrome UX Report data comes from opted-in real users. 

Requirements: technical knowledge |
Level: advanced
Purpose: to get a custom dashboard of Core Web Vitals or to integrate the Core Web Vitals measurement into a web analytics software

Core Web Vitals: Chrome User Experience Report
Chrome UX Report (CrUX) is an advanced tool to measure Core Web Vitals and usually requires programming knowledge.

Thanks to the CrUX report, website developers and owners can better understand the distribution of actual user experiences on both their own websites and the websites of their competitors.

Google PageSpeed Insights 

Google PageSpeed Insights (PSI) reports on both the lab and the field data on the performance of a web page both on mobile and desktop devices. Google PageSpeed Insights can give you an overview of how actual users experience the page because it uses the Chrome UX Report that uses field data. 

Requirements: none
Level: beginner
Purpose: to diagnose lab and field problems on a specific web page

Core Web Vitals: Google PageSpeed Insights
Here is the overview of the field data reported by Google PageSpeed Insights.

Thanks to Google PageSpeed Insights, you can make use of the data provided by the Chrome UX Report without any technical or coding knowledge. 

Google Search Console

Google Search Console is probably the easiest and the simplest tool to measure Core Web Vitals in the field. In order to be able to use the field data provided by GSC, you need to have a verified property in your Google Search Console account. 

Core Web Vitals report in Google Search Console
This is the Core Web Vitals report in Google Search Console.

Google Search Console has the new Core Web Vitals report that allows for identifying groups of web pages on your website that you should pay special attention to. The GSC Core Web Vitals report is based on field data from the Google Chrome UX Reports. This is the real-world data from your users. 

Requirements: a verified GSC property
Level: intermediate
Purpose: to identify groups of web pages that have issues with Core Web Vitals

Core Web Vitals report in Google Search Console
Here are details of the Core Web Vitals report in Google Search Console.

Thanks to the GSC Core Web Vitals report, you can gen insight into the page experiences of actual users of your website. 

Web.dev

Web.dev is yet another way to measure Core Web Vitals together with other performance factors. Web.dev lets you measure your website’s performance over time. The tool also provides a list of guidelines (together with indicating their priority) and tips on how to improve. 

Requirements: none
Level: intermediate
Purpose: to get guidance and a prioritized list of guidelines

How to measure Core Web Vitals with web.dev
Here are the results of the test performed with web.dev. The tool uses to data from Lighthouse.

The web.dev tool not only lets you measure Core Web Vitals but also puts them in a broader context of other important factors, such as overall performance, accessibility, best practices, or SEO.  

Measuring Core Web Vitals in JavaScript

To make it easier for developers who want to measure the Core Web Vitals performance for websites, Google has launched an open-source web-vitals JavaScript library. Developers can use this as a reference to accurately capture each of the Core Web Vitals for the website’s users.

Requirements: web analytics software and developer knowledge
Level: advanced
Purpose: to get a custom Core Web Vitals dashboard and measure real-world data from actual users of the website

How to measure Core Web Vitals in JavaScript
This is the sample code you can use to measure Core Web Vitals in JavaScrpt.

This way you measure Core Web Vitals using your web analytics tool if it does not support the measurement of Core Web Vitals by default.

The best example use of this is the Web Vitals report thanks to which you can measure Core Web Vitals in Google Analytics. 

Check the article with best practices for measuring Web Vitals in the field to learn more. 

Lab Tools To Measure Core Web Vitals

If you are a developer or work on the development side of your website, you are likely going to use lab tools to measure and test Core Web Vitals. 

Lab tools, contrary to field tools, provide information on how a potential user is likely to experience a website. The data provided by lab tools is called lab data. Developers can use lab data for debugging. 

Below are the lab tools you can use to measure Core Web Vitals. 

Lighthouse

Lighthouse is a really awesome Google tool that every website owner should use on a daily basis. It is an automated site auditing tool that lets you diagnose issues on your website and indicates possible ways to improve a user experience. Lighthouse measures a set of various user experience quality metrics in a lab environment. 

Core Web Vitals: Lighthouse
Lighthouse is an essential lab tool to measure and analyze Core Web Vitals and other website metrics.

The latest version of Lighthouse not only measures dimensions, such as performance, SEO, and accessibility, but also Core Web Vitals metrics. A great thing about Lighthouse is that it not only measures these 3 metrics but also factors them in when calculating the overall performance score of the website. 

Requirements: Chrome and technical knowledge
Level: advanced
Purpose: to make sure Core Web Vitals metrics did not get worse before making any website changes live

Core Web Vitals: Lighthouse
Here is the Lighthouse report for the homepage of my website.

This tool is awesome for running an overall page experience audit that assesses multiple signals instead of just Core Web Vitals. 

Chrome DevTools

Lighthouse is part of a larger set of Google tools known as Chrome DevTools. As the name suggests, these are the tools for developers and advanced users. 

  • You can use the Chrome DevTools Performance panel (and the Experience section) to detect any unexpected layout shifts. This is invaluable when it comes to detecting and fixing issues with visual stability on the web pages of your website. 
Core Web Vitals in Chrome DevTools
Here you can see the measurement of Core Web Vitals in Chrome DevTools.
  • Chrome DevTools also allow you to diagnose the interaction readiness of your website thanks to measuring Total Blocking Time (TBT) in the footer. The TBT metric is a great indicative of First Input Delay which you cannot measure in the lab. 
Core Web Vitals in Chrome DevTools
Chrome DevTools also allows you to measure other important metrics, such as TBT.

Requirements: technical and developer knowledge
Level: advanced
Purpose: to locally optimize the website and get guidance on what should be fixed

ChromeDev Tools are a set of advanced tools that allow you to deeply analyze your website in the lab environment. 

Web Vitals Chrome Extension 

Core Web Vitals Chrome Extension is one of the lab tools to measure Core Web Vitals. It allows for measuring these metrics in real-time for Google Chrome for desktop. It is especially useful for:

Web Vitals Chrome Extension
This is the Core Web Vitals Chrome extension and the scores for my homepage.
  • developers to control and measure the metrics as they work on the website 
  • a bit advanced users who want a simple diagnostic tool to measure Core Web Vitals as they browse the web 

The extension is available in the Chrome Web Store. 

Requirements: Chrome
Level: medium
Purpose: to get a real-time overview of Core Web Vitals on desktop

Whether you are a beginner or an advanced user, you should have this Chrome extension installed in your browser. 

Other Tools To Measure Core Web Vitals

Google tools for measuring Core Web Vitals should, of course, be your main tools. However, there are also a few other non-Google tools that you can use. 

Core SERP Vitals Chrome Extension

Core SERP Vitals displays Core Web Vitals data from the Chrome User Experience Report directly in search results in Google. You do not need to manually check the Core Web Vitals metrics of a particular web page from search results because you will now see the metrics directly in SERPs. 

Core SERP Vitals Chrome Extension
Core SERP Vitals lets you see the Core Web Vitals metrics directly in search results.

Core SERP Vitals displays the values for LCP, FID, and CLS directly below the link to the web page in search results.  

Requirements: Chrome
Level: intermediate
Purpose: to get information about Core Web Vitals metrics directly in search results 

Core SERP Vitals is another Chrome extension that you probably want to be using.

GTmetrix

Together with Google PageSpeed Insights, GTmetrix is one of the most popular tools for measuring the speed and performance of websites. In its latest version, GTmetrix also measures Core Web Vitals (on the basis of the data from Lighthouse).

Core Web Vitals in GTmetrix
Here is the GTmetrix report for the homepage of my site.
  • Requirements: none
  • Level: intermediate
  • Purpose: to get an overview of the speed and performance of the website 

Not only does GTmetrix measure Core Web Vitals but it also displays a very clear speed visualization graph.

core web vitals gt metrix speed visualisation
Here is the very handy speed visualization available as part of the GTmetrix report.

If you are a website owner or an SEO, you should be using this tool on a daily basis. I love it. 

WebPageTest

WebPageTest is invaluable if you want to dig deeper into the speed and performance of your website. The tool allows for advanced testing with different test locations, device types, connection types, and more.

Core Web Vitals in WebPageTest
WebPageTest offers a lot of advanced settings.

Not only will it give you information on Core Web Vitals metrics, but also provide a ton of useful charts and diagrams. 

  • Requirements: none 
  • Level: advanced
  • Purpose: to get a detailed overview of the performance of a website

The WebPageTest is one of the more advanced tools for measuring the speed and performance of the website. 

core web vitals web page test results
Here are the results of the WebPageTest measurement for my site.

You can learn more about how to measure Web Vitals on web.dev. And also take a look at the list of Core Web Vitals tools

Layout Shift GIF Generator

Finally, there is a fun tool called Layout Shit GIF Generator that lets you visualize the Core Web Vitals metric CLS (cumulative layout shift) with a funny GIF. All you need to do is enter the URL of the website to test and choose either mobile or desktop.

  • Requirements: none
  • Level: beginner
  • Purpose: to get a very fun visualization of the layout shifts on any website

This is one of my favorite tools for measuring Core Web Vitals. If anyone has problem understanding the CLS metric, then you should show them this tool.

On the screenshot below you can see the GIFs generated by the tool for the blog URL of my website (which passes CLS) and for the homepage (which does not pass CLS).

Cumulative Layout Shift Passed
Here is the CLS for my blog page.
Cumulative Layout Shift Failed
Here is the CLS for my homepage.

⚡ Make sure to check my full list of tools to measure Core Web Vitals.

How To Improve Core Web Vitals

You now know all the ways to measure Core Web Vitals and probably know exactly how your website is doing in terms of these metrics. You also understand what each metric does and why it is important. 

Let’s now talk about how you can optimize Core Web Vitals. 

How To Improve Largest Contentful Paint (LCP)

The LCP can be poor due to render-blocking JavaScript and CSS, slow server response times, client-side rendering, and slow resource load times

Core Web Vitals: How To Improve Largest Contentful Paint

You must address and fix these individually to improve your LCP score. Here is what you can do:

  • Use TTFB to measure the server response time and improve it by: 
    • routing users to a nearby CDN, 
    • caching assets, 
    • establishing third-party network connections (rel=”preconnect”). 
  • Fix the render-blocking JavaScript and CSS by:
    • minifying CSS,
    • deferring non-critical CSS,
    • inlining critical CSS,
    • minifying or compressing JavaScript files,
    • deferring unused JavaScript,
    • minimizing critical JavaScript,
    • minimizing unused polyfills. 
  • Improve slow resource load times by:
    • optimizing and compressing images,
    • preloading important resources,
    • compressing text files,
    • delivering different assets based on the network connection, 
    • caching assets using a service worker to improve load time.
  • Make sure to remove large elements from your web pages, as these elements have a significant impact on the time it takes for a website to load fully.
  • Use server-side rendering and/or pre-rendering.

Doing the above steps will help you reduce the time that your page takes to load. You can learn even more on how to optimize LCP on web.dev.

How To Optimize FID

The main reason behind a poor FID is heavy JavaScript execution. 

Core Web Vitals: How To Improve First Input Delay

To improve the FID of your website, you may want to check these methods: 

  • Break Long Tasks into small and asynchronous tasks
    • break up the code that blocks the main thread for 50 ms or more,
    • explore code-splitting,
    • check the waterfall in Chrome DevTools for examples.
Core Web Vitals guide: First Input Delay
Here are the long tasks reported by Lighthouse.
  • Optimize your page to be ready for interactions:
    • address Total Blocking Time (TBT) by optimizing the Critical Rendering Path,
    • move slow and unnecessary components out of the Critical Path. 
  • Reduce JavaScript execution time by: 
    • code-splitting,
    • deferring unused JavaScript,
    • minimizing unused polyfills. 
java script usage chrome dev tools
Chrome DevTools will highlight unused JavaScript in red.
  • Make use of a web worker to enable the server to run JavaScript on a background thread:
    • Comlink is a helper library that abstracts postMessage and makes it easier to use
    • Workway is a general-purpose web worker exporter
    • Workerize will help you move a module into a web worker 
  • Using third-party scripts like Google Analytics can slow down your FID. To improve FID, get rid of any third-party scripts that aren’t crucial to the page.
Core Web Vitals and FID
Here is how Lighthouse reports on the third-party scripts.

You can learn more about how to improve FID on web.dev.

How To Optimize CLS

The main reasons behind a poor CLS are images, ads, iframes and embeds without dimensions, dynamically injected content, and web Fonts causing FOIT/FOUT. 

Core Web Vitals: How To Improve Cumulative Layout Shift

The following actions could solve these problems and improve a website’s CLS score:

  • Add height and width specifications to images and video elements so that the browser knows exactly how much space is required for each element. 
  • Reserve space for ads, embeds, and iframes so that the browser knows where they need to appear. This will ensure that ads don’t just show up randomly on the screen, ruining the user experience by pushing content up and down. 
  • Avoid adding content on top of one another unless this is absolutely necessary or required. 
  • Use pre-loaded fonts or tools that help you reduce the Flash of Unstyled Text and Flash of Invisible Text.
  • Avoid actions that need to wait for a network response before updating DOM.
  • Be careful with dynamically injected content.
  • Try to anticipate the maximum space needed.
Core Web Vitals: CLS
The elements without the explicit width and height often cause layout shifts.

You can learn more about how to optimize CLS on web.dev.

How To Optimize Core Web Vitals In WordPress

If you are not a technical person, you may feel a little overwhelmed by the number of technicalities above.

Fortunately, if you have a WordPress website (and the chances are you do), you can improve the performance of your site with the help of speed plugins. While there are a lot of speed and performance plugins for WordPress, only a few really do the job.

You can significantly improve the speed of your website with the following WordPress plugins

WP Rocket

WP Rocket is a fantastic plugin that requires no technical knowledge to set it up. Check my whole in-depth WP Rocket review to learn more about the plugin and how it compares with other similar caching plugins.

Improving Core Web Vitals with WP Rocket
You should definitely give WP Rocket a try.

Here is my website in Google PageSpeed Insights with WP Rocket and without it. 

Google PageSpeed Insights results without WP Rocket
My site with no optimization.
Google PageSpeed Insights results with WP Rocket
My site with WP Rocket.

Imagify

Imagify is a great plugin for compressing images in bulk. Not only will it compress all of the existing images on your website, but it will also automatically compress any new images you upload. 

Imagify WordPress plugin to improve Core Web Vitals
Here are the settings of Imagify.

With these two plugins alone you can significantly improve the Core Web Vitals metrics on your site. And, unless you want to, you don’t need to do anything other than installing and activating the plugin. 

Core Web Vitals And SEO

As an SEO expert, I get a lot of questions about how Core Web Vitals can or will influence the website in terms of SEO. How important are they? How much should we care about them? 

Here are my own thoughts and conclusions regarding Core Web Vitals and SEO: 

  1. One ranking factor out of hundreds. Core Web Vitals are important but they are only one tiny factor out of hundreds of ranking factors Google algorithms use to assess and rank websites. 
  2. One page experience factor out of five. Core Web Vitals are only one of a total of five page experience factors. If you want to have an edge, make sure that your website passes all Google page experience signals. 
  3. No magic behind Core Web Vitals. Core Web Vitals will not let you magically rank number 1 if you don’t have absolutely outstanding content that meets the needs of your users. This is only a technical factor that may help awesome content rank better. Content is still the KING.
  4. Look at your competitors. Core Web Vitals as a ranking factor may have a negative impact on your website probably only if your website is way behind its competition when it comes to meeting these metrics AND if it does not have better content than its competitors.
  5. Content is still KING. Let’s say there are two websites about the same topic. The first website has awesome content and poor Core Web Vitals metrics while the second website has poor content but passes Core Web Vitals. In that situation, the first website will still outrank the second website. 
  6. One puzzle piece. Core Web Vitals are only a small piece of a very large pie called SEO. 
  7. Check my other in-depth SEO guides to get the whole picture. You may want to start with my guide on how to do a technical SEO audit (200+ items).

Core Web Vitals FAQs

I am pretty sure that I have beaten the topic of Core Web Vitals to death. However, if you still feel that you do not understand it completely, take a look at Core Web Vitals FAQs prepared by Google. 

If you don’t have time to read the article, here are the Core Web Vitals takeaways: 

  • Core Web Vitals are user-centric metrics, which means they focus on understanding, measuring, and improving user experiences. 
  • Core Web Vitals are assessed on a per-page basis, which means that some of your web pages may meet these metrics while others may not.
  • The immediate benefit of passing all Core Web Vitals is a great user experience.
  • AMP pages are more likely to pass Core Web Vitals than regular web pages because of the way they are built. That, however, does not mean that a non-AMP page cannot meet these thresholds nor that all AMP pages automatically pass Core Web Vitals. 
  • A great resource for learning about how to speed up websites is https://web.dev/fast/
  • Page experience signals understood as ranking factors will only apply to mobile Search at this time. 
  • It is important to differentiate between the data provided by Lighthouse (lab data) and the Google Search Console Core Web Vitals report that shows field data from real users of the website. Therefore, you may see errors in the GSC Core Web Vitals report but see no issues in Lighthouse.
  • Do not confuse mobile-friendliness with the website being fast for mobile. These are two different things. 
  • The new update will also make non-AMP content eligible to appear in the mobile “Top Stories” feature in search
  • Do not forget that content still remains a very strong signal. 

GET ACCESS TO PREMIUM SEO CONTENT

Members of SEOSLY Pro get access to Olga’s SEO audit video guide where she documents her 200-step SEO audit process, Olga’s mini video SEO audits, SEO audit templates, pro SEO auditing tips, and much more!

Join SEOSLY Pro and pay only $1 for the first month.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *