Google considers the quality of search results as a strategically important aim. The main question is: How to reduce the number of sites in search results that causes a negative experience and increase the number of sites that meet user needs? To solve this problem Google will implement new factors for assessing the quality of resource - the Core Web Vitals, which will take effect from May 2021. In this article, we will discuss:
There are a lot of different indicators that are related to Web Vitals but the Core Web Vitals consist of three: LCP, FID & CLS. Each of these parameters evaluates the quality of the site differently.
Largest Contentful Paint or LCP - an indicator that evaluates the render time of the biggest piece of content. It can be the text block, image or video. It does not measure the time for full content uploading, just looks for uploading of the largest element on the screen.
First Input Delay or FID - an indicator that evaluates the amount of time for site reaction on the first user interaction. It can be just opening the menu by pressing the button.
Cumulative Layout Shift or CLS - an indicator that evaluates the visual stability of the site. The number of elements that are moving from frame to frame during the full site loading relates to layout shifts. It can be a slow appearing advertisement that overlaps the button that the user wants to press.
The checkpoints of Core Web Vitals look like:
The advantage of Core Web Vitals is in their ease of measurement and lucidity. There are a lot of tools for monitoring LCP, FID & CLS, the most widespread are presented below.
Lighthouse is an open-source extension for Google Chrome, an automated tool for monitoring the performance, accessibility, quality and SEO of web apps. Provides loading reports on both mobile and computer devices.
It takes a few minutes to add Lighthouse to Chrome and generate a complex report based on “laboratory” data using an algorithm.
According to Google, LPC that happens after 2,5 sec needs an improvement. Lighthouse generates a report where the time of the biggest element uploading is presented:
To see how Lighthouse calculates the score there is an available Scoring Calculator:
For FID the great result means less than 100 milliseconds and everything that is more - needs improvement. In Lighthouse and PageSpeed Insights FID is changed with TBT - Total Blocking Time. TBT measures the amount of time when the main thread is blocked by long tasks - tasks that continue for more than 50 milliseconds. The user cannot interact with the page because the browser needs to end the task.
As FID requires a real user and therefore cannot be measured with “laboratory” data. However, the total block time (TBT) is laboratory-measurable, correlates well with FID in the field, and captures issues affecting interactivity.
For CLS the result that is less than 0.1 means good and everything that is more - needs improvement. Layout stability is presented:
PageSpeed Insights allows receiving reports on the speed of loading pages on mobile devices and computers, as well as advises on how to increase this speed. The score is calculated based on simulating loading using the Lighthouse tool. PageSpeed Insights has not only “laboratory” data but also field data - a historical report about how real users experience the pages.
It gives an ability to calculate FID without problems including LCP and CLS.
Extension for real-time calculation of Core Web Vitals. It can be quickly added to Chrome and evaluates LCP, FID and CLS.
As it was mentioned before the main idea of LCP, CLS and FID introduction is in providing a qualitative and positive user experience. In such a way the number of sites with poor indicators will be reduced in search results. However, poor indicators can be simply changed.
Largest Contentful Paint
Start with the server response time
Poor server response time influences uploading the HTML document and then rendering the page. Things that can improve the server response time:
Client-side rendering, due to the multiple cycles, will make the page loading inconsistent and slow. Server-side rendering implementation can speed up the rendering of the initial page and increase the performance rate.
First Input Delay
Cutting long tasks
Web worker gives an ability to place tasks that block the main thread into a separate stream and run them on the background thread. This can reduce blocking time and fix the FID indicator.
Cumulative Layout Shift
Including image and video dimensions like width and height size attributes helps the browser to determine the correct amount of space while the content is loading. Ads and embeds also need to have reserved space, this causes a positive effect on CLS.
Layout shifting is even more frustrating on mobile devices when the user wants to click on a button but due to suddenly appearing text block, he clicks on a text by inertia.
Avoid layout changes
Setting the new content over the existing one is possible only in case of response to the user interaction, in other cases it will cause layout changes. Animation of properties can also cause layout changes, it is better to use transformation animations to provide context and continuity.
These are the most common problems and solutions related to Core Web Vitals improvement. Fortunately, most of the tools like Lighthouse and PageSpeed Insights provide causes of poor results and suggestions for enhancement to simplify the whole process.
It is also worth noting, that if the website needs metrics optimisation, there are software programs like Shopware 6 and Oxid eShop (an enterprise-level e-commerce platforms) that provide all the optimisations out-of-the-box. It is an excellent way to save time on evaluating, monitoring and improving by yourself.