Updated: 15th September 2022

Reading time: 9 min

Web Core Vitals are three metrics that Google considers very important in terms of the user experience of your website. They measure page load speed, page interaction speed, and layout stability. This article is a comprehensive guide to find out what Web Core Vitals are, how to measure them, and how to optimise your website for these metrics.

Core Web Vitals will become a ranking factor for websites as early as August 2021. The first CWV implementations are announced for mid-June 2021 and will be rolled out gradually so that Google can monitor for any irregularities. What does this mean for those running a business online, whose profit largely depends on Google's ranking position? What is Core Web Vitals? How do you measure Core Web Vitals metrics?

Introduction to Core Web Vitals

Google's Core Web Vitals is the holistic idea of evaluating a website in terms of the factors that affect how well it works and how comfortable it is to use. Of course, there are many such elements, and it's hard to keep them all in mind at the same time. For this reason, Google has established Core Web Vitals.

The aim of this project is to provide precise guidance on what site owners should optimise to ensure the best possible user experience. Capturing these elements in a few key metrics will make this task much easier, even for those without extensive technical knowledge.

Core Web Vitals as a ranking factor values good quality sites: fast, efficient, secure and stable, and will penalise with drops those that are technically unoptimised, with an unfavourable UX and overloaded with unnecessary code and maintained on slow, unstable hosting.

Core Web Vitals consist of 3 pieces of information about page speed and it's design:

• LCP (Largest Contentful Paint) - Measures page load speed based on how long it takes for the largest element of a page to load.

• FID (First Input Delay) - a measure of a website's interactivity, i.e. the time after which the website is functional and can be used, e.g. by clicking on links.

• CLS (Cumulative Layout Shift) - a measurement of page template stability, i.e. the time it takes for a page to load until the last change in the layout of its elements.

A remarkable advantage of the new indicators is their clarity and practicality. We have now defined and clear guidelines in terms of the expected page loading speed, and we can easily identify the problem and look for a solution. This is important for SEO specialists who have factual data and guidelines from Google to use when talking to clients and developers.
Google provides several ways to measure Core Web Vitals; we mention them further in this article.

So why do we need Core Web Vitals?

Over the years, the way we use the Internet has changed significantly. We explore individual websites differently and pay more attention to their content. It is becoming increasingly important to us how we navigate a website and find the content we are interested in. The user experience (UX) is very important for how we perceive and evaluate a website. Google has also recognised this importance. For some time now, they have been steadily implementing an initiative called Page Experience, i.e., collecting data that assesses the quality of pages in terms of safety and user expectations and experience. Thats why Core Web Vitals are so important. 

Why should I pay attention to Core Web Vitals?

Google will start using page experience as part of its ranking systems in mid-June 2021. However, page experience won't play its full role as part of those systems until the end of August. As Google nicely puts it: "You can think of it as if you're adding a flavoring to a food you're preparing. Rather than add the flavor all at once into the mix, we'll be slowly adding it all over this time period."

Google will expect site owners to take user experience very seriously. If negligence in this area occurs, your search engine rankings will suffer greatly.

Google will continue to consider the quality of the content on your site first. However, if two sites offer similarly high levels of information, the one that provides a better user experience will gain the upper hand.

Core Web Vitals - SEO Relevant

Google's focus on these metrics shows clearly that one of the most important factors for higher rankings in organic search results is and will be user satisfaction.  As Core Web Vitals for individual sites improve, the bounce rate on sites will decrease, conversions will increase, and ultimately search engine rankings will rise. Updating websites will not be easy, as it involves a lot of technical and optimisation issues, but the results it can bring are well worth it.

LCP - Largest Contentful Paint

LCP (Largest Contentful Paint), or the largest content rendered. It is an indicator determining the time of loading the main content (content or element: graphics, video, text) on the website in the area visible to the user (above the fold). According to Google, the ideal time for the website to be displayed to the user is up to 2.5 seconds. Time above 4 seconds is evaluated as poor and requires improvement. Consequences of a high LCP is an excessive waiting time for items to load.

According to Google's guidelines, the LCP should load in a maximum of 2.5 seconds.

How to optimise LCP:

• complete graphics optimisation, use of modern and recommended formats 

• optimisation of CSS styles and JS code

• optimisation of server response time
   

Why is LCP important?

Research shows that over 33 percent of users leave a website whose elements take longer than 3 seconds to load. For the owner of a website that presents services or sells goods, this means over 33% fewer potential customers before they even get the offer. The speed of the website is one of the key factors influencing its UX. Therefore, it is worth focusing on optimising the site to maximise LCP.

FID - First Input Delay

FID (First Input Delay), or first action delay. FID is a metric that indicates the interactivity of websites. FID determines the time after which it is possible to interact with a page. When a visitor accesses a website, its initial resources are loaded, but it is not immediately possible. For example, to click on a link that will open and take you to a new subpage. It is the time calculated from when the page starts loading until the page is fully interactive. Too high FID causes inability to interact quickly with the site.

A good FID result is less than 100msm, FID score requiring improvement: 100-300ms, Bad result requiring urgent repair: more than 300ms

Google data shows that a low FID score is influenced by poorly optimised and overloaded JavaScript code. This largely concerns off-the-shelf solutions, where an entire library is used to implement one solution. The browser is blocked from analysing the JavaScript code, resulting in a delayed response to user behaviour.

How to optimise FID:

• prioritisation and implementation of the content loading sequence

• transferring non-interface related activities outside the main thread
   

Why is FID important?

Smooth and seamless interaction with a website has a big impact on the user experience. The user expects to be able to scroll through the site, zoom in on graphics, add products to the shopping basket, or quickly respond to clicks on buttons. Any delay in response to an action taken by the content consumer may be poorly received and result in leaving the site. Therefore, efforts should be made to monitor and continuously improve the FID indicator.

CLS - Cumulative Layout Shift

CLS (Cumulative Layout Shift) is a metric that measures the visual stability of a page layout. It is calculated as the sum of shifts that are visible during page loading. This includes unexpected shifts, i.e. those unrelated to user interaction. Importantly, pop-ups will not be counted within the CLS indicator. 

A page layout shift occurs when a visible element changes its initial position between two frames. You have probably experienced that unpleasant moment when you intended to click a particular option, but it suddenly moved away from the cursor and you unintentionally selected the wrong thing. Such a phenomenon is a collective layout shift.

A score considered as good, i.e. indicating no layout shifts, is between 0 and 0.1. A score between 0.1 and 0.25 indicates average layout stability. A value above 0.25, on the other hand, is considered very poor and requires urgent optimisation.

The most common causes of problems with CLS:

• moving advertisements that are difficult to switch off,

• images without dimensions (width; height) 

• dynamic content, generated using JavaScript code

 How to optimise Cumulative Layout Shift:

• move the ads from the top of the page to the middle or bottom of the site

• use of images with the dimensions specified in the code
   

Why is the CLS important?

Skipping and moving of the screen on the visited page, caused, for example, by the later loading of the banner at the top of the page or graphics in subsequent sectors, may make the user unable to perform the planned action. For example, they will not click on a particular product or button, because after the top graphic has loaded, the button will move down. This type of inconvenience may significantly and negatively affect the perception and satisfaction with the use of the service.

Join over 400 000 WebWave users and create websites with a true drag and drop website builder.

Important website performance indicators

TTFB (Time to First Byte)

TTFB is a value measured as the server response time, from when the request is sent to when the user receives the first byte of the response.

Time to first byte is a value given in microseconds. It is intended to indicate a bottleneck in the page loading process. TTFB measures the time from the moment the request is sent to the server until the first bytes of data are received. In practice, this is one of the most popular ways to measure page load speed.  To improve TTFB, optimise and shorten the server response, optimise website architecture, implement CDN and avoid unnecessary redirections.

FCP (First Contentful Paint)

FCP is an indicator that measures how long it takes the browser to load/render the first content on a page (content, image or video). The first rendering of the content includes server response time (TTFB) as well as content loading time and rendering time.

TBT (Total Blocking Time)

TBT is a metric that measures how much time elapses between loading the first content on a page (FCP) and getting the option to enter data (TTI). 

TTI (Time to Interactive)

It is time it takes for a page to load enough for a user to use the site and interact with its visible elements. (and to enter data on the site)

How to check Core Web Vitals of your website

Where can I check Core Web Vitals?

We can, and in fact should, if we care about proper optimisation and customisation of the website, use publicly available tools that measure and determine individual CWV values. Here is a selection of tools and applications:

• Google Search Console -GSC has been updated with the ability to measure Core Web Vitals. The program generates reports for given pages by a device (desktop and mobile) and indicates specific errors for pages or subpages that require corrective or improvement actions.

• Page Speed Insights - after entering the address of a website or its subpages, it takes appropriate measurements and presents them in the form of a clear report. This tool is extremely useful, as the results also indicate specific actions to be implemented to improve the results.

• Lighthouse - allows you to run accurate tests on CWV indicators. 

• WebPage Test - a well-known site where after last years update, we can check Core Web Vitals values for specific sites.

• GTMetrix - a popular tool that presents the values of CWV indicators for specific URLs in a clear form.

• Chrome DevTools - a very thorough tool from Google that accurately examines CWV.

Would you like to check your Core Web Vitals now?
It's really simple!

PageSpeed Insight

To measure Core Web Vitals using Page Speed insight go to https://developers.google.com/speed/pagespeed/insights

In the tool, we enter the URL that we want to verify. The results will be different for particular subpages of the same website. PageSpeed Insight measures the following data:

• Speed Index

• First Contentful Paint

• Largest Contentful Paint

• Time to Interactive

• Cumulative Layout Shift

• Total Blocking Time

Google Search Console

If we have a Google Search Console account set up and verified. We can easily check if our site meets the criteria of the new ranking factor. After logging in at https://search.google.com/search-console in the section Improvements Basic web metrics, we will find CWV reports for mobile devices and computers.

When you open the selected report, you will receive detailed information about the type of irregularity occurring on the page with an indication of the specific subpages affected. To go into detail, click on the table and the selected row with the problem.

Chrome plugins you can use to check Core Web Vitals

Web Vitals Extension

Web Vitals Google Chrome plugin to quickly verify Core Web Vitals in real-time. It allows you to spot sites with weaker parameters easily. It is worth remembering that the Web Vitals Extension plugin is only an introduction to CWV research and deeper analysis is available in other tools.

Core Web Vitals Extension

If our goal is to verify Core Web Vitals results on the site quickly, we can use a plugin for this purpose: Core Web Vitals Extension

Sources of data for Core Web Vitals

Laboratory Data (Lab Data)

Which are measurements that are made with specialised tools. Lab data informs about what a potential user's experience with a website may be like. Of course, these are certain assumptions measured in laboratory conditions. That is why the Core Web Vitals analysis should also be based on actual data (the so-called collected data). Laboratory data can be found in Page Speed Insight, Lighthouse tool in Google Dev Tools, GTMetrix or in Web Dev. This data measures indicators such as FCP, SI, LCP, TTI, TBT, CLS.

Real-World Usage Data (Field Data)

Which is data that comes from real visits by users using the Chrome browser. This data represents an average of Core Web Vitals over the past 28 days, derived from the Chrome User Experience Report (CrUX). The data collected is measured using Google's PageSpeed Insight tool and Google Search Console. It measures FSP, FID, LCP, CLS.

Core Web Vitals alone will not diagnose the cause of the problem - but they will show that there is something wrong with the site. They will indicate that the time of loading the page or the convenience of its use is unsatisfactory - according to computer programs, and perhaps also according to the users.

SEO and importance of page loading speed.

The optimisation of a page is extremely important in terms of SEO. One of the most important factors is page loading speed, which Google has defined as a ranking factor. Everyone wants their content immediately. It is the key to satisfaction of the person who has used the browser.

So, if your website has content that is both interesting to users and properly optimised for Google's robots, but the page takes a long time to load and changes its layout repeatedly, then the user using it can either wait patiently for it to open or turn it off straight away.

How to Increase Page Loading Speed?

• Remove unused or optimise used CSS code 

• Remove unused or optimise used JavaScript, reduce JavaScript execution time

• Off-screen loading of images, pre-load key requests, use video formats for animations

• Resize images, display images in next-generation formats, use efficient image encoding

• Avoid multiple redirections

• Eliminate resources that slow down rendering

• Establish connections to the required sources beforehand

• The number of requests and the amount of data transferred should be small

• Avoid creating critical request chains

• Ensure text is visible when loading web fonts, enable text compression

Core Web Vitals Summary

In this article, we have presented the most important information about Core Web Vitals. They are Google's new metrics that will be gradually released from mid-June 2021. Their primary purpose is to measure content loading time, latency and page layout changes. These factors have a real impact on user experience and satisfaction, so it's essential to keep them within an appropriate value to minimise the risk of increasing rejection rates.

If we do not take care of CWV and our competitor adapts the site to Google standards, it will most likely have an advantage over us, achieving higher positions in organic results. Taking care of basic web metrics Core Web Vitals means reducing the rejection rate or ensuring the best user experience.

We hope you have enjoyed reading this article and got some valuable information that could give you an edge in your webdesign or web development endeavours.

Author: Przemyslaw M Pajdak

AI web design tutorial

How to become a web designer?

What is a white label website builder?

Other articles.

Company.

Help. 

Useful articles. 

Offer. 

Website builder.

Find us online

WebWave drag and drop website builder lets you create unique websites. You can build your website from scratch by starting with a blank page, or choose various website templates from our free collection and modify them according to your needs. With WebWave website builder, you have a complete website design and hosting system at your fingertips.

This website was created with WebWave.