To date, Google has had a series of guidelines regarding Core Web Vitals; however, it was reported that its effectiveness in terms of <SEO will be activated from May 2021. By adding Core Web Vitals to the more than 200 search engine ranking factors that Google already uses, Google has shown that it now attaches more importance to user experience.
The concept of Core Web Vitals is based on 3 main components that measure the loading, interactivity and visual stability of a website, which we will discuss in detail in our guide. To fully understand Core Web Vitals and its importance, it is critical that you read the entire guide carefully and rigorously implement what it highlights on your site.
In this detailed guide, we will explain what you need to understand Core Web Vitals and what you need to consider to make your site compliant with it, under the following main headings:
- Why is Core Web Vitals so important?
- What exactly is Core Web Vitals?
- How to measure Core Web Vitals?
- How to make Core Web Vitals better?
- What is the importance of Core Web Vitals for SEO?
Google has a lot of technical details about Web Vitals and page experience, but it may not be possible for a site owner to technically understand and implement them. We will explain this guide in a simple way that website owners can easily implement for their own sites, with less technical details but with many more examples. This guide will help you understand what Core Web Vitals is and what your next step should be.
Why is Core Web Vitals so important?
Core Web Vitals is considered an important element of providing users with a much better page experience. High page experience also naturally allows searchers to get more out of the sites they visit in terms of the content they are looking for when they visit a website.
Since day one, meeting the needs of a searcher has been a top priority for the Google search engine. So if you want Google to value your website in this context, responding to your users’ needs correctly should be a top priority for you.
Core Web Vitals, with its core 3 metrics; HTTPS, safe browsing, interstitial avoidance and a rating of a website’s mobile-friendliness, make up one of the five Google page experience signals.
As you can see from the diagram here, Google basically expects your website to provide a good user experience. To understand how high this experience is, it will be using 3 key Web Core Vitals components that we will talk about here.
A recent study found that much less than 15% of websites are currently optimized well enough to pass the Core Web Vitals assessment. In this case, it is obvious that it will be clearly advantageous for you to focus on this issue to put your site ahead of your other competitors.
Later in the article, in my Google page experience audit, you will learn step by step how to perform a page experience audit.
What exactly is Core Web Vitals?
Now that we understand the importance of Core Web Vitals, let’s dive a little deeper into what Core Web Vitals is.
Core Web vitals include the following three measurable metrics:
Largest Contentful Paint (LCP): Relates to how fast a web page loads. For a web page to claim to offer a good user experience, this value should be below 2.5 seconds.
First Input Delay (FID): This value, which we can translate as the first input delay, corresponds to a measurement related to the interaction of a web page during a page visit. For a web page to claim to offer a good user experience, it must have a speed of less than or equal to 100ms.
Cumulative Layout Shift (CLS): A value related to the visual stability of a web page. For a web page to claim that it offers a good user experience, this value must be lower than 0.1.
We will address each metric separately later in the article. First, let’s talk about the general framework of Core Web Vitals in a few bullet points:
- Core Web Vitals is a set of 3 metrics.
- Each of the three metrics includes a sub-item on user experience.
- Of course, the metrics that currently make up Core Web Vitals may change over time.
- The measurement created for all three metrics: Inadequate, Needs Improvement and Good.
- For a web page’s Core Web Vitals to be considered adequate, at least 75 percent of page loads must be working well.
- To be Web Vitals compliant, it is mandatory for all website owners to measure and optimize Core Web Vitals.
Google continues to work to bring Core Web Vitals to the forefront in all its tools.
Now that we have an overview of the Core Web Vitals, we can examine each item in detail.
Largest Contentful Paint (LCP)
LCP is a value related to the loading time. The reason why page speed is so important is, of course, because it has a direct impact on the user experience, because a user who visits a page cannot tolerate a waiting time of more than a few seconds.
To summarize, LCP is the time from when a visitor requests a page until the main content is loaded and is usually measured by looking at the largest text size in the visible area, with an ideal duration of around 2.5 seconds.
The speed at which a page loads content in the viewport is one of the first impressions a website makes in the eyes of the visitor, and if it can’t handle it within a few seconds, it will most likely lose the visitor.
LCP, FP (First Paint) Comparison
Keep in mind that LCP is different from FP.
The concept of FP is a metric for when the screen changes and displays something different from what was previously displayed. So this can include the empty space that will appear as the content and elements of the page continue to load.
Whereas LCP measures the largest piece of useful content displayed, which is what the user actually expects to see. It is therefore considered a much better measurement criterion than FP.
The following examples show a few examples of FCP and LCP and how they differ
Looking at the values shown here, if the measured value is under 2.5 seconds, that’s pretty good. If it takes up to 4 seconds, you might think it needs a little more work. However, if the value is above 4 seconds, the LCP will be considered very poor according to the score obtained here.
Later in the guide, we will also list all the tools you can use to measure all three Core Web Vitals metrics.
First Input Delay (FID)
The FID value, which we can express as the First Entry Delay, corresponds to the interaction on the website.
As the name suggests, the first input is your interaction with the page and the latency is how long it takes for the page to respond to that action.
Simply put, FID measures the experience of users trying to interact with unresponsive pages and focuses only on input events from actions such as clicks, capitalizations, scrolls or key presses, the ideal value for FID is 100 ms or less.
The importance of FID is based on the recognition that a loaded page is of little use unless a user can interact with the site and take action.
Online interaction with a website or web page means clicking a button, clicking a link, selecting an option or executing a JavaScript command.
If PSI has enough data for your site, you can check your FID using Google Search Console or Google PageSpeed Insights.
Looking at the values shown here, if the measured value is under 100 ms, this is quite good. If the duration is as long as 300 ms, more work is needed, and if the value is above 300 ms, it means that work needs to be done to improve the FID.
First Login Delay is the most important phase of making a good first impression on the user. A higher delay in their first interaction with the site will likely eliminate the possibility of the user engaging at all.
The time taken to process and upload the relevant information is not taken into account in the FID measurements.
Cumulative Layout Shift (CLS)
Page CLS is measured as a value related to page stability.
The CLS formula measures how many elements scroll on the screen before the page stabilizes. The lower this amount, the higher the measurement score.
In simplest terms, CLS measures the total number of scroll values for each unexpected layout change that occurs during the time a web page is being used. It looks for displacements and unstable elements in the visitor’s viewable area as the page is fetched.
The ideal value is 0.1 and values below this measurement are considered good.
It is often the case that during the loading phase of a page, various elements on that page are likely to shift before they fall into place, but the more this can be avoided, the better.
You can imagine how frustrating it can be for visitors to interact with the page, especially if elements on the page are constantly changing or take too long to change. These layout issues will therefore lead to a poor user experience.
Imagine clicking on a link, but because of the sudden layout change, it can be frustrating if you click on an ad or the wrong link. It is important to note that the negative impact of a weak CLS will not only anger visitors to the site, but also inadvertently damage cookies, etc. clicks to give unwanted permissions will also undermine his/her trust in you. The visitor in question will, quite rightly, never want to visit the site again.
CLS values reported by various measurement tools may be lower than actual user experiences. This is mainly because measurement tools tend to load pages in an artificial environment. This means that they can only measure CLS disturbances that occur during page load.
On a perfectly designed web page, it is possible to pull the CLS value down to 0. A value of up to 0.1 is not a problem, the longer the time, the lower the CLS score will be and values above 0.25 are considered bad.
Other Important Points to Consider
There are other metrics that are considered as ancillary metrics for Core Web Vitals.
- There are also important metrics that measure the loading speed of a site, such as TTFB (the time it takes for the browser to receive a response from the server) and FCP (the preliminary time it takes for relevant objects to be displayed in primary colors, rather than leaving the user waiting on a blank white screen before the content is fully read), and when it comes to diagnosing problems with LCP, they can provide useful clues to the problem and its solution.
- In addition, metrics such as TTI (Time to Interaction) and TBT (Total Time to Block) are critical metrics that are vital in identifying potential interaction-related issues that could have a negative impact on FID.
How to Measure Core Web Vitals?
Quality optimization is the key to the long-term success of any site in the eyes of users and Google. Core Web Vitals are the best indicators that website developers and website owners can use to measure the performance of their website pages.
Fortunately, Google provides a wealth of documentation and useful resources, as well as tools to help you better optimize websites to meet the Core Web Vitals requirements.
The ideal threshold to measure is when at least 75 percent of your website’s page loads are working well.
You must meet these conditions for all the metrics listed above. Google continues to refine its algorithms to determine whether all pages included in the search engine meet these experience criteria.
Core Web Vitals Değerlerini Ölçmek İçin Araçlar
Now let’s talk about what kind of tools you can use to measure Core Web Vitals.
There are 2 types of tools that can be used to measure Core Web Vitals:
- The first are field tools that focus on data about how real users experience a website and provide insights into Real User Monitoring, referred to as RUM; the data collected by such tools is called field data.
- The other type of tools are what we can call Lab Tools, which offer insights into what users will experience and provide more analytical data for debugging, and the data collected with these tools is called lab data, as the name suggests.
Both types of tools and the data they provide have their own importance.
- If you are a developer, you can mostly benefit from data from lab tools.
- For website owners or SEOs overseeing a site, it will be more beneficial to use the domain tools they provide as they make improvements based on data from the actual users of the website.
Google provides both domain and lab tools that you can use for Core Web Vitals on your website. While Core Web Vitals are metrics from Google metrics, there are non-Google tools that are useful for evaluating these metrics.
Field Tools to Measure Core Web Vitals
Let’s talk briefly about all these tools that can be useful to you.
As we said above, if you are an SEO agency or a website owner, you will probably want to make more use of on-site tools.
- Field tools provide information about how real users actually experience a website.
- This type of measurement is often referred to as RUM, Real User Monitoring. Data collected by field instruments is also called field data.
We can list the field tools for measuring Core Web Vitals values as follows:
Google Chrome UX (User Experience) Report (CrUX)
The Google Chrome UX Report (CrUX) is a publicly available data warehouse containing data on real user experiences based on millions of websites. Core Web Vitals measures field values and this data, the Google Chrome User Experience Report data, is real data from real registered users.
Requirements Technical knowledge
Level: Advanced
Objective: To provide a custom visual dashboard for Core Web Vitals and integrate the Core Web Vitals metric into a web analytics software.
The CrUX report enables website developers and owners to understand how real user experiences perform both on their own websites and on their competitors’ websites.
Google PageSpeed Insights
Google PageSpeed Insights (PSI) is a very useful tool that reports both lab and field data on the performance of a web page on both mobile and desktop devices.
Google PageSpeed Insights provides an overview of real users’ experience with the page because it uses the Chrome UX Report, which uses domain data.
Requirements None
Level: Beginner
Objective: To identify both lab and field issues on a specific web page.
With Google PageSpeed Insights, you can take advantage of the data provided by the Chrome UX Report without any technical or coding knowledge.
Google Search Console
Google Search Console is the easiest and simplest tool on our list to measure Core Web Vitals in the field. In order to use the site data provided by Google Search Console, you must have a verified Google Search Console account.
Google Search Console has a new Core Web Vitals report that allows you to identify groups of web pages on your website that you should pay particular attention to. The Google Search Console Core Web Vitals report utilizes field data from Google Chrome UX Reports. This is therefore real data from your users.
Requirements: A verified Google Search Console feature
Level Medium
Objective: To identify web page domains that have Core Web Vitals issues
Web.dev
Web.dev is another way to measure Core Web Vitals along with other performance factors. Web.dev allows you to monitor and measure the performance of your website over time. In addition to other tools, the tool provides a good list of guidelines and tips on how to make your site better for Core Web Vitals.
Requirements None
Level Medium
Objective: To provide guidance and a list of guidelines.
The Web.dev tool not only measures Core Web Vitals, but also provides a broader set of data with a detailed list categorized by other important factors such as overall performance, accessibility, superior methods or SEO.
Measuring Core Web Vitals Values in JavaScript
Google has provided an open source web vitals JavaScript library to make it easier for developers who want to measure Core Web Vitals performance for their websites. Developers can use this as a reference to accurately capture each Core Web Vitals for the website’s users.
Requirements: Knowledge of web analytics software and developer
Level: Advanced
Objective: To get a custom Core Web Vitals data and measure real data from real users of the website
This way, if your site does not support Core Web Vitals measurement by default, you can use your web analytics tool to measure Core Web Vitals for your own needs.
The best example of this method is the Web Vitals report in Google Analytics, where you can measure Core Web Vitals.
Laboratory Tools for Measuring Core Web Vitals
For developers, measuring and testing Core Web Vitals will likely require the use of lab tools.
Unlike field tools, lab tools provide information about how a user might perceive a website. The data provided by laboratory instruments is called laboratory data. Developers can use lab data to avoid bugs.
Here are the lab tools you can use to measure Core Web Vitals:
Lighthouse
Lighthouse is a great Google tool that every website owner can follow on a daily basis. It is an automated site audit tool that allows you to diagnose problems on your website and shows you ways to improve a user experience. Lighthouse measures various user experiences in a laboratory environment.
This tool, which has been used for various website metrics for many years, has started to measure Core Web Vitals metrics and provide data on these metrics in addition to dimensions such as SEO and accessibility with its latest version. So one of the things that makes Lighthouse great is that it not only measures the 3 metrics of Core Web VItals, but also takes them into account when calculating the overall performance score of the website, giving a bigger picture.
Requirements: Chrome and technical knowledge
Level: Advanced
Objective: To monitor Core Web Vitals metrics before making any changes to any website to make sure everything is going well
In summary, Lighthouse is a great tool that doesn’t just focus on Core Web Vitals, it offers so much more, and is a broad application that those who already use it for metrics can easily continue to use it for Core Web Vitals metrics.
Chrome DevTools
While we’ve said that Lighthouse offers a bigger picture, it is itself a small part of a larger set of Google tools known as Chrome DevTools. DevTools, as the name suggests, consists of tools for developers and advanced users.
You can use the Chrome DevTools Performance panel to detect unexpected layout changes. This provides invaluably valuable data when it comes to detecting and correcting issues with visual stability on your website’s web pages.
Chrome DevTools also allows you to diagnose whether your website is ready for engagement by measuring the Total Block Time, called TBT in the footer. The TBT measure is a great indicator of Delay to First Entry, one of the 3 important pillars, which we have already mentioned as FID, which cannot be measured in the lab.
Requirements: Technical and developer knowledge
Level: Advanced
Objective: To optimize the website locally and guide what needs to be fixed.
In a nutshell, Chrome DevTools is a set of advanced tools that allow you to deeply analyze your website in a lab environment.
Core Web Vitals Chrome Extension
The Core Web Vitals Chrome Extension is one of the lab tools used to measure Core Web Vitals. Google Chrome on desktop allows you to measure these metrics in real time.
Areas where it is useful:
- For developers to instantly check and measure values as they work on the website
- Users who want a simple and straightforward diagnostic tool to measure Core Web Vitals while browsing the web (moderately advanced)
Requirements: Chrome
Level Medium
Objective: Real-time access to Core Web Vitals values on desktop
Whether you are a beginner or an advanced user, there is no reason not to use this Chrome extension in your browser.
Other Tools to Measure Core Web Core Values
You can think of the Google tools for measuring Core Web Vitals as your main tools, but there are other great tools you can use alongside them.
Here are a few highlights:
Core SERP Vitals Chrome Extension
Core SERP Vitals shows Core Web Vitals data from the Chrome User Experience Report directly in search results on Google. You can see the Core Web Vitals metrics for a specific web page directly in the search results and avoid the hassle of checking with additional tools, because the metrics can be observed directly in the SERPs with this extension.
Core SERP Vitals displays scores for LCP, FID and CLS directly below the web page link in search results.
Requirements Chrome
Level Medium
Objective: Get information about Core Web Vitals metrics directly from search results
Core SERP Vitals is available in the store as another Chrome extension you’ll probably want to use.
GTmetrix
Besides Google PageSpeed Insights, GTmetrix is another popular tool for measuring the speed and performance of websites. GTmetrix has also started to measure Core Web Vitals in its latest version based on data from Lighthouse.
Requirements: None
Level:Medium
Objective: To obtain general data on the speed and performance of the website
GTmetrix not only measures Core Web Vitals, but also provides a visualized site speed graph.
If you are a website owner or SEO, it is advisable to include this tool in your daily to-do list.
WebPageTest
WebPageTest is a godsend if you plan to do a deeper study of your website’s speed and performance. This tool enables advanced testing with different metrics for different test locations, device types, connection types and more.
WebPageTest not only provides information about Core Web Vitals metrics, but also many useful charts and diagrams.
Requirements None
Level: Advanced
Objective: To obtain a detailed overview of a website’s performance
WebPageTest is one of the most advanced tools for measuring website speed and performance.
CLS GIF Maker
Finally, let’s talk about Layout Shift GIF Generator a fun tool that allows you to visualize Core Web Vitals CLS with a funny GIF. To use this tool, all you need to do is enter the URL of the website you want to test, select mobile or desktop and watch the results visually.
Requirements None
Level: Beginner
Objective: To obtain a fun visualization of layout changes to observe the CLS of any website
If you can’t quite visualize in your mind what the CLS base metric is, this tool will really help you get the hang of it.
You can easily use this application without installing any additional plugins or subscriptions and get a good visual impression of where there might be problems.
How to make Core Web Vitals better?
Now that you know the best practices for measuring Core Web Vitals, you can use these tools to understand how your website is performing against Core Web Vitals. As you use these applications, you can better understand how each metric can be improved, its causes and consequences, and start making the necessary improvements for your website.
Now let’s talk about how we can optimize Core Web Vitals.
How to Develop LCP
Code-based issues such as JavaScript and CSS blocking loading, code-based issues such as JavaScript and CSS blocking loading, hosting-related issues such as slow server response times, client-side rendering, or slow resource load times can cause LCP scores to drop and negatively impact the user experience.
To improve your LCP score, you need to address and correct each of these individually.
Here’s what you can do about it:
- Use TTFB to measure server response time and optimize it by doing the following:
- Redirecting users to a nearby CDN,
- Caching content,
- Establish third-party network connections (rel = “preconnect”).
- Check these fixes for JavaScript and CSS blocking loading:
- Minimize CSS,
- Postponement of non-critical CSS,
- Inline critical CSS,
- Minimize or compress JavaScript files,
- Defer unused JavaScript,
- Minimizing critical JavaScript,
- Minimizing unused polyfills.
- You can also improve slow resource load times by doing the following:
- Optimizing and compressing images,
- Pre-load important resources,
- Compressing text files,
- Offer different content according to network connectivity,
- Caching content to improve load time.
- Be sure to remove large elements from your web pages, as they have a significant impact on the time it takes for a website to fully load.
- Use server-side rendering and/or pre-rendering.
Implementing the above points will help you reduce the time it takes for your page to load.
How to Optimize FID
The main reason behind a bad FID is the heavy JavaScript code running.
To improve your website’s FID, you can implement the following:
- Divide Long Tasks into small, asynchronous tasks:
- Break code that blocks the main thread for 50 ms or more into small pieces,
- Explore code-splitting,
- Make your page always ready for interactions:
- Address TBT (total blocking time) by optimizing the Critical Rendering Path,
- Move slow and unnecessary components out of the way.
- Reduce JavaScript rendering time as follows:
- Code splitting,
- Do not defer unused JavaScript,
- Minimizing unused polyfills.
- Use a web worker to have the server run JavaScript in a background thread:
- Comlink is a helper library that summarizes postMessage and makes it easier to use
- Workway is a general purpose web worker exporter.
- Workerize helps you migrate a module to a web worker
- By using third-party scripts, such as Google Analytics, you can cause your FID to slow down. To improve FID, get rid of third-party scripts that are not essential for the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
How to Optimize CLS
The main reasons behind a poor CLS are images, ads, internal frames and unsized embeds, dynamically inserted content and web Fonts that cause FOIT/FOUT.
Implementing the following actions will help solve these issues and improve a website’s CLS score:
- Give height and width values to images and video elements so that the browser knows in advance exactly how much space is required for each element.
- Reserve space for ads, embeds and internal frames so that the browser knows where they should appear. This will ensure that ads do not appear randomly on the screen and content will not scroll up and down, negatively impacting the user experience.
- Avoid adding additional content unless necessary or mandatory.
- Use pre-installed typefaces or tools.
- Avoid situations where it needs to wait for network response before updating the DOM.
- Pay attention to content that is dynamically placed on the page.
Optimizing Core Web Vitals in WordPress
If you are not a technical person, you may be a bit overwhelmed by the number of applications above
If you have a WordPress-based website, you can improve the performance of your site with the help of various speed plugins for WordPress. There are many speed and performance plugins for WordPress, but you need to be careful here and make sure you use one of the few that actually works.
You can dramatically improve your website speed by using the following WordPress plugins.
WP Rocket
WP Rocket is a nice plugin that requires no technical knowledge to install.
Imagify
Imagify will help you batch compress images. Imagify not only compresses all the images on your website, but also automatically compresses any new images you upload.
With these two plugins alone, you can significantly improve your Core Web Vitals on your WordPress-based site. All you need to do is install and activate the plugin. You don’t need to do anything else!
What is the importance of Core Web Vitals for SEO?
After the announcement that Google will accept it as a ranking metric, it’s a question we need to answer immediately: How much should we care about Core Web Vitals?
Our evaluations of Core Web Vitals and SEO are as follows:
- One way or another, ore Web Vitals is ultimately a ranking factor among hundreds of scores. This is not to say that Core Web Vitals is unimportant, but it is just one of many ranking factors that Google algorithms use to evaluate and rank websites.
- The Core Web Vitals values are only one of a total of five page experience factors. If you want to have a decent advantage in this regard, make sure your website passes all Google page experience signals.
- Core Web Vitals is not magic. So, Core Web Vitals alone won’t magically make you #1 either. This is only a technical factor that can help content rank better. Content is still the KING of ranking factors.
- Watch your competitors. As a ranking factor, Core Web Vitals can have a negative impact on your website, but this will be more pronounced when your content is poor.
- As we mentioned a few articles ago: Content is still KING. Let’s say there are two websites on the same topic. The first website has great content and poor Core Web Vitals metrics, while the second website has poor content but passes Core Web Vitals. In this case, the first website will still beat the second website.
Core Web Vitals SSS
We think we have prepared a comprehensive guide on Core Web Vitals. However, if you still feel that you don’t know enough about this topic and would like to know more, you can still benefit from Google’s Core Web Vitals FAQs. In fact, as we said at the beginning of the article, you can continue to follow Google on this issue, assuming that it will make improvements in metrics.
To make a brief summary of what we have said so far:
Core Web Vitals are user-centered metrics, meaning they focus on understanding, measuring and improving user experiences. So it’s fair to argue that making Core Web Vitals improvements will also help your site attract more users.
The Core Web Vitals are assessed on a page-by-page basis, so keep in mind that it may be the case that some of your web pages meet these criteria and others do not.
The added benefit of passing all Core Web Vitals is that even if you don’t see an immediate impact on rankings, it will certainly contribute to the overall quality of your site as it will improve the user experience.
AMP pages are more likely to pass Core Web Vitals than regular web pages due to their standardized rendering. But either way, it does not mean that a non-AMP page cannot meet these thresholds, or that all AMP pages will automatically pass Core Web Vitals.
A great resource for learning how to speed up websites is https://web.dev/explore/fast.
Page experience signals, which will be considered as ranking factors, will initially only apply to mobile search.
It is important to know the difference between the lab data provided by Lighthouse and the Google Search Console Core Web Vitals report, which shows domain data from actual users of the website. Therefore, while Google may in some cases see errors in the Search Console Core Web Vitals report, you may not see any issues with Lighthouse. Be prepared for this situation.
Don’t confuse mobile-friendliness with the website being fast for mobile devices.
The new update will also make non-AMP content eligible to appear in the mobile “Top Stories” feature in search.
Above all, to emphasize once again, remember that content is still a very strong signal.
General Notes
While there seems to be a lot for most people to digest in the topics covered so far, there are many other aspects of the web experience that are not yet covered by the user-centered metrics in Core Web Vitals.
Google announced that it will update Core Web Vitals annually as it plans to further improve its ability to measure page speed and other page experience characteristics. This will also make it necessary for future competitors to make regular updates to the app.
At the end of the day, page experience is important yes but content relevance is still the most important element, which means that your website won’t suddenly have its rankings disrupted if it doesn’t meet Web Vitals requirements until the algorithm is rolled out.
