What are Core Web Vitals?

What are the Core Web Vitals metrics?

The Google Core Web Vitals are a series of metrics designed to measure user-experience related performance for a website. They currently include FID (First Input Delay), CLS (Cumulative Layout Shift) and LCP (Largest Contentful Paint). 

These three metrics follow Google’s overarching philosophy on the Core Web Vitals, which dictates that any metric must be:

• Measurable ‘in the field’, in that it measures real users
• Distinct, so that it doesn’t overlap with any other metric
• Realistic, in that it reflects real-world critical user activity

These goals are the foundation of Google’s work to develop future Core Web Vitals metrics. For instance, a new metric INP (Interaction to Next Paint) will be replacing FID in 2024, as it better measures the problem of runtime performance issues.

For all metrics, performance is measured on a scale - ‘Poor’, ‘Needs Improvement’ or ‘Good’. The goal for all sites is obviously to have 100% ‘Good’ URLs, however in practice it’s often the case that sites fall into ‘Needs Improvement’ and even ‘Poor’ even if work has been done on user experience in the past. This is primarily down to the specific nature of each metric’s measurement criteria.

Measuring Core Web Vitals

Core Web Vitals can be measured in a few ways, firstly by going to Google’s PageSpeed Insights tool. Here you can enter a web page URL and analyse the performance of the page against the Core Web Vitals. It’s incredibly useful for monitoring the impact of changes on your overall site health.

Alternatively you can use the Core Web Vitals Report in Search Console which allows you to view the performance of ‘URL groups’ which are sets of similar web pages according to Google. For each metric, Google gives the URL or group a score from ‘Poor’, through to ‘Needs Improvement’ and finally ‘Good’. The status of each group is decided by the metric it performs worst for.

Using both these tools, you can accurately and specifically measure and monitor your site’s performance against the Core Web Vitals.

What is FID?

The first of the Core Web Vitals is FID or First Input Delay and is all about your site’s first impression. When a user loads a web page, they want to be able to interact with it as soon as they can see it, which is why measuring the time before a page begins to respond to user input is so important.

FID aims to measure the user experience of attempting to interact with a site that’s unresponsive. As it measures the delay between interaction and first response, it is measured in milliseconds (ms). To achieve a ‘Good’ score for FID, your site must have this delay be 100ms or less. Anything between 101-299ms is considered ‘Needs Improvement’ and anything greater than 300ms would be measured as ‘Poor’.

Since not all users have the same internet connection speed or device speed, Google recommends measuring FID (and all the Core Web Vitals) such that at least 75% of your users have a ‘Good’ experience.

What is CLS?

One of the more common issues found on sites is things on the page moving around while the user is already engaged and interacting. Whether it’s the text a user is reading moving out of view, a large ad shifting the page out of view or even going to click on a link that then moves and the user ends up clicking on something completely unintended.

CLS or Cumulative Layout Shift is a metric designed to measure this experience and provide “visual stability”. It is measured as the size of the affected area multiplied by distance an element moves, both as a fraction of the size of the screen. In practice this means a decimal score, with higher representing a greater amount of Layout Shift.

In the past, CLS measured every shift of every element on the page - however it has since changed to only focus on the largest group of shifts on the page, sometimes referred to as a “burst”.

In order to achieve a ‘Good’ CLS score it must be at or below 0.1, with ‘Needs Improvement’ covering all scores between this and the ‘Poor’ threshold of 0.25. Again, Google encourages site owners to use 75% of users as the threshold for a consistent score.

What is LCP?

The last of the current main Core Web Vitals is LCP or Largest Contentful Paint. This metric measures the time it takes a site to show the largest element of the page from when the page loads. By having a fast LCP, a site can show the most important page element to the user sooner, which helps deliver a better user experience.

Rather than being faced with a blank white area or a buffering icon, the user can see the key element on the page and decide if the page is relevant to them. This element could be a block of text or it could be an image, but either way LCP is measured as the time it takes this element to load relative to the point at which the page began to load.

An LCP of 2.5 seconds or less is indicated as ‘Good’, anything between that and 4 seconds would be ‘Needs Improvement’ and anything greater than 4 seconds would be considered ‘Poor’.

An easy way to identify the LCP element on a page is to use the Chrome Developer Tools. Simply go to the URL you want to test, open the dev tools and head to the ‘Performance’ tab. By clicking on the record button in the top left of the panel, the page will be loaded again with a huge amount of tracking and monitoring. Once the tool has finished, it will show a graph of all the data it has gathered - including a row for ‘Timings’. This section shows several key timings for measuring Core Web Vitals, including an LCP tag. Simply click on the LCP tag and in the ‘Summary’ section below you’ll find the LCP element listed at the bottom. You can even hover over the text in ‘Related Node’ and the tool will highlight the LCP element on the web page.

What is INP?

While not yet considered a ‘Stable’ Core Web Vital, INP has been confirmed by Google to be replacing FID in March 2024. While FID measures the responsiveness of a page when it first loads, according to Google “90% of a user’s time on a page is spent after it loads”. This means that measuring responsiveness across the whole user journey on the page is important.

In order to measure this, Google began testing INP - which monitors all the user interactions that happen on the page for their responsiveness and reports the longest interaction it finds.

While it is important to be aware of - there is no reason to be worried about the incoming change. As a metric, it will be more comprehensive and effective than FID at measuring the real-world user experience on a page.

Why do Core Web Vitals matter?

Core web vitals affect how your website loads as well as the speed at which the site loads. As a result, creating a smooth and quick-loading page will likely pass a Core Web Vitals test.
These factors in turn have a direct effect on user behaviour. Poor Core Web Vitals can directly affect

• Bounce Rates on pages as users wait less time for content to load
• Engagement rates with content as content loads quicker 
• User satisfaction due to a smoother experience 

Not only is a good user experience essential to an effective website, but Core Web Vitals are becoming increasingly important to SEO. They have been confirmed by Google to be a ranking factor and they’ve continued to place importance on them in their communication with site owners.

For instance, on their Core Web Vitals report page they reference several key examples of the impact Core Web Vitals can have on a site. Their research found that sites achieving ‘Good’ scores on Core Web Vitals were “24% less likely to abandon page load”.

There is a list of case studies demonstrating the impact and value of Core Web Vitals improvements available at wpostats.com. 

Fundamentally, the Core Web Vitals are designed in a way that allows them to directly reflect users’ experiences on your site - this means you can directly measure and impact their experience for the better. Not only that but they are a confirmed ranking factor and so for a well-optimised page it can be the extra boost to help increase rankings.

How can I improve my Core Web Vitals?

Improving Core Web Vitals should be a targeted process of identifying the issues that are impacting the key metrics and making changes to your site to improve their scores against those metrics.

The first step is to investigate your site’s current performance - every site will have a different starting point. Some may need more work on a particular metric, others might need improvement across the board and a small group may even be performing well already!

The top priority should be eliminating any ‘Poor’ URLs by improving their scores into the ‘Needs Improvement’ category. You can find these in Search Console, grouped by the issues they’re experiencing.

When applying fixes and changes to your site for a specific URL, think about how widespread that issue might be and whether other pages could also benefit from those changes. Scaling improvements across a site like this can bring huge benefits in the long run.

Once the ‘Poor’ URLs have been addressed, spend time investigating the ‘Needs Improvement’ URLs and assess what changes could be made to boost their scores. While every site is different there are specific things to be on the lookout for, for each Core Web Vital.

How to Improve First Input Delay (FID)

First Input Delay is a Core Web Vitals Metric that measures the time from when a user first interacts with a website to the time the website responds to that interaction. The time is then usually output in a page speed test as a speed in milliseconds. FID scores of over 100ms will fail this test. This is because 100ms is a recognised time scale that users believe is instantaneous.

Once the user interacts with a site the site begins opening the elements in a predefined order. This processing can also be termed the main thread. The more elements this main thread contains the more the site will have to work through before it is fully interactive. The priorities associated with different elements when loading can significantly affect your First Input Delay (FID) metrics.

In general, long FID times are caused because the main processing thread is occupied doing something else, for example parsing large Javascript and CSS. For this reason, there is a synergy between FID and Total Blocking Time (TBT)

To improve the FID timings we should look to optimise the following:

• Optimise Third Party Scripts, this could mean controlling when these scripts are loaded into the page, how they are served for example using Google tag manager, or whether they are necessary at all.
• Optimising Javascript preloading javascript, reducing unused javascript, minification as well as choosing when the javascript is loaded can all be used to optimise javascript delivery.
• Use Web Workers These allow your site to process scripts away from the main thread.
• Optimising CSS inline styling, minification of CSS files and reducing unused CSS can all be utilised to optimise CSS.
• Optimising Images ensuring images are losslessly compressed, sized appropriately and utilising the correct file format can significantly reduce image file sizes.  Smaller file sizes take less time to download and therefore are processed for less time in the main thread.
• Caching While not necessarily useful for first-time users caching resources using either server caching or leveraging browser caching can speed up your site delivery. 

How to Improve Cumulative Layout Shift (CLS)

CLS is a measure of how much the site's layout shifts unexpectedly as a user views your webpage. A layout shift or content shift is therefore any time that something on the page visibly changes position. This can significantly harm the user experience of a site.

In the majority of cases, layout shifts are caused by images, iframes or by adding advertisements and dynamic content.

These large layout shifts are often easier to identify using Google's Page Speed Test

One of the main ways to reduce layout shifts however is to define heights and widths on images, and Iframes. If you are using dynamically injected content including advertisements it is a good idea to set up a content area with a defined height and width to prevent layout shifts.

If you are using responsive images this has been tough to do in the past however most modern browsers now allow you to calculate the height for images of the same aspect ratio using CSS.

How to Improve Largest Contentful Paint (LCP)

LCP is the total time it takes the browser to render the webpage above the fold. Google is looking for pages that have an LCP value of 2.5 seconds or less for a good result. Given that this is unlikely to be affected by a single factor, we should consider the whole page load and where optimisations can be made.

To improve LCP scores we should consider the following:

• Optimise images - utilising correctly sized and losslessly compressed images in the right file format drastically reduces the size of images. This in turn helps them load quicker, reducing any potential impact on LCP.
• Using a Content Delivery Network (CDN) - using a CDN allows you to distribute a site's resources from a geographically distributed network of servers which can speed up load times.
• Choose the right host - slow server response times make it more difficult to render a website quickly. Choosing the right host for your website can reduce server response times making the site quicker overall.
• Caching - by leveraging browser cache and utilising server cache we can serve common elements more quickly and efficiently.
• Minification of HTML, JS and CSS resources - by minifying HTML, Javascript and CSS we can deliver these resources in smaller file sizes making them download more quickly.
• Remove unused Javascript - by removing unused javascript we also reduce any additional parsing time reducing the impact on the main thread and therefore increasing efficiency.
• Defer Script Loading - we can also defer the loading of scripts to enable content to load more efficiently meaning the visual elements of the site load more quickly.

How Important is it to Improve Core Web Vitals?

As Core Web Vitals are part of Google's test for both speed and user experience they are ranking factors. Google has also stated that they will become increasingly more important.

It is however important to realise that getting 100/100 for page speed and passing every test isn’t necessary to rank highly. As a result, we should concentrate on making our site and pages as good as they can be rather than trying to achieve a specific score.

In many cases having an authoritative piece of content which matches user intent is more likely to increase revenue than, say moving page speed from 50 to 60 out of 100. 

Page Speed fixes should therefore be chosen based on the widest impact possible, for example carrying out the following fixes

• Optimising all images on the site, 
• Minifying all javascript, HTML and CSS,
• Leveraging Browser Cache
• Choosing a Good Hosting Provider

will increase the speed of most pages.

Utilising the tools available in Google's Search Console to identify poor URLS which require special attention will help address the remaining issues.

How Can Reflect Digital Help?

Monitoring and taking the right actions for the best outcome from Core Web Vitals and page speed overall is an essential part of succeeding with your SEO strategy. 

If you think your website is suffering from poor page speed and rankings are being affected you should consider a page speed audit. Get in touch with us to see how we can help.