Core Web Vitals: What are they and how could they affect you?

The world’s most powerful search engine “Google” intends to further improve the user experience with a new set of metrics called Core Web Vitals. The updates were announced in early 2020, but are expected to start being implemented sometime in 2021.

To refresh the fundamentals of search engine optimisation, Google publishes a list of signals or factors it uses to rank pages in SERPs. These signals are patterns of behaviour that Google uses to evaluate websites and decide whether they deserve a prominent place in the results pages.

The patterns can be positive or negative, depending on how users interact with the website. There is a positive interaction if a user browses your pages and subscribes to a newsletter. But if they just scroll down your homepage and go to another website, that is obviously a negative interaction.

Google’s ranking signals focus primarily on the user. Some of the most important factors are content quality, page load speed and usability on mobile devices, all geared towards improving the user experience.

Ensuring an optimal user experience is key to the long-term success of any website. Whether you are a business owner, marketer or developer, Web Vitals can help you quantify your site’s experience and identify optimisation opportunities.

Overview of Web Vitals

Web Vitals is a Google initiative to provide a unified guide to quality metrics that are essential to delivering a great user experience on the web.

Google has provided a number of tools over the years to measure and report performance. Some developers are adept at using these tools, while others find it difficult to keep up with the sheer number of tools and metrics available.

This Google initiative aims to simplify the landscape and help webmasters focus on the metrics that matter most, the so-called Core Web Vitals.

What are Core Web Vitals?

Core Web Vitals are the subset of Web Vitals that apply to all web pages, all site owners should measure them and they will appear in all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, which is measurable and reflects the actual experience of an indispensable user-centric result.

The metrics that make up the Core Web Vitals will evolve over time. The current set focuses on three aspects of user experience: loading, interactivity and visual stability, and includes the following metrics:

Largest Contentful Paint (LCP)

Refers to the time to load the longest content, LCP, a measure of loading performance. To provide a good user experience, the LCP should occur within 2.5 seconds of the page starting to load.

You can check your site’s LCP in Google Search Console.

Take note of the recommended LCP:

• 2.5 seconds or less: Good
• More than 2.5 seconds to 4.0 seconds: Needs improvement
• More than 4.0 seconds: Poor
• It is recommended that the 75th percentile of page loads on all devices be analysed to achieve the “2.5 seconds or less” goal for the majority of your users.

In the next release of Core Web Vitals, there will be five elements that will be considered for LCP. Other elements may be added in the future.

1. <img> elements;
2. <image> elements within a <svg> element;
3. <video> elements (the poster image is used);
4. An element with a background image loaded via the url function (rather than a CSS gradient); and Block-level elements containing text nodes or other text elements.
5. A page with many high-resolution images is likely to have a poor LCP. In this case, you may need to resize the images or remove some of them.

The element size, such as image size, that is reported for LCP is normally the size visible to the user within the viewport of what is displayed on the screen. If an image has been resized from its intrinsic size (size based on the content of an element, if no external factors were applied to it), the size reported is the visible size or the intrinsic size, whichever is smaller.

Optimisation tips for the largest content painting (LCP)

1. Remove page elements with large sizes. Check each page for elements that slow down the LCP.
2. Opt for responsive images that dynamically adapt to the size of the browser window.
3. Establish an asynchronous load or “Lazy Load” that postpones the initialisation of page elements until they are needed. Images will only load when the user interacts with the page.
4. Remove unnecessary third-party scripts, which slow down a page by an average of 34 milliseconds.
5. Remove unnecessary parts of your code by modifying the CSS. This reduces file size and speeds up the time it takes for a browser to download and execute the code.

First Input Delay (FID)

Refers to the time until the first interaction with the web page can be made, FID measures interactivity. To provide a good user experience, pages should have an FID of less than 100 milliseconds.

First Input Delay is a Vital Web Core that measures the time it takes from when a real user interacts with your page until the browser can start processing events. These interactions can be clicking on a link, choosing a menu option or typing an email address into a field.

If your page only contains content, such as a blog post, the measurable interactions are page scrolling or zooming in and out. But essentially, FID refers to interactions where a user enters data into a field on a page.

Your FID data is available in Search Console.

Here’s how your website’s FID score ranks:

• 100 milliseconds or less: Good
• More than 100 milliseconds to 300 milliseconds: Needs Improvement
• More than 300 milliseconds: Poor
• Aim for an FID score of 100 milliseconds or less. A good threshold to measure is the 75th percentile of page loads, segmented across devices.

Note, however, that Search Console may not have FID data on your pages, as not all interactions are relevant to FID. FID only measures the delay in processing events, so you should only consider the input delay.

What causes input delay (or input latency)?

Users experience input lag when a page takes too long to respond to events or interactions. The most common reason is that the browser is busy parsing and executing a large JavaScript file. HTML elements, such as text fields and selection dropdowns, have to wait for main thread tasks to complete before responding to user interactions.

First Input Delay (FID) Optimisation Tips

1. Reduce JavaScript execution time. JavaScript that takes too long to execute incurs several costs, including network, parse and compile, and execution costs. Because it runs on the main thread, it slows down your Time to Interaction (TTI).
2. It reduces the impact of third-party code. Third-party JavaScript are scripts embedded in your website that are not authored by you or served from third-party servers. To avoid affecting the performance of your pages, regularly audit and clean up redundant third-party scripts.
3. Minimise the work of the main thread. The main thread in the rendering process usually does most of the work of turning your code into a page that users can interact with. If the main thread is busy, such as when running a large JavaScript, your pages may not respond immediately to user interactions.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a measure of visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

The third Google Core Web Vital is the cumulative design change that measures the stability of a page while it loads. Visual stability helps ensure that there is no unexpected movement of page content, such as text and links moving or shifting while a page loads (or layout change).

Instability occurs when resources are loaded asynchronously or DOM elements are dynamically injected into the page on top of existing elements. Images, ads, embeds and dimensionless iframes can also cause poor CLS.

CLS analyses all individual layout change scores for each unexpected layout change during the lifetime of a page. Layout changes only occur when existing elements change their initial position. Furthermore, a change negatively affects the CLS score only if the user does not expect it. If a layout change is user-initiated or occurs in response to user interaction, such as clicking on a link, the CLS score is not affected.

You can check your CLS score in Search Console or PageSpeed Insights:

• 0.1 or less: Good
• More than 0.1 to 0.25: Needs improvement
• Over 0.25: Poor
• You should strive for a CLS score of less than 0.1 or to ensure users have a good experience on the page.

Optimisation tips for cumulative layout change (CLS)

1. Include size attributes on images and video elements to ensure that the user’s browser can allocate the correct amount of space that element will use on a page. You can also reserve the necessary space with CSS aspect ratio boxes.
2. Avoid inserting content on top of existing content, except in response to user interaction. Remember that a design change is fine as long as the user expects it. Reserve enough space in the viewport to prevent page elements from shifting in surprising ways.
3. Save static space to reduce ad scrolling. Reserve as much space as possible for ads, but make sure they fill the space; otherwise, you risk having black space.
4. Choose transform animations rather than property animations that trigger layout changes. Note that some CSS properties trigger layout changes when they are modified. These properties include width and height, margin, and font family.
5. Leave enough room for embeds with a placeholder or resource. Embeds, such as YouTube videos and social media posts, often take up a lot of space, causing layout changes when they load.

Tools for measuring Core Web Vitals

The Chrome User Experience Report collects real, anonymous user measurement data for each Core Web Vital.

This data allows webmasters to quickly assess performance without having to manually instrument analytics on their pages, and powers tools like PageSpeed Insights and Google Search Console’s Core Web Vitals report.

Evolution of Web Vitals

Web Vitals and Core Web Vitals are the best available indicators that developers currently have to measure the quality of the web experience, but these KPIs are not perfect and their metrics need to be greatly improved.

Changes to these metrics will have a far-reaching impact; therefore, developers should expect Core Web Vitals definitions and thresholds to be stable and for updates to occur with advance notice and a predictable annual cadence.

Key points

If it improves the user experience on your website, it will encourage browsing. Google Core Web Vitals “are a set of user-centric metrics that quantify key aspects of the user experience. They serve as a guide to further improve the page experience and ultimately help you achieve your web optimisation goals.

As you explore these new Web Vitals, remember these main points:

1. You can improve the LCP or load speed metric by removing large elements and unnecessary third-party scripts. Remove any elements, especially JavaScript, that slow down your LCP.
2. Improve your FID score or the time before the user actually interacts with your page by reducing JavaScript execution time, cleaning up third-party scripts and minimising main thread work.
3. You can improve your CLS or visual stability metrics by setting size attributes on page elements, reserving space for ads and embeds, and choosing transformation animations that avoid layout changes.
4. When making changes to your website, always put the user experience at the top of your priorities. After all, Google’s ranking signals are all about the user.