In 2021, Google has launched its summer update to its service for checking download speed and site quality — Core Web Vitals (CWV). This is one of many hundreds of different algorithms that somehow affect the ranking of sites in search results, increase organic traffic and site conversion. It is built on real user experience and thus improves the website quality and makes it more user-friendly using the collected data.

Here we are going to consider the ways of optimizing a website based on the metrics and algorithm principles.

What is Core Web Vitals

CWV is a set of metrics that make part of Google’s Web Vitals website evaluation service. The parameters of these metrics are important to site owners and developers, as each of them represents a specific user experience based on the user’s actual actions on the website. Unlike many Google parameters with unclear and secret mechanics, Core Web Vitals contains measurable metrics. Google has opened access to information about the indicators that would be considered by the algorithm as optimal, so that developers could figure out how to optimize the website.

The CWV target data:

• all important content, text, and graphics are rendered quickly in the browser;
• capture forms and buttons are loaded immediately;
• all design elements are displayed correctly in the desktop and mobile versions, do not “jump” or overlap the main content.

Core Web Vitals metrics: what they are for

Each website using the CWV algorithm is evaluated page by page. If 75% of evaluated pages fulfill Google’s requirements (75 percentile), the website will pass the test and appear in one of the first relevant search results. Otherwise, the site will start falling in the TOP and may completely disappear from it. The rating is based on monthly user experience. The better the Core Web Vitals score, the higher the website will be on the search page.

CWV metrics

Before answering the question of how to optimize a website, let’s consider the Core Web Vitals metrics and their parameters.

Core Web Vitals include:

• Largest Contentful Paint (LCP) – loading speed of basic text and visual objects.
• First Input Delay (FID) – the time spent by the user before interacting with the content (clicking on links, launching videos, etc.).
• Cumulative Layout Shift (CLS) – cumulative stability of objects or displacement of the layout.

Now let’s have a closer look at each of them.

LCP

Largest Contentful Paint (“loading speed of the main content”) evaluates how quickly the main content, text and graphics are loaded in the browser in comparison with other elements. This refers to the rendering of the formatted visual object or text block that is currently visible in the viewport. At the same time, the size of the visual object does not include parts of the element that are not displayed on the screen and those elements in which there is an invisible overflow. In text boxes, only the smallest rectangle in which the text nodes are placed is counted. The values specified for objects in CSS (additional margins, element borders, and indentations) do not affect the indicators.

Best LSP score – less than two seconds. The best indicator is 2.5 seconds, the average is 4 seconds, the worst is over 4 seconds. The less time it takes to load, the more chances that the user will stay on the page and benefit it.

FID

First Input Delay (“Delay time before the first interaction”) is a metric that measures the time spent by the user when loading a page and the first interaction with the content. Not the processing time of but only the “delay” before the event. The longer a user waits for interactive elements (links, buttons, JavaScript-based elements, video or audio content) to load, the higher the risk of leaving the site.

Best FID score – 100 milliseconds. 300 milliseconds is an average (improvement is recommended), more than 300 is a bad result.

It is important to understand that this metric may not only have a low or high value but the value may also be absent, as not all users always interact with the same page.

CLS

Cumulative Layout Shift is a metric that fixes the time during which each element occupies a set position on the page. It directly affects the user’s perception of the page. The more “flying”, shifting from place to place, the more annoying it is, especially when trying to interact with an element, the user clicks on a completely different object. This happens when a visual object, such as a third-party banner or widget, takes the longest to load. This could be due to asynchronous loading or pre-written DOM elements that are dynamically added on top of the layout.

Best CLS score – 0.1 second. Score less or equal to 0.25 seconds is an average, while anything longer is a bad result.

If layout and position of elements change at the initiative of the user, or the displacement is intuitively understood by the user as interconnected with his action, this does not affect his perception. The different story is when the user is not ready for such a displacement.

Tools to measure CWV

The Core Web Vitals measurement tools are categorized by their application: field (real) and laboratory (artificial).

Field tools:

• Core Web Vitals report in Search Console – a report on the main Internet metrics.
• Web Vitals is a Chrome extension that dynamically displays changes in metrics.
• Chrome User Experience Report is a report displaying real data for all CWV metrics.
• PageSpeed Insights combines theoretical measurements and real-world metrics based on user experience.
• Web-vitals JavaScript library with sending data to Google Analytics – all indicators are measured with basic web APIs.

Laboratory tools:

• AMP Page Experience Guide (for AMP pages)
• Lighthouse
• Chrome Dev Tools

We recommend to use these tools when developing your website before publishing it on the main server in order to find and fix performance bottlenecks.

Website improvement with CWV

How to optimize your website so that Google would consider relevant to user queries? The topic is vast, so we will limit ourselves to recommendations that will help significantly speed up website load times and improve performance on all CWV metrics.

Main problems that affect the quality and loading speed of the website:

• a large number of parallel requests;
• transfer of large amounts of data;
• layout offset and “flying” layout elements;
• obsolete hashing technology;
• text loading before all used fonts.

Website optimization: what to do

• check site performance for bottlenecks;
• analyze data for desktop and mobile versions;
• reduce the file size of all images on the website using new compression algorithms and new formats supported by browsers (WebP, JPEG 2000, JPEG XR). For example, Squoosh and Compressor.io are great tools for compressing images without losing quality;
• write the correct sizes of images and inline elements in pixels in the code to avoid the layout displacements;
• adapt the amount of code in JavaScript and CSS (for example, using the Brotli compression algorithm);
• implement lazy loading for JS files and images, which will load elements while scrolling the page rather than all at once;
• pre-cache critical resources using Service Worker.

When choosing a host for your website, consider the following:

• availability of the Google pagespeed module for image optimization, cascading style sheets and Javascript files;
• availability of SSD and NVMe SSD drives with high read speed to reduce delays in website loading;
• new HTTP/2 support for the simultaneous transfer of several elements;
• provision of SSL security certificate;
• connected CDN system based on several servers with equal load distribution and increased site speed;
• better use the provider’s servers from the same region of the website focus;
• server response time should be less than 600 milliseconds.

Summary

Thus, it is now clear that Google’s Core Web Vitals is a set of indicators that affect the quality and speed of website loading, based on real user actions. The CWV contains three metrics that measure the time to render the main elements on the website, the time it takes from loading to the first interaction with the site’s content, and determine the visual stability of the layout during and after the code is loaded.

Unlike other, usually secret algorithms, CWV metrics can be explored in Core Web Vitals in Search Console and PageSpeed Insights. Based on this data, developers can improve the metrics for each page.

The introduction of Core Web Vitals means that along with high-quality and useful content, the technical side of the website will also play an important role for SEO. A CWV-optimized website will have every chance of appearing in one of the first search results.

If you need to optimize your website for Core Web Vitals algorithms, please contact New Line Technologies. We will bring your website to the top in the shortest possible time.

No Fields Found.