What Are Core Web Vitals? A Guide to Speeding Up Your Website

Core Web Vitals represent the quality of the user experience a site provides, and improving your Core Web Vitals score will help you rank better on Google, increase your visitors’ satisfaction and win more sales.

In this article we’ll explain everything about Core Web Vitals, and if you also want to know what other recommendations to follow to improve the user experience in your business, you can visit this list of the 19 most important tips for improving user experience.

What are Core Web Vitals?

Core Web Vitals are a set of metrics created by Google to measure and represent, in a quantitative way, the level of quality a page has in terms of the user experience it offers.

Each of the metrics that make up Core Web Vitals represents an important aspect of the user experience, and together these 3 metrics represent the quality of a page in terms of how pleasant it is for a user to interact with.

Core Web Vitals metrics

Core Web Vitals are made up of 3 metrics created by Google, which relate to loading speed, site interactivity and the visual stability of elements. 

Each of these metrics has a different scoring threshold that shows where your page stands for that metric.

Largest Contentful Paint (LCP)

Largest Contentful Paint, or LCP, refers to the time it takes to render the largest element within the first paint of the page’s content.

The time taken into account when scoring the LCP metric starts from the moment the page began to load.

LCP score:

LCP is the metric that represents the speed of a web page, and a Largest Contentful Paint score below 2.5 seconds is considered good and could be taken to mean that the URL has no speed problems.

First Input Delay (FID)

First Input Delay, or FID, refers to the time that passes between a user first trying to use the page and the browser responding.

This interaction can be any function that runs interactively, such as pressing a button or clicking a link. From that moment, the time is measured until the browser is able to start processing that event.

FID score:

The FID metric represents, in a quantitative way, how interactive the page is, and a score below 100 milliseconds indicates that your page is interactive for the user.

This is a harder metric to assess, as the score will be better or worse depending on when and how the user interacts.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift, or CLS, refers to the visual stability of the site. In other words, a page with a low CLS score is a page with a pleasant layout in which users don’t experience unexpected layout shifts.

CLS can be considered an important aspect of the user experience, because a page whose elements don’t stay stable until it has fully loaded can leave an unpleasant impression.

CLS score:

For a page to be considered visually stable, its CLS score should be below 0.1.

This means that each time a visible element changes position from one rendered frame to the next, it is unstable for less than 1 second.

Why are Core Web Vitals important and how do they affect SEO?

Core Web Vitals are important because they are part of Google’s algorithm for assessing the quality of the page experience.

In 2020 Google announced the so-called Core Web Vitals, and from 2021 they were rolled out as a ranking factor.

Both the most recent algorithm updates and much older ones, such as Google Panda in 2011, mention the importance of user experience, which Core Web Vitals influence.

Given that Core Web Vitals are a representation of a website’s usability, they will have an impact on your site’s SEO.

What’s more, a positive page experience doesn’t just mean better rankings and more visits; it will also reduce the site’s bounce rate and bring the chance of more conversions, a greater likelihood of building user loyalty, and so on.

How can you improve your Core Web Vitals score?

To improve your score on the Core Web Vitals metrics, you’ll first need to measure and gather data to find out the state of your site, learn which aspects are failing or where you have room for improvement, and take action.

Tools for measuring Core Web Vitals

When measuring your score on the core web metrics, you can obtain two types of data:

• Lab data: data obtained from tools that load the page simulating how a user would.
• Field data: data obtained from real users who have interacted with your site.

Google Search Console

The Google Search Console tool, in its experience reports section, offers a report with data on the core web metrics.

This data is useful for assessing the quality of the site because it is based on information gathered from real users.

In this Search Console report, you’ll find data on the number of URLs in each status (fast, needs improvement or poor), and by opening the report you can see which metric or metrics are failing or need improving.

Page Speed Insight

Page Speed Insight is another Google tool. In this case it offers both real user data (when there is enough data for it) and lab data, that is, a real-time diagnosis by Google.

This is what a web metrics assessment panel looks like:

This is what a real-time performance panel looks like:

At the bottom of the performance report, it gives you data on critical issues, areas for improvement and passed audits, for both the mobile and desktop versions.

Lighthouse

Lighthouse is yet another Google tool that lets you gather data to measure Core Web Vitals.

Lighthouse gives you lab data in a similar way to Page Speed Insight, but this tool goes a little further than measuring performance and also provides data on SEO, PWA and other best practices.

To assess Core Web Vitals with Lighthouse, the First Input Delay (FID) metric can be related to the data obtained from the Total Blocking Time metric.

Total Blocking Time (TBT) measures the time the page is “blocked”, that is, the time that passes until a user can interact with it, which can be a more accurate way of gauging FID.

How can you improve the Core Web Vitals metrics?

To improve your score on the core web metrics, we should look for actions aimed at making your page interactive (FID), fast (LCP) and visually stable (CLS).

Improving First Input Delay (interactivity)

The most common cause or problem affecting the First Input Delay metric is usually resources loading out of order, and this disorder in the code prevents the events that make a function interactive from running quickly.

For example, when the browser is busy loading a heavy JavaScript file and, in the meantime, cannot load any event, such as opening the menu.

The solution is to put these scripts and images in order and ask the browser to run them in the right sequence.

To do this, use asynchronous or deferred loading for these resources..

Running JavaScript files asynchronously and deferred allows the browser to load the visible elements of the page while the JavaScript is being downloaded.

With async loading, the script is downloaded while the HTML is being parsed, but it runs as soon as it has been downloaded. 

With deferred loading, the script runs at the end and HTML parsing is not paused.

Cumulative Layout Shift (visual stability)

Some of the most common causes of CLS problems are elements without specified dimensions.

Visual media (images, videos, iframes, etc.) whose size is not specified can be one of the main causes of poor visual stability.

To fix this problem, include the height and width attributes specifying the element’s dimensions, so the browser knows how much space that element will need and it won’t shift as the website loads.

Other elements such as ads or embedded elements (tweets, for example) can also cause visual stability problems, and in some cases they can be somewhat harder to fix.

For example, in the case of ads, the solution may be to create a div element specifying the height and width that the ad will fit into.

Largest Contentful Paint (speed)

Mainly, your LCP score is affected by:

• A slow server.
• Render-blocking files
• Very heavy images or elements

Slow server

The TTFB metric is a quantitative way of gauging server performance. The time this metric shows is when the server allows the page to start loading, which has a big impact on LCP.

Recommended practices to improve server response time:

• Check whether you need a higher hosting plan or a different provider.
• Use a CDN to load your site close to the user’s location.
• Enable caching.

Render-blocking files

Loading JS and CSS files asynchronously or deferred benefits the FID metric, and it is also important for LCP, as it stops the rendering of an element from being blocked while another file loads.

Very heavy images or elements

Since the LCP element is probably a nice image or a piece of multimedia content, it’s advisable to apply a few practices to improve the speed of multimedia elements:

• Use a suitable image format (for example, JPG) and offer conversion to WebP where possible
• Upload images at the right maximum dimensions and optimised.
• If you use GIFs, try to opt for videos instead, as a GIF will probably be a problem for loading speed.

Summary

In conclusion, Core Web Vitals are a set of metrics that matter for SEO and for the success of the business in general.
Core Web Vitals are a representation of the quality of the user experience a site provides. Although many factors come into play, by following the recommendations in this article you’ll be able to improve your score.

When the main problem shows up on smartphones, it’s worth carrying out a separate review of mobile SEO in Valencia: performance, UX, crawling and conversion on small screens.

Core Web Vitals are one part of the diagnosis, but on their own they don’t explain all of your organic performance. To make sense of the other signals, I’ve put together a guide on how to improve SEO metrics.

In Angular, Core Web Vitals depend on JavaScript, hydration, rendering and component loading. The technical side is covered in more depth in SEO for Angular in Valencia.

In Django, Core Web Vitals depend as much on the server and templates as on images, caching and scripts. I go into this for web projects in Django SEO.