Core Web Vitals: LCP

No comments

Sometimes users face a long loading website and simply close it without waiting for the results, which has a negative impact on their interaction experience with Google search queries. To avoid such issues, Google found a solution – new website evaluation metrics, which will help rate websites according to user experience. In this article, we will talk about the LCP metric and the ways to optimize it.

The quality of search results is a strategically important goal for Google. That’s why starting from May 2021, new metrics for evaluating page quality will appear in Google search. The new algorithm aims to identify those sites on which users can easily access information and not face problems like freezing the website or long loading of the content. Due to the new algorithm, Google will prioritize those websites where content is accessible, and interactions are possible from the first seconds. 

To have possibly transparent evaluating criteria, Google has defined a set of specific, publicly available and described factors – Core Web Vitals.

Web Vitals Main Parameters

Web Vitals consist of a dozen parameters, but there are three main ones that you need to pay attention to:

  1. Largest Contentful Paint (LCP): load time for the largest visible element of the page, such as an image, heading, text block, video, or other content. In general, this metric shows how quickly the page loads. To provide a good user experience, LCP should be within 2.5 seconds after the page starts loading.
  2. First Input Delay (FID): shows the time between the user’s first interaction (clicking on the page, link or image) and the browser’s response to this action. That is to say, if the user clicks on one of the website’s elements, how quickly can the browser process it and give the result? Pages should have a FID of less than 100 milliseconds for a good user experience.
  3. Cumulative Layout Shift (CLS): a measure of visual stability on the website, which estimates the displacement of the web page elements during page loading. If CLS is high, users try to click on one button, but eventually, click on another as the layout shifts. Therefore, pages should maintain a CLS of less than 0.1 to provide a good user experience.

The more accurate way to measure the loading speed of the page’s main content is to use the Largest Contentful Paint (LCP) API. The content can change while the page is loading, so every time a new large element appears, the browser sends a PerformanceEntry of type largest-contentful-paint. But when users start interacting with the page, LCP is no longer available. The value we need is the time of the most recently sent metric. 

The largest elements

There is a limited set of parameters that one can consider as the “largest element”:

  • <img>
  • <image> inside an <svg>
  • <video> (using the poster image)
  • An element with a background image loaded via the URL() function (as opposed to a CSS gradient)
  • Block-level elements containing text nodes or other inline-level text elements children.

The list is limited, so everything was simple at the beginning of the new algorithm’s implementation, after which there is an opportunity to add elements like <video> in the future. 

The size of the element specified for LCP is usually the size visible to the user, therefore, if an element extends out of the viewport or is cropped, it does not play a role in determining the element’s size. For example, images compressed to a size much smaller than their own size will only report their display size, while images that are stretched or expanded to a larger size will only register their internal dimensions. 

What is a good LCP score?

In order to provide a good user experience, websites should strive to render the largest content within the first 2.5 seconds after the page starts loading. To ensure that you achieve this goal for most of your users, hold a 75% benchmark measure of page load, segmented across mobile and desktop.

One can measure LCP via the following tools:

How to measure LCP?

Field tools

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals report)
  • JavaScript library

Lab tools

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

How to optimize LCP?

Core Web Vitals will have an impact on a site’s rankings and SERPs. In order to prepare for the upcoming changes of May 2021, you need to start evaluating and improving the technical optimization and usability of your website right now. First of all, you should conduct a large-scale audit of web pages to see the potential for improvement. After that, if your LCP doesn’t match the defined score, you need to find out the reason and eliminate it.

The most common causes of a poor LCP are:

  • Slow server response time
  • Render-blocking JavaScript and CSS
  • Slow resource load times
  • Client-side rendering

Slow server response time

The faster the browser receives content from the server, the faster the page loads. Accordingly, in this case the better is the LCP score.

First of all, improve the way your server handles the content of your website. Use Time To First Byte (TTFB) to measure the server response time. And if you find out that the response time is high, you can enhance your TTFB in the following ways:

  • Optimize your server. 
  • Route users to a nearby CDN
  • Cache assets
  • Serve HTML pages cache-first
  • Establish third-party connections early

Render-blocking JavaScript and CSS

The browser converts the HTML markup to a DOM tree and then renders the content. So, it will not be able to work if it detects render-blocking resources. To speed up the page content loading, you need to defer all non-critical JavaScript and CSS.

Slow resource load times

The time needed for the content to load affects LCP, so it is logical to work with the page elements and try to make them load as fast as possible. Let’s see the probable actions in this case:

  • Optimize and compress images. If the website has many large-sized images that slow down page loading, try lazy loading images – a gradual loading that usually depends on the user’s actions on the page. You can also compress images if they weigh a lot or even remove if there is no necessity in keeping them.
  • Preload important resources. Critical assets like fonts, images, or videos should be downloaded first.
  • Compress text files. Compressing your resources minimizes the size of their delivery, reducing download times and therefore LCP. 
  • Deliver different assets based on network connection (adaptive serving). If you have large assets that are important to display in the initial rendering, you can use different versions of the same resource depending on the user’s connection or device.
  • Cache assets using a service worker. Caching critical assets with a service worker can significantly reduce their load times, especially for users who have a weaker connection. One may meet the mentioned assets for images and other elements that are rarely updated on the web page.

Client-side rendering

Some websites work through client-side rendering. It means that pages are rendered in the browser using JavaScript. This means everything is processed on the client-side, not on the server. Client-side rendering websites are risky because they can affect LCP. The main disadvantage of this approach is that as the site grows, the speed of loading and displaying content for the user suffers. For this reason, here are some suggestions to improve LCP in such cases:

  • Minimize critical JavaScript
  • Use server-side rendering
  • Use pre-rendering

There are different tools for measuring and debugging LCP. To measure your website’s LCP, we recommend you to use one of the most user-friendly tools – Web Vitals Chrome Extension. The mentioned tool allows you to continuously check three key metrics for any web page you visit. 

Improvement = competitive advantage

Year after year, Google is making big strides to improve the web industry, therefore websites created with an understanding of performance metrics or easily adapted to changes have an undeniable advantage over their competitors.

Adnimation TeamCore Web Vitals: LCP

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

− 1 = 6