Home » Core Web Vitals – Everything You Need to Know

Core Web Vitals – Everything You Need to Know

by | Jan 20, 2021 | SEO

The term Web Vitals is used to refer to an array of website metrics relating to the quality of the user experience a website offers to its visitors, which Google uses as indicators of a healthy website. According to their announcement, starting in 2021 Core Web Vitals will be used as ranking factors and, thus, become a part of SEO.

As you probably already know, maintaining a positive user experience requires continuous work, and keeping track of these metrics allows you to monitor how your site is performing in this sense. Knowing the strong and weak points in your website’s performance will give you a clear idea of what actions you need to take in order to improve.

In their efforts to provide users with a smooth experience when using their search engine, Google takes a user-centric approach when it comes to metrics defining a website’s performance. In essence, this means that Google is interested in the user’s subjective perception of the quality of their interaction with a website, and “rewards” websites that provide their users with fast loading times, responsiveness, and visual stability.

Since user experience signals are numerous, Google aims to make understanding the quality of user experience simpler for website owners and developers, by identifying the most important metrics to focus on – the Core Web Vitals.

 

What are Core Web Vitals?

Core Web Vitals are the essential Google Web Vitals metrics. Each of them corresponds to an aspect of user experience, is quantifiable, and represents the user’s subjective experience. As you might expect, the Core Web Vitals metrics are expected to evolve over time, which is likely to result in the list of Core Web Vitals expanding.

However, presently, Core Web Vitals focus on three distinct user experience aspects: loading, interactivity, and visual stability; and their corresponding metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

 

Largest Contentful Paint – LCP

LCP is a user-centric metric used to measure the perceived load speed by determining the time required to load the page’s main content – the largest image or text block. Unlike some of the metrics used in the past, LCP captures the moment when the largest piece of relevant and useful content (from the user’s point of view) has loaded.

Naturally, the sooner Largest Contentful Paint occurs on a website, the better, and scores of under 2.5 seconds are considered good.

 

How is the Size of Elements Determined?

When determining which element is the largest and is to be reported for Largest Contentful Paint, only those portions of the element that are visible within the viewport are considered. Any margins, padding, or borders are not considered for determining the size.

Image elements are compared based on either their intrinsic or visible size, whichever of the two is smaller for each of them, while the sizes of text elements are determined based on the size of their text nodes.

 

Why is Having a Good LCP Score Important?

Apart from the fact that it is going to become a ranking factor sometime next year, having a fast-loading website is also important for another reason.

The first couple of seconds are crucial in terms of convincing your website visitor that they are at the right place and that they can find the information they are looking for on your site. Websites with short loading times are more likely to avoid bounce backs, and it is only logical that you want to keep the visitors on your webpage.

 

How to Measure LCP

how_to_measure_lcp

There are several tools that can be used to measure LCP both in the lab and in the field:

Field tools:

  •       Chrome User Experience Report
  •       PageSpeed Insights
  •       Search Console (Core Web Vitals report)
  •       JavaScript

Lab tools:

  •       Chrome DevTools
  •       Lighthouse
  •       WebPageTest

 

What are the Causes of Poor LCP

The four main factors that can cause slow loading times are:

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Slow resource load times
  • Client-side rendering

If you have an issue with your website’s loading times, one or more of these factors is likely to be the cause. You can find an in-depth guide on how to optimize LCP here.

 

First Input Delay – FID

First Input Delay is a metric used to measure how the user perceives your website’s responsiveness. Once the content of your website has loaded, hopefully, the user will try to interact with your content. FID measures the time between the first interaction (clicking a link, for example) and the website’s response. We should note that continuous actions, like zooming and scrolling, are not related to FID.

 

Why Only FID?

There are 3 primary reasons why first input delay is measured, and not any other delay, even though it affects the user experience.

  • First input is the first impression you make
  • Most problems occur during page load, so improving them will have the greatest impact on improving interactivity
  • Solutions for improving FID are often not the same as the ones used for fixing input delays after page load, so the guidelines can be more specific.

 

Why is FID Important?

In terms of the mentioned user-centric approach, First Input Delay can help you measure how smooth of an experience your website visitors are having. Short FID times indicate an interactive and responsive website, while long FID times are indicative of the opposite, which can often result in user frustration.

Leaving a good first impression on the website visitor can mean the difference between them leaving to look elsewhere and coming back again in the future. In general, FID is considered to be good if under 100 milliseconds.

It’s important to note here that FID only measures the delay between the interaction and the response in terms of event processing, and does not include the event processing time even though it does have an effect on the user experience.

 

How to Measure FID

Since it requires real user interaction with the webpage, FID can only be measured in the field using some of the following tools:

  •       Chrome User Experience Report
  •       PageSpeed Insights
  •       Search Console (Core Web Vitals report)
  •       JavaScript

 

What Causes  Poor FID

In short, the principal cause of a poor FID is heavy JavaScript execution. This is due to the fact that the browser is unable to respond to most user interactions while the main thread is busy executing JavaScript. There are several things you can do to mitigate this issue:

  • Reduce JavaScript execution time
  • Break up long tasks
  • Optimize your page for interaction readiness
  • Use a web worker
  • Reduce the impact of slow third-party code

 

Cumulative Layout Shift – CLS

cumulative_layout_shift

Cumulative Layout Shift is a metric used to measure the visual stability of the website by quantifying the frequency of unexpected layout shifts that users experience. In simple terms, these layout shifts can mean any sudden changes on the page, from an article text shifting place unexpectedly to other elements, such as links, suddenly moving.

CLS measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. In order to ensure a positive user experience, the recommendation is to try to keep the CLS score lower than 0.1.

 

Are All Layout Shifts Considered Bad?

A layout shift has a negative effect on user experience only if the user isn’t expecting it. This means that layout shifts that are a result of user interaction are not considered bad, as long as the user is aware of the relationship between an interaction and a shift. For instance, good animations and transitions that move naturally have a positive impact on the user experience.

 

How to Measure CLS

CLS can be measured using different tools for in the lab and in the field measurements:

Field tools:

  •       Chrome User Experience Report
  •       PageSpeed Insights
  •       Search Console (Core Web Vitals report)
  •       JavaScript

Lab tools:

  •       Chrome DevTools
  •       Lighthouse
  •       WebPageTest

The differences between field and lab measurement results can be significant when it comes to CLS. This is because lab tools can only measure layout shifts that occur during page load, so the real users may experience more layout shifts than CLS values reported by lab tools would suggest.

 

How to Improve CLS

There are a few guiding principles provided by Google that should help you avoid all unexpected layout shifts:

  1.   Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes.
  1.   Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
  1.   Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

 

Core Web Vitals TL;DR

  • LCP – Measures how fast the largest relevant element on the page is displayed and is indicative of the user’s perception of the website’s speed.
  • FID – Measures how quickly the website is able to respond to a user interaction – longer delays are more likely to frustrate visitors.
  • CLS – Measures how often unexpected layout shifts occur (visible elements changing positions from one rendered frame to the next)

So, those are the basics of Core Web Vitals, but what does their introduction as ranking signals mean for website owners and developers?

 

How Will Core Web Vitals Change SEO?

Google has announced that Core Web Vitals will start affecting search rankings in May of 2021. However, as of yet, they have not specified how it will be implemented exactly. They only state that page experience signals (which are influenced by Core Web Vitals) will be included in search rankings, can be used as tie-breakers for content of equal quality, and they plan to incorporate more signals going forward.

One idea they plan to test out is having visual indicators of page experience, similar to content snippets or image previews. Other than the general plan and that one example, we still can’t say how precisely Google’s Core Web Vitals will impact SEO, besides that they will.

 

Some Practical Advice

Testing out and improving your Core Web Vitals is important for good user interactions with your website, so optimizing them is always desirable. However, because we don’t know how influential Core Web Vitals will be on SEO starting from May, we wouldn’t recommend you invest a substantial amount of resources to overhaul your entire website. On the other hand, as they will start being more important as time passes, you should focus on optimized Core Web Vitals for any new projects you start.

Mladen Maksic

Want more traffic?