A few weeks ago we wrote an article about the most important Google ranking factors of 2021. In this article we explained that from may 2021, Google will rank websites more strongly based on new metrics, called Core Web Vitals. 

Although nobody knows exactly how big the impact of these new metrics will be on the rankings, we do know that Google will place more value on user experience factors that have to do with page speed, responsiveness and the stability of content during loading. 

Focus on user experience and drastic measures

In essence, the Core Web Vitals represent different facets of the user experience. And because the user experience is quite a catch-all term, Google has made certain demarcations in the search algorithm, which are called the Core Web Vitals. 

Google has mentioned that website owners do not need to be hardcore web developers to meet the requirements of Core Web Vitals. According to them, the Web Vitals initiative aims to simplify website optimization and help websites focus on user experience factors that matter most. 

Unfortunately, nothing could be further from the truth. Our analyses show that many websites need to take drastic and complex measures to meet the Core Web Vitals’ requirements. Therefore, we expect many website owners to engage the help of web developers. Ironically enough, Google itself does not meet all Core Web Vitals and even they still have important improvements to make:

But don’t despair! Below we explain exactly what the Core Web Vitals are and how you can make your website meet these new metrics. 

 

But what exactly are the Core Web Vitals?

In order to be able to give a good answer to this question, it is important to make a distinction between the concepts ‘page experience’ and content. 

Google defines page experience as “aspects that measure how users experience a web page beyond the pure information value of that page”. The pure information value in this definition is about the relevance of information, or content. 

The Core Web Vitals mainly relate to the page experience. Hence, these metrics do not so much measure how relevant your website content is, but rather the things around it. This means that your content can still be so good, but if the visitor has to wait too long before the page loads or is flooded with intrusive interstitials (e.g. ads, banners or pop-ups), Google will not be very happy about it. 

However, Google has promised to still give priority to pages with the best content in general. The Core Web Vitals therefore help a website to score better when there is a lot of competition on similar content. The page experience can thus be seen as a decisive factor for a higher ranking in the search results.

As a website owner, how do I take the Core Web Vitals into account? 

The current set for 2021 focuses on three aspects of the page experience – loading (measured by Largest Contentful Paint), interactivity (measured by First Input Delay) and visual stability (measured by Cumulative Layout Shift). Good to know is that the statistics that make up Core Web Vitals will evolve over time and therefore multiple aspects of user experience will be added in a later stadium. 

In summary, the three aspects that are the most relevant at this moment, mean the following:

Largest Content Paint (LCP): measures the loading performance of your website. For a good loading performance, the largest element of the website should be loaded within 2.5 seconds after the page is opened. If this takes longer than 4 seconds, your website will score badly. 

First Input Delay (FID): measures the responsiveness of your website by measuring the time between loading a page and the moment when the user can interact for the first time. To provide a good user experience, pages must have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): measures the visual stability of your website and the frequency with which users see unexpected layout changes. To provide a good user experience, pages must have a CLS of less than 0.1.

To ensure you meet the recommended target for each of the above metrics, it is a good threshold to have 75 percent of page visits comply with the frames.

The three Core Web Vital aspects explained 

You probably won’t comprehend much from the summary above if you’ve never heard of the concepts LCP, FID and CLS. That is why we explained them more detailed below. We also tell you with which factors your website should comply in order to get a better user experience. 

LCP: make your website faster

As we discussed earlier, a good loading time of a page on LCP is under 2.5 seconds. If the loading time is between 2.5 and 4 seconds, improvements have to be made. If the loading time is longer than 4 seconds, it often means that the visitor has already left. Of course that is not the goal of any website. 

There is a whole list of LCP factors you have to take into account to offer your visitors the best web experience, but in total there are four factors that really matter: 

1. Response time of the server

The longer it takes for a browser to receive content from the server, the longer it takes to display something on the visitor’s screen. A faster server response time immediately improves each individual page loading speed, including the LCP.

To optimize the server speed, you need to investigate how your server processes all content. This is measured by the Time to First Byte (TTFB). From there you can see what is needed to optimize. Possible solutions are for example: 

• Optimizing your server 
• Directing visitors to a CDN
• Caching
• HTML cached pages

2. Render blocking JavaScript and CSS

JavaScript and CSS are two important sources that can block the display of content on a page. And thus also slow down the LCP. Therefore, make sure that only the minimum amount of CSS required blocks the display on your website by applying the following: 

• Reducing CSS
• Delaying non-critical CSS
• Inlining critical CSS
• Reducing the blocking time of JavaScript

3. Resource load time

Although an increase in CSS or JavaScript blocking time directly results in poorer loading performance, the time required to load external sources such as photos and videos can also affect LCP. There are a few ways to ensure that these files are loaded as quickly as possible:

• Optimizing and compress images
• Pre-loading key resources
• Compressing text files

4. Client-side rendering

Recently more and more website builders are using JavaScript frameworks because they offer a lot of options and are very user friendly. One problem, however, is that this can undermine the LCP, causing a visitor not to see a page or do nothing on the page, until all critical scripts have been executed.

If you are building a website that is mostly client-side displayed, you should be extra wary of the effect this can have on LCP when a large JavaScript bundle is loaded. Therefore, consider the following optimizations when building a client-side rendered site:

• Minimizing critical JavaScript
• Using server-side rendering
• Using pre-rendering

FID: make the interface of your website responsive 

FID measures the time from the moment a user first interacts with a page (clicking a link, tapping a button or using a custom JavaScript-controlled control) to the moment the browser processes the event in response to the interaction. 

If the interaction is very slow and there is no confirmation for the visitor that something is going to happen, this can affect the user experience. 

In essence, the FID can be seen as a subjective measure of user frustration. It differs per visitor how annoying they find it before an action occurs when they have searched for interaction by, for example, clicking a button or sending a form. 

Of course Google has to draw a line here and they have set this at a delay of one tenth of a second (100ms). So for a good score on First Input Delay you have to make sure that in 75% of the page visits there is 100 milliseconds or less delay between an interaction on your page and the result thereof.

Solutions that can help you with this:

• Visually show that something is being processed
• Limit the loading time of third-party codes such as Google
• Shorten the JavaScript execution time
• Minimize the main thread work
• Keep the number of requests low and the transfer formats small
  

CML: don’t let the layout of your website shift during loading

Shifts in the layout of a website can be very distracting. Nothing is more annoying for the experience of the visitor when suddenly all elements on the page shift when fully loaded. 

Often these shifts are caused when visible elements are forced to move because another element has been added to the page or its format has changed.

Ultimately, the CML measures the instability of content due to shifts that do not occur within 500 ms of user interaction. It looks at how many visible elements have shifted and at the distance by which the elements have shifted.

Google sees the CLS as a very important metric for user friendliness, and this applies especially to the mobile phone. A mobile screen is in fact very small, so a shift in the layout soon has a huge impact. 

The most common causes of a bad CLS are:

• Images and advertisements without dimensions. Make sure you specify the height and width of the images and/or advertisements. Reserve enough space for this in advance and take a good look at what the elements look like on the page.
• Dynamically implemented content. For example, an arrow pointing to relevant content after the user clicks a button. Make sure the arrow is loaded within 500 ms to meet a good CLS score. 
• Webfonts cause FOOT / ERROR
• Actions waiting for a network response before updating DOM

How do I check if my website complies with the Core Web Vitals?

There are several ways to check how your website is doing with respect to the Core Web Vitals. In the tool list below a distinction between field, lab and Javascript tools is made. 

Field tools (measuring real-time data)

• Chrome User Experience Report
• PageSpeed Insights
• Search Console

Javascript tools (very accurate for measuring Core Web Vitals but requires knowledge to implement them)

• web-vitals
• web-vitals-extension

Lab tools (lab measurements are the best way to test the performance of functions during development) 

• Chrome Devtools
• Lighthouse

The Core Web Vitals keep developing

With Google’s constantly changing search algorithm, it is expected that many more future improvements and additions will be made to the Core Web Vitals.

We recommend that you keep a close eye on updates from Google and optimize your website based on the information about the current Core Web Vitals in this article.