Core Web Vitals are the new set of Google metrics that matter most to the user experience and measure key aspects of web speed, interactivity, and visual stability. Core Web Vitals are made up of three specific metrics measuring page performance and usability: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
So, why should we care?
Core Web Vitals will take effect in mid-June 2021 as a new Page Experience ranking signals for Google's search rankings. To get ready for these changes, you need to start evaluating and optimizing your website for each of the three metrics. This article will explain how to measure, interpret, and improve your Core Web Vitals scores to deliver a better user experience and boost your organic search rankings on Google. As a result, you will improve other important metrics such as bounce rate and conversion rate.
Chapter 1: How User Experience Impacts Ranking
Users love fast and responsive interfaces - a good user experience affects user behavior and can substantially increase engagement. Furthermore, user engagement signals, like dwell time and bounce rate, are important factors that can boost your ranking on SERPs. In fact, Google uses over 200 ranking factors in their search algorithm, many of which are related to key aspects of usability.
There are numerous studies of how even the smallest user experience optimizations can have a large, measurable effect on a company's business results.
- Google analyzed millions of page impressions to understand how Web Vitals metrics affect users - The Science Behind Web Vitals, - Chromium Blog ›
- Optimizing for Web Vitals generated more sales for Vodafone - Vodafone: A 31% improvement in LCP increased sales by 8%, - web.dev ›
- The study on how mobile site speed improvements positively affect site metrics - Milliseconds make millions, - Deloitte ›
Google's Page Experience Signals
Page Experience is a Google ranking factor measuring the experience of interacting with a web page. You can access Google's Page Experience reports for your website in a separate tab on your Google Search Console. The report includes existing search signals: Mobile Usability, Security Issues, HTTPS, and Ad Experience, alongside Core Web Vitals as a new set of signals used by search algorithms.
Pages that receive a score of "good" on Core Web Vitals are achieving an aspirational level of user experience, and might get a boost in the page experience component of ranking, provided other components of the page experience signal (HTTPS, mobile-friendliness, etc) are deemed OK.
Having relevant quality page content is still utterly crucial for higher rankings on Google SERPs. However, in cases where many pages may be similar in content relevance, page experience will make a difference for visibility in search results.
Chapter 2:Core Web Vitals Scores in Detail
The Core Web Vitals consists of the metrics that matter most in understanding the experience we're delivering to the user. They are focused on three different aspects of page usability:
- LCP, or Largest Contentful Paint: How fast the page content loads
- CLS, or Cumulative Layout Shift: How stable the layout elements feel
- FID, or First Input Delay: How long it takes for a browser to respond to a user interaction
The easiest way to check your website's Core Web Vitals Scores is to visit the report in your Google Search Console. The report will show if your pages are categorized as "poor," "need improvement," or "good."
The good thing about Core Web Vitals scores is the transparency - there are clear, publicly available criteria that allow each metric to be monitored and improved using a dedicated set of tools. For site owners, understanding these criteria and making the necessary changes should be made a priority, even if it is not for ranking purposes.
Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) metric measures the rendering time of the largest element on a page, starting from the moment the page first started loading. In other words, LCP measures how quickly a user can see the main content of a page.
LCP reflects the page loading speed. Longer page load time impacts the page experience negatively. Bounce rates can increase, indicating that customers are leaving a page before engaging intended conversion activities. The LCP metric algorithm monitors the following types of elements:
- Images
- Video poster images
- Background images
- Block-level text
The web page loads in stages, and as a result, the largest element on the page may change. Basically, LCP searches for the last largest item to appear in the viewport. When does the LCP metric algorithm stops observing the appearance of new elements? After all, we are only interested in the loading stage. It is the moment the user first interacted with the page - be it a click or a scroll.
How to Interpret Your LCP Score
While it is not possible to achieve a zero LCP score because of the network latency, the largest element should be loaded before the user loses focus on a task. To ensure a positive user experience on page load, a site should strive to get its LCP score within the first 2.5 seconds of page load time.
LCP Optimization
There is a large range of factors that can affect LCP score, for example, slow server response times or heavy content resources, requiring too much time to load.
Typically, any page load speed optimization will have a positive impact on the LCP score. Here is a shortlist of optimization recommendations:
- Pre-connecting to third-party domains and prioritizing resource loading
- Making sure that the server response time is at an acceptable level
- Implementing an effective caching policy for the static files
- Reducing the number of render-blocking resources
- Optimize and compress images, compress text files
- Minification, splitting, and removal of unused code
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is the aggregate score of all individual unexpected layout shifts on your page. A layout shift occurs when a visible element in the viewport unexpectedly changes its position. For example, the user tries to click a button - only to miss it because a big ad appears in that spot. CLS reflects the visual stability - the lower the CLS score, the more stable your page is, providing better user experience.
The level of difficulty users will experience when trying to engage with elements on your site will affect metrics such as click-through rate and conversion rate. Site owners need to make it as easy as possible to engage with site elements to drive sales and conversions.
CLS score can vary a lot based on how a user is interacting with the page. Every unexpected position change until page unload will affect the CLS score. Thus, it is particularly important to make field CLS measurements based on real-user data, as data reported by lab tools does not give us the full picture.
How to Interpret Your CLS Score
Ideally, web pages shouldn't have any layout shifts, but it's not always possible in practice. Google recommends a total CLS score under 0.1 for a Good experience.
CLS Optimization
Any element can cause an unexpected layout shift by showing up on the page after page load, changing dimensions or position in the content layout. Ads (e.g Google AdSense Responsive Ad Units) are one of the biggest offenders when it comes to CLS, causing content to shift after loading. In general, any content inserted above existing content like ads, banners, notices, chat windows will likely cause CLS.
General recommendations to fix CLS are:
- Set width and height attributes on image and video elements
- Preload optional fonts
- Use composited animations
- Speed up effects and animations
- Reserve space on the page in advance for dynamically injected content
- Avoid using obtrusive ads and pop-ups
First Input Delay (FID)
The First Input Delay (FID) metric measures the time from the moment the user started to interact with the page until the browser was ready to respond to that interaction. If the user opens your web page and tries to click a CTA link or type into a form field, but nothing happens or happens too late - your FID score is probably in the Poor category, and your conversion rates are suffering.
FID reflects the interactivity and responsiveness of the page. If the first interaction doesn't feel instant to the user, it will form an overall negative impression of your website's quality. On the other hand, if the page can respond quickly to user input, it will create a good user experience leading to more time being spent on the site (increased dwell time), encouraging your visitors to explore your products and services.
FID can only be measured in the field as you need real users to interact with the page. To investigate interactivity in the lab, there is the Total Blocking Time (TBT) metric.
How to Interpret Your FID Score
Interaction response times should be as fast as possible. Delays up to roughly 100ms are considered a good quality of experience.
FID Optimization
The two main reasons the page not being immediately responsive to the user interaction:
- The loading of the DOM-related JavaScript hasn't finished yet.
- The browser’s main thread is busy parsing, compiling or executing the page resources.
Third-party ads and widgets that are often JavaScript-heavy can be singled out as the biggest cause of non-interactivity. The main improvement that can significantly impact the FID score is to reduce and optimize JavaScript resources on the page. You should:
- Load less JavaScript on a single page
- Optimize JavaScript execution time
- Break tasks into smaller chunks, which individually execute in < 100ms
- Move tasks off to the main thread to a web worker
Chapter 3: Measuring and Improving Core Web Vitals
Core Web Vitals metrics can be obtained and measured in the lab (simulated monitoring), and in the field (real-user monitoring). You should be aware that the results can differ significantly.
Lab data is collected from page loads in a simulated environment, with predefined conditions. You can still try to mirror your users' conditions when you test performance locally.
Field data is collected from Chrome users and stored in the Chrome User Experience Report. Core Web Vitals metrics measured in the field reflect the browsing experience of real users visiting your website. If you need a more detailed dataset than the one provided by CrUX, you can set up your own real-user monitoring with the web-vitals library.
Field measurements depend on a user's device, network, and other conditions that impact the browsing experience. Only field measurement can capture the relevant user experience, and Google is using field data to rank websites on SERPs.
For search rankings, we use field data, as this is what your site’s users have experienced over time. This makes the data more representative for your site, taking into account where your users are located and how they access your website.
Tools to Track Core Web Vitals
We put together the list of essential Core Web Vitals lab and field tools that will help you analyze, improve scores and boost rankings.
Lab Tools
Field Tools
- Chrome User Experience Report (CrUX)
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
Combined Tool
- Google's PageSpeed Insights - provides both lab and field data about a page. It uses Lighthouse to analyze lab data, while real-world field data is based on the Chrome's CrUX data.
How To Improve Core Web Vitals Workflow
Website owners should start monitoring and optimizing the Core Web Vitals metrics as soon as possible, as page experience becomes an even more critical ranking signal with the new Google algorithm update. To get started, we recommend the following workflow:
- Google Search Console provides the Core Web Vitals, and the Page Experience reports to identify groups of pages that require attention and improvement based on real-user data.
- PageSpeed Insights helps identify per-page opportunities by providing both field and lab data, as well as a set of actionable recommendations.
- Prioritize either by issues that affect the most pages, or by issues that affect your key pages.
- Share the reports with your development team when you've sorted the issues by priority.
- Test your fixes with lab tools - using the PageSpeed Insights or Lighthouse.
- Analyze the improvements in Google Search Console. Click on Start Tracking on the issue details page in the Search Console Core Web Vitals report and track your validation process. Note that any changes you make will take 28 days to fully reflect in Google’s data.
Need help with your Core Web Vitals scores?
Get ready for the search algorithm changes. Let us improve your Core Web Vitals and boost organic traffic to your website!
Conclusion - Boosting Rankings With CWV
Google's Core Web Vitals has become another important factor to pay attention to. Improving the Core Web Vitals metrics will not only have a positive impact and boost your website's ranking (SERPs) but will certainly improve user experience. In any scenario, making the necessary adjustments leads to happier users, more conversions, more traffic, and, as a result, more profit.
Share
