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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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.
- For example, Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital metrics that measure a site’s load speed and are useful when it comes to diagnosing issues with LCP.
- Additionally, metrics, such as Time to Interactive (TTI) and Total Blocking Time (TBT) are critical lab metrics that are vital in identifying potential issues with interactivity that can have a negative impact on FID.
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.
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.
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 |
Purpose: to get a custom dashboard of Core Web Vitals or to integrate the Core Web Vitals measurement into a web analytics software
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.
Purpose: to diagnose lab and field problems on a specific web page
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.
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
Purpose: to identify groups of web pages that have issues with Core Web Vitals
Thanks to the GSC Core Web Vitals report, you can gen insight into the page experiences of actual users of your website.
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.
Purpose: to get guidance and a prioritized list of guidelines
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.
Requirements: web analytics software and developer knowledge
Purpose: to get a custom Core Web Vitals dashboard and measure real-world data from actual users of the website
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 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.
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
Purpose: to make sure Core Web Vitals metrics did not get worse before making any website changes live
This tool is awesome for running an overall page experience audit that assesses multiple signals instead of just Core Web Vitals.
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.
- 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.
Requirements: technical and developer knowledge
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:
- 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.
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 displays the values for LCP, FID, and CLS directly below the link to the web page in search results.
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.
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).
- 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.
If you are a website owner or an SEO, you should be using this tool on a daily basis. I love it.
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.
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.
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).
⚡ 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)
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”).
- minifying CSS,
- deferring non-critical CSS,
- inlining critical CSS,
- 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
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.
- 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.
- minimizing unused polyfills.
- 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.
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.
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.
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 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.
Here is my website in Google PageSpeed Insights with WP Rocket and without it.
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.
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- One puzzle piece. Core Web Vitals are only a small piece of a very large pie called SEO.
- 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.
Olga Zarzeczna is a senior SEO specialist with 8+ years of experience. She has been doing SEO for both the biggest brands in the world and small businesses. She has done more than 100+ SEO audits so far. Olga has completed SEO courses and degrees at universities, such as UC Davis, University of Michigan, and Johns Hopkins University. She also completed Moz Academy! And, of course, has Google certifications. She keeps learning SEO and loves it. Olga is also a Google Product Expert specializing in areas, such as Google Search and Google Webmasters.