Everything You Need to Know about Core Web Vitals

Tomaž Srpčič, Luka Štular29.07.2021eCommerce, Marketing, Websites

If you’ve been following the hottest SEO debates lately, you probably won’t think twice if we ask you about the No. 1 topic in the optimization world right now: Core Web Vitals!

And why is everybody talking about this Google search algorithm update that started rolling out in June? Because it’s a major one and nobody knows for sure how the changes will affect the search rankings. What do new ranking factors mean for sites that are currently at the top of search results? Will the tables turn? And what exactly does the term Core Web Vitals even stand for? And finally, why on earth is all this such a big deal? Optiweb’s SEO team has the right answers for you!

Here is the handy content guide:

Core Web Vitals 101

Because Speed is of the Essence

As SEO experts, we are keen on improving the overall user experience on the sites we are optimising. This also includes loading speeds as searchers, especially those browsing the web on their smartphones, all want pages that load quickly, even when the circumstances aren’t ideal (e.g. when there’s bad reception). As the average attention span is on the decline, searchers have less and less patience for slow websites.

Being aware of all this, Google also strives to offer users as many websites as possible that allow for quick and easy interaction. This is why the search giant is paying more and more attention to a quality user experience when updating the search algorithm. And their latest move in this direction is clearly indicated by the latest in a series of algorithm updates, the series of metrics known as Core Web Vitals.

Key Metrics for Measuring Site Speed

The term of Core Web Vitals therefore encompasses a number of different factors or quality signals related to the loading speed of the site, thus representing a measure of the quality of the overall user experience. There are three Core Web Vitals:

Largest Contentful Paint or LCP,
First Input Delay or FID,
Cumulative Layout Shift or CLS.

Core Web Vitals are thus used to determine:

how fast the page loads,
how much the content moves around the screen as the page loads and
whether the main content on the page is loaded first.

Source: https://developers.google.com/search/blog/2020/05/evaluating-page-experience

Core Web Vitals are part of Google’s search ranking algorithm, which also includes other factors of web vitals:

mobile friendliness;
safety protocol – HTTPS instead of HTTP;
absence of pop-ups; and
secure browsing (meaning that the site does not contain malicious code that could harm visitors).

Source: https://backlinko.com/hub/seo/core-web-vitals

Core Web Vitals are part of page experience

Why are Core Web Vitals Such a “Big Deal”?

The news of an important search algorithm upgrade focussing on user experience sent quite a few shockwaves through the SEO community, with many experts and site owners fearing that it might bring about significant changes in search rankings. Many larger and more authoritative pages, which load a little slower due to the larger volume of content, could lose their high rankings and fall behind the competition.

Some are already noticing fluctuations in website rankings, but since the rollout hasn’t finished yet (expected to be completed in August), we will have to wait for a little bit longer for the final verdict, closely monitoring any SERP changes.

Nevertheless, the SEO community also welcomed the arrival of the update with optimism. As the new set of metrics makes it possible to exactly determine the optimal loading speed of a website, it is easier to determine what needs to be improved to upgrade the user experience on a particular site.

At the same time, the Core Web Vitals testing also provides a graphical representation of the average speed of the entire site and not just that of the tested subpage. Website developers and SEO professionals can thus always rely on a quick and easy analysis of the main metrics that affect their rankings in search results, which will make the optimization of the overall user experience much easier.

And why is this so important for existing and future website owners and administrators? Because a good user experience is key to the long-term success of any website, and the latter can only be achieved if the site has a strong technical foundation. Even good content does not achieve the desired effect if users are prevented from accessing it due to technical issues, e.g. when the page loads slowly or renders improperly on certain devices.

On the contrary, a polished user interface will help to keep visitors on the site, increase the chances of conversion and thus positively affect the authority of the site. Google even claims that pages that meet the Core Web Vitals criteria are 24% more likely to keep searchers engaged instead of making them leave immediately.

But Watch Out: Core Web Vitals Don’t Tell the Whole Story

The goal of updating the algorithm is to enable developers to better understand which factors are key to a good user experience and what are the concrete steps to improve it. It is important to note, however, that an excellent Core Web Vitals test result will not necessarily propel the site to the top of SERPs. Even Google experts stress that the user experience is indeed one of the essential factors, but it is not the only important factor for conquering the top positions.

How to Check if and to What Extent Your Site Meets Core Web Vitals Criteria?

Google's Searrch Signals for Page Experience

Checking how well your site is prepared for the Core Web Vitals rollout is quick and easy. You can do it with the help of a well-known and well-established tool: Google Search Console. In the menu on the left, select the Core Web Vitals option. The tool then groups the test results according to the severity of the issues detected. First, the results for the mobile version of the site are shown and then for the desktop.

Source: Google Search Console

Core Web Vitals on Google Search Console

For both versions, you can thus check:

the number of “good” URL titles;
the number of URL titles that need improvement and
the number of “bad” URL titles.

Source: Google Search Console

Poor, Need Improvement and Good Core Web Vitals.

Of course, the report also contains more detailed information on the identified problems and a list of all affected landing pages, which can be exported in the form of a CSV file or an Excel or Google Spreadsheets.

How Will Core Web Vitals Affect Search Rankings?

Those of us who monitor the positions of our clients’ websites almost daily are already noticing some fluctuations. While it’s too early to say how things will look when the rollout ends, many in the SEO community expect changes in rankings to be bigger than usual – for both mobile and desktop versions of websites.

However, it should also be noted that the change was discussed for a long time before implementation, so there was enough time to prepare.Those who have taken the news seriously and have already adjusted the sites therefore most likely won’t notice major fluctuations. And what about others? Fret not as nothing is lost – if you haven’t started optimizing for Core Web Vitals yet, hurry up and avoid unpleasant surprises.

And if you need help with additional optimisation, you can get in touch with us!

What is more, the rankings will be affected by an additional change as Core Web Vitals will also become a requirement for those pages that aim to be featured in Google Top Stories. These usually include news posts that appear at the top of search results for relevant search queries.

So far, it has been essential for sites looking to promote their current content through news stories to meet the AMP (Accelerated Mobile Pages) standard, which provides a better user experience on mobile devices – these, especially in the B2C E-commerce segment, bring an increasing share of visits. With the change in the algorithm, however, being in line with the AMP is no longer a condition, as the page will have to match the Core Web Vitals criteria listed above in order for their content to appear among Google’s own news.

And what will happen to the AMP standard? According to Google, the latest update of the search algorithm doesn’t mean that the AMP standard is no longer relevant. The search giant claims that the latter is a great indicator that a particular website is optimised according to the Core Web Vitals guidelines.

Here are some more important facts about Core Web Vitals testing

Core Web Vitals testing provides separate results for the mobile and desktop versions of the site, but only the data for the former is considered a ranking factor. This means that significantly more attention needs to be paid to the proper optimization of the mobile version of the site, especially in cases where web analytics shows a high percentage of visits from mobile devices.
Data relevant to Core Web Vitals testing is collected from the Google Chrome User Experience Report (CrUX). At the same time, the results are based on the data from 75% of users. This means that even if, for example, as many as 70% of your users are satisfied with the experience on the site, and 5% of visitors rate the experience as “unsatisfactory”, Google will conclude that your site needs upgrades.
The user experience itself can be evaluated for each subpage separately, but if this is not possible, Google evaluates the user experience of the entire site.
Certain metrics and thresholds are expected to continue to change in the future as Google’s search algorithm is constantly being upgraded and adjusted.

Core Web Vitals: a Closer Look

Let’s repeat first which elements make up Core Web vitals:

Largest Contentful Paint or LCF;
First Input Delay or FID and
Cumulative Layout Shift or CLS.

Largest Contentful Paint

LCP or Largest Contentful Paint tells us how much time elapses between clicking on the link and the moment the largest content item is loaded on the webpage (usually a preset image or the H1 title).

LCP therefore focuses on what really counts when loading a website: how quickly after clicking on the search result, the user can view the majority of the visited website.

How to Check LCP?

You can check LCP with the Google PageSpeed Insights test.

Source: https://developers.google.com/speed/pagespeed/insights/

Why Should You Check the Result Using Google Search Console as Well?

Google PageSpeed Insights and the Google Search Console provide data based on the user experience in Google Chrome. In doing so, PageSpeed Insights analyzes the download speed for one subpage at a time (selected URL) while you can view the results for the entire site in the Search Console.

This allows you to quickly and efficiently compile a list of URLs that are:

Good (LCP under 2s) ;
Mediocre (LCP under 4s) or
Bad (LCP 6s or longer).

We strongly recommend that you also check your site’s loading speeds in the Google Search Console. Source: https://backlinko.com/hub/seo/core-web-vitals

Google's Largest Contentful Paint Guidelines

According to Google’s recommendations, LCP should not exceed 2.5 seconds. However, this proves to be a big challenge for large sites or sites with many features. Clients therefore often ask whether it is worth improving the LCP if we consider the sheer amount of work required to implement the necessary upgrades. We always advise them to do so.

How to Improve LCP?

Use the content delivery network (CDN) to minimize delays in loading the content. CDN denotes a network of servers placed around the world with the purpose of minimizing loading times as the user accesses the web content through a server that offers the fastest loading time (is usually the closest to the searcher’s location). In this way, all users can enjoy the same quality of web content without slow loading times.
Use cache to minimize main thread load.
Make sure that the header of the page loads before other elements, e.g. the footer.
Make sure that the amount of necessary CSS that is blocking render on your page is minimal.

Source: https://ahrefs.com/blog/keyword-research/.

Speed of a page in LCP (Largest Contentful Paint)

What Else Can You Do to Improve LCP on Your Page?

Remove all third-party scripts that unnecessarily slow your site down.
Upgrade your web host.
Set up lazy loading: this means that the image elements only load when the user scrolls down your page, which makes the biggest content item load significantly faster.
Minimize CSS – big CSS is one of the main culprits for LCP delays.

Source: https://backlinko.com/hub/seo/core-web-vitals

Largest Contentful Paint element - image

First Input Delay

First Input Delay (FID) is a Core Web Vital element that helps Google measure how responsive a page is. It does so by measuring the time that elapses before the user can actually interact with your site. With the help of this metric, we can therefore find out how quickly after clicking on a certain element or a link on the website the required operation is performed.

Some examples of user interactions:

choosing a menu item;
clicking on a link to navigate the site;
filling out a form on the site (e.g. entering an email address into a field);
opening up a “hamburger menu”, e.g. when viewing an FAQ section.

Why Is FID so Important?

FID is based on the actual interaction of the user with the website. It doesn’t only show an abstract result in milliseconds, but also provides us with concrete information about how much time elapses before a user can perform a certain operation on a page, i.e. does something (for example, click on a category in an online store).

Source: https://backlinko.com/hub/seo/core-web-vitals

The Main Reasons Behind a Poor FID Score

To understand FID, we must first understand the term main browser thread, which is usually responsible for handling most of the site’s code, rendering the content and responding to user interactions. In other words, loading a main thread can be described as establishing the order in which files, images, and other elements are loaded. Loading problems often occur because the main thread is overloaded.

The main reason for a poor FID rating is the long loading of JavaScript and CSS files. In this case, the main thread is “clogged”, which prevents a quick response to user input. This is why it is important to optimize the sizes of the above-mentioned files.

Source: https://web.dev/long-tasks-devtools

One of the ways to optimize the main thread work is to test the page with PageSpeed Insights and click on the “Avoid long main thread loading” section. When analysing the loading process, you will most likely find that there are certain operations that cause the most delays. In some cases, especially if you find that certain tasks can be performed quickly, you can combine the latter into one single task, but make sure you don’t make the main thread even busier.

Source: Google Search Console

How can you improve the FID Score of your Site?

Minimize or remove unnecessary JavaScript files – when developing a site, promoting it through digital marketing campaigns or measuring its performance, it is sometimes necessary to add several scripts to it that slow it down considerably. Big JavaScript files are one of the main culprits for sub-par loading performance.
Remove all non-critical third-party scripts that are bogging down the site.

Cumulative Layout Shift

Cumulative Layout Shift (CLS) is a Core Web Vital element that helps Google measure the “stability” of page loading. In doing so, it takes into account the size of the web content and the distance by which items move on the screen while the page is loading.

In other words: CLS tells us how quickly after the page starts loading, its elements are stable, i.e. they do not move around the screen. In case the main elements “dance” around the screen while the page loads, the CLS score is high, which is a bad sign.

Source: https://backlinko.com/hub/seo/core-web-vitals

Meri se vse dokler nalaganje elementa ni zaključeno, torej ne le po začetnem nalaganju spletne strani.

Why is CLS so Important?

If individual elements move around the screen, the user can click on the wrong link or menu item, which has a negative impact on the overall page experience. In such cases, the user must relearn where individual elements of the page are to find the right button or link. Especially if this is their very first interaction with the site, such experience can be very frustrating. We could compare it to a bad first impression when somebody walks into a store for the first time.

Source: https://backlinko.com/hub/seo/core-web-vitals

Google's Cumulative Layout Shift Guidelines

Frequent Causes of CLS Issues

Images without set size attribute dimensions. If the image files do not have a defined height and width, Google needs more time to adjust the dimensions of the images to the size of the screen on the device on which the user is browsing. This, of course, affects loading times.
Ads without set dimensions. Just like with the images, ads also need to come with predefined dimensions. It should also be noted that ads should always match the dimensions defined in the source code of the page – they shouldn’t be smaller or bigger.
Injecting page content with JavaScript (JS). Avoid JavaScript rendering as big JS files can significantly slow down the page.
Applying styles or fonts later in the loading process. We highly recommend that you only use fonts that are approved by Google.

How Can You Improve CLS?

Use the correct attribute sizes or dimensions of multimedia elements (video, images, animations, infographics …), so the browser will know exactly how much space a certain element will take up on the page and will not adjust it while loading the content.
Make sure ads elements have a dedicated space on the page. Otherwise they might suddenly appear on the screen and push the main content up, down or to the sides.
Make sure that additional UI items do not push the rest of the content below the “fold” of the page, i.e below the point that is still visible on the screen before the visitor moves down. Google doesn’t want pages to only show banners without additional info as in such cases, users must immediately slide or scroll down to see what subpage or menu item they need.

Source: Google Search Console

Tools for Core Web Vitals Testing

When optimising Core Web Vitals, we prefer to use the data provided by the Google Search Console as they provide insight into the loading process of a larger number of pages, and the measurements are based on a 28-day average.

We have prepared a list of programs for you that will help you analyze and implement the necessary fixes to improve the user experience.

Google Search Console,
PageSpeed Insights,
Lighthouse,
Chrome DevTools,
Chrome UX Report,
Web Vitals Extension,
SEMrush.

As the picture above clearly shows, each of the listed tools can be used to make it easier to monitor the Core Web Vitals score of your site. We suggest that you try them out and see which works best for you, but first read the usage recommendations carefully to better understand how the information is displayed and what the inputs mean. In this way, it will be much easier to take concrete steps to improve the user experience. And should you need any assistance, our team is here to help you out!

And what does the future hold?

Google is expected to make further changes to the search algorithm in the future, naturally with the goal of improving the experience on the page.

But what Do We Already Know?

There are probably more Core Web Vitals coming in the future. Google doesn’t want to add too many metrics and overcomplicate things, but the number is expected to grow nonetheless.
Currently, 3G and 4G networks play the main role in analysing Core Web Vitals, but in the future, we expect metrics to be determined based on the 5G and other leading technologies.
Will we be able to block traffic from non-target markets in the future? Currently, users who do not have access to a high-speed Internet connection and other modern infrastructure needed for fast browsing can affect Core Web Vitals scores. Therefore, many experts expect that we will be able to restrict or even prevent such users from accessing websites in the future. However, we are not yet sure if this will really happen.

Conclusion: Focus on the User!

Whether you own a small website or a large online store, your online success depends largely on the “mercy” of the search algorithm. And for it to recognise your content, it is crucial that you optimise the Core Web Vitals of your website.

Why? Even though SEO experts are increasingly emphasizing quality and useful content, it is essential to be aware that strong technical foundations are essential for the users to access and consume such content without issues or interruptions. Regardless of the conditions, the site must be loaded quickly and allow the user the simplest possible means of interaction. Without a great page experience, even the best content will not climb up the SERP ladder as searchers looking for information, products or services will prefer to look elsewhere.

If you want to reach the best SERP rankings, it is therefore essential to optimize the loading speeds of individual elements on the site, thus making your online content more attractive to the searchers as well as to the search algorithm. Since Google wants to see as many satisfied users as possible, every detail matters, especially as the competitors don’t sleep.

And since we already know today that search engines will reward those who take good care of their users, the main prize being a stronger organic presence, it is clear that Core Web Vitals will play a key role in determining the success of online businesses worldwide.

However, what also matters is knowing how to provide the best possible page experience and tweaking the site to meet the criteria laid out by the Core Web Vitals update. And this is where a good partner comes in handy.

Get in touch!

Tomaž Srpčič

You won’t find Tomaž in our offices anymore, but we know that no matter where he is now, he is doing a phenomenal job. We’ve kept a piece of them with us as a memory. :)

Luka Štular

Content Marketing Specialist

Merging my SEO and content marketing knowledge with my passion for copywriting, I am constantly analysing search trends to find the most popular keywords and package them in stories that inform, help, entertain, promote, attract attention, and, of course, sell.

Be the first one to hear about the latest digital trends and case studies.

Write down your email address below!

Everything You Need to Know about Core Web Vitals

Here is the handy content guide:

Core Web Vitals 101

Because Speed is of the Essence

Key Metrics for Measuring Site Speed

Why are Core Web Vitals Such a “Big Deal”?

But Watch Out: Core Web Vitals Don’t Tell the Whole Story

How to Check if and to What Extent Your Site Meets Core Web Vitals Criteria?

How Will Core Web Vitals Affect Search Rankings?

Here are some more important facts about Core Web Vitals testing

Core Web Vitals: a Closer Look

Largest Contentful Paint

How to Check LCP?

Why Should You Check the Result Using Google Search Console as Well?

How to Improve LCP?

What Else Can You Do to Improve LCP on Your Page?

First Input Delay

Why Is FID so Important?

The Main Reasons Behind a Poor FID Score

How can you improve the FID Score of your Site?

Cumulative Layout Shift

Why is CLS so Important?

Frequent Causes of CLS Issues

How Can You Improve CLS?

Tools for Core Web Vitals Testing

And what does the future hold?

Conclusion: Focus on the User!

Share this entry

Tomaž Srpčič

Luka Štular

Content Marketing Specialist

Don’t miss out on similar articles

Connecting the Dots: Ideas for Data Synchronization

Learn how to Handle Long-running Requests with Pimcore Process Manager

All roads lead to Škofja Loka