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:
- 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.
- 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.
- 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”:
- <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?
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Chrome DevTools
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.
- Slow server response time
- 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
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.
- 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.