Core Web Vitals – what they are and how to measure them

Google uses many guidelines and ranking factors in assessing the quality of websites. However, not all are equally relevant. One of the most important is Core Web Vitals – basic web metrics. How can Core Web Vitals affect your website’s position in search results?

What are Core Web Vitals?

Core Web Vitals are a set of metrics developed by Google to assess the quality of user experience when using websites. Google includes Core Web Vitals as one of the ranking factors, which affects the position of pages in search results.

Core Web Vitals focus on three aspects: loading speed, interactivity and visual stability. They help web developers optimise sites for overall quality as well as performance and accessibility.

LCP – Largest Contentful Paint

One of the three most important elements of Core Web Vitals. It measures the load time of the largest element visible on the screen (this can be an image, a block of text or a video element) from the moment the page starts loading. It is important because it allows you to assess how quickly a user sees key content on a page.

Good LCP values are those under 2.5 seconds and those up to 4 seconds are considered in need of improvement. Anything above this time is considered poor and can have a negative impact on the user experience and the page’s position in Google search results.

FID – First Input Delay

This element measures the delay between a user’s first interaction with a website (e.g. click, touch screen, keystroke) and the point at which the browser begins to process that interaction. It shows how quickly a site responds to user actions, which is key to perceived performance and user satisfaction.

Agood FID should be under 100 ms, with values up to 300 ms being acceptable.

CLS – Cumulative Layout Shift

Cumulative Layout Shift measures unexpected changes to the layout of a page during loading that may affect the user experience. In other words, it assesses how much elements on a page shift during loading, which can lead to accidental clicks or difficulty interacting with content.

Good CLS values are those below 0.1. Val ues between 0.1 and 0.25 are considered in need of change.

Additional measures

LCP, FID and CLS are crucial for assessing the quality of user experience on websites, but there are other measures that can be considered in addition to Core Web Vitals. It is worth taking care to optimise them. They can also be useful for web developers to get a more comprehensive picture of site quality and performance. These include:

• Time to First Byte (TTFB) – the time from when a user sends a request to receiving the first byte of data from the server. The shorter it is, the better it indicates good server performance and speed of response.
• First Contentful Paint (FCP) – the time from the start of the page load until the user sees the first content on screen.
• Time to Interactive (TTI) – the time it takes for a page to become fully interactive, meaning that users are free to use its features and JavaScript has completed previous tasks. This measure is important for users’ perception of the site’s speed and responsiveness.
• Interaction to Next Paint (INP) – the site’s response time to a specific user interaction.
• Total Blocking Time (TBT) – represents the total time the main browser thread is blocked and unable to respond to a user interaction. It is important for evaluating site performance.

Do Core Web Vitals affect the positioning of a website?

Core Web Vitals do affect in Google search results. However, it is worth remembering that they are only one of many factors affecting a site’s SEO. Others include the quality and value of content, appropriate use of keywords, optimisation of meta tags, building valuable links, or the responsiveness of the site.

Improving Core Web Vitals can contribute to a better position in search results, optimising these metrics should be part of a broader SEO strategy that also considers other ranking factors.

Core Web Vitals and page load speed

Largest Contentful Paint (LCP) measures the loading time of the largest element visible on the screen. is important for the user experience, and Core Web Vitals helps to evaluate this very experience. It is worth noting that while LCP is one of the important factors affecting page load speed, the other two metrics are not directly related to it. FID assesses the interactivity of the site and CLS assesses the visual stability of the site, which affects the overall user experience of the site. In practice, optimising Core Web Vitals metrics can lead to faster page loading and a better user experience.

Core Web Vitals and UX

Core Web Vitalsare closely related to , as they assess the quality of the user experience on websites. LCP assesses the loading speed of key content on a page, FID measures responsiveness and CLS measures visual stability. These three elements are key to building user satisfaction. A good experience can lead to increased engagement, more returns or higher conversions. Improving UX can also affect a site’s positioning in Google search results.

Core Web Vitals optimisation

Optimising Core Web Vitals is key to improving the user experience and the positioning of the website in Google search results. To optimise Core Web Vitals, focus on each of the three main metrics.

Methods to improve LCP

To improve LCP, care should be taken to ensure that images are properly compressed, which can be achieved, for example, by using smaller file size formats such as WebP. It is also worth paying attention to choosing the right strategy for loading images – this should only happen when they are needed (so-called ‘lazy loading’).

It is also important to optimise the CSS and JavaScript code. To this end, unused code should be removed regularly, CSS and JavaScript files should be minimised and optimisation techniques such as “defer” or “async” should be used for scripts.

It would also be a good idea to use browser caching, which can speed up the loading of static files (images, stylesheets and scripts) during subsequent user visits.

It is also worth using a Content Delivery Network (CDN). Using a content delivery network can speed up access to a site’s resources and reduce delays associated with server location. Also, improving its overall performance by, for example, reducing the server response time (TTFB), using compression or optimising the database, can have a positive impact on LCP.

Methods to improve FID

To improve the FID, minimise JavaScript code by removing unused code or reducing the number of scripts loaded on the page. This will enable faster processing of user interactions. It is also a good idea to remove unused CSS code and optimise the loading order of style sheets.

As with LCP, the use of the ‘defer’ and ‘async’ attributes in script tags will reduce interaction latency. The ‘defer’ attribute delays the execution of scripts until the page is fully loaded, while ‘async’ allows the page and scripts to load simultaneously.

The use of the browser-based requestIdleCallback API allows non-critical JavaScript tasks to be executed only when the browser is idle. This minimises the impact on user interactions.

Web Workers allow the JavaScript processing load to be shifted to a so-called ‘worker’ running in the background, which can reduce delays in the introduction of interactions.

Methods to improve the CLS

To optimise the CLS, space can be reserved for images and embedded media. To do this, specify the dimensions (widths and heights) of images, videos or other media in the HTML or CSS code. This allows the browser to reserve the appropriate screen space. This prevents unexpected shifting of elements during loading. By the way, it is worth making sure that the resources are loaded in the correct order to avoid layout shifts. Important elements, such as CSS and JavaScript, should be loaded before other resources.

It is worth remembering that inserting dynamic content (adverts or messages) above existing elements on the page can lead to layout shifts. Dynamic parts should be placed below existing content or reserve adequate space for them.

Embedding appropriate attributes or using CSS such as contain-intrinsic-size can prevent layout shifts when loading elements such as fonts or animations.

What and how do you measure Core Web Vitals?

Core Web Vitals can be measured using a number of different tools. Some of the most commonly used include:

Google Search Console

Google Search Console reports on a site’s performance in terms of Core Web Vitals. They show how the site performs against LCP, FID and CLS metrics in real-world conditions for users, and also provide information about problems.

Chrome developer tools

Google’s browser refers to two types of tools. The first is the built-in developer tools in the browser. They offer various functions for analysing site performance, including Core Web Vitals metrics. You can use the ‘Performance’ panel to analyse page load times, and also monitor CLS using the ‘Experience’ panel.”

Another is the Chrome User Experience Report (CrUX). This is a collection of performance data collected by Google from Chrome browser users. It provides information on the actual user experience on websites, covering Core Web Vitals metrics. The data can be accessed via an API or analytics tools such as BigQuery.

PageSpeed Insights

This Google-provided tool allows you to analyse page performance on computers and mobile devices. When you enter the URL of a page, it generates a report that shows the results of Core Web Vitals and other performance metrics. It also provides suggestions for optimising the site.

Lighthouse

This open-source tool from Google allows you to audit your site for performance, accessibility, best practices and SEO and generate a report with results and suggestions for improvement. It can be run in the Chrome browser via Developer Tools (DevTools) or as a plugin.

How do I evaluate the results?

To evaluate the results of the Core Web Vitals analysis, use one or more tools to obtain the values of the Core Web Vitals metrics. Then compare the resulting values with the thresholds for LCP, FID and CLS.

If the values of the metrics are above the thresholds, identify areas that need to be optimised, then make changes. Monitor the Core Web Vitals values regularly to check the effects of your actions and continue optimising as necessary.

Google Analytics

The tracking of core web metrics has already been explored quite thoroughly in many articles. However, it is worth mentioning that CWV indicators can be visible at GA4 level. To make this happen follow a few simple steps:

1. Import a template – go to the Google Tag Manager interface and click the Templates navigation.

Then click the Search Gallery button under Tag Templates. In the overlay, search for a template called Core Web Vitals, select it and click Add to Workspace, following the prompts to complete the task.

Once the template has been added to the workspace, you can open the Tags view from the navigation and click to create a new tag. Select the new Core Web Vitals custom template for the tag, add its name and specify that it should display for all pages and give a checkbox next to “Collect all (avaiable) core wew metrics” and

Submit the changes to GTM and verify that it works by clicking on the preview. Your eyes should see a similar image confirming that core web vitals are flowing into the data layer.

To use these values in Google Tag Manager, you must first create a custom event rule and one datalayer variable for each webVitalsMeasurement key you want to measure.

The next step is to add the variables to the GTM:

DLV - webVitalsMeasurement.name
DLV - webVitalsMeasurement.id
DLV - webVitalsMeasurement.value
DLV - webVitalsMeasurement.delta
DLV - webVitalsMeasurement.valueRounded
DLV - webVitalsMeasurement.deltaRounded

webVitalsMeasurement.name
webVitalsMeasurement.id
webVitalsMeasurement.value
webVitalsMeasurement.delta
webVitalsMeasurement.valueRounded
webVitalsMeasurement.deltaRounded

To send data to Google Analytics 4, you need to use an event tag, so create one. How you set the event name and properties is entirely up to you, but here’s how I built my event tag.

Don’t forget to check that the events along with the correct data appear in the Google Analytics 4 debugger:

If you see something like the above, you can be sure the data will flow into reports.

Benefits of improving Core Web Vitals

Optimising Core Web Vitals is not only beneficial for users, but also for a website’s SEO and business success. Making changes to improve these metrics can contribute to long-term growth and better performance in various aspects of the website.

In the case of UX, Core Web Vital optimisation ensures faster page loading and greater responsiveness. It also has an impact on visual stability. All of these improvements translate into a more pleasant user experience, which can lead to higher engagement, longer sessions and more returns.

Improving Core Web Vitals also has an impact on page positioning. Websites with good values for the metrics included in the CWV generally achieve higher rankings in Google search results, which increases visibility. Such sites attract more users, which means more organic traffic to the site.

Core Web Vital optimisation also translates into tangible business benefits. Better user experience and more visits can lead to higher conversion rates, which means more sales, subscriptions or other goals. It is also worth remembering that faster page loading can reduce rejection rates.

This has an impact on building trust and . If your website offers users high quality content and experiences, they will be more likely to trust your brand, which can lead to longer customer relationships and greater loyalty.

It is worth continuing to monitor and optimise Core Web Vitals to maintain a high quality user experience and stay competitive in search results. Regularly analysing data and making improvements based on user needs can lead to a better understanding of user expectations and needs, which ultimately contributes to the continued growth and success of the website.

Who should implement Core Web Vitals?

All companies that want their websites to offer a high-quality user experience (UX) and better rankings in search results should implement Core Web Vitals.

When it comes to implementing and monitoring Core Web Vitals, this is primarily handled by web developers, webmasters and SEO specialists. Developers are responsible for coding, implementing and optimising the website. SEO specialists improve its visibility in search results. Webmasters are responsible for the technical aspects of the website.

The specialists listed above work together with UX designers to achieve common performance and user experience goals. Data analysts can also be engaged to improve Core Web Vitals to help analyse the results of Core Web Vitals, identify patterns and issues and draw conclusions to help further optimise the website.

The implementation of Core Web Vitals should be an iterative process in which results are analysed on an ongoing basis, areas for improvement are identified and optimisations are implemented. Collaboration between specialists is key to successfully implementing and improving Core Web Vitals.

Core Web Vitals – how do you turn performance metrics into business success?

Optimising Core Web Vitals can lead to increased conversions, customer loyalty and search engine visibility. It also helps to improve user experience, which translates into better business performance. However, it is important to remember that implementing changes can be time-consuming. To speed up the process, it is worth enlisting the help of an SEO agency, for example. An investment in Core Web Vitals optimisation can be an investment in the future of your business success.