If you have a blog or a website, you already know how important it is to be found by a user and to be informed on the latest updates imposed by search engines. Google, for example, has decided to introduce new metrics to define the ranking of a website: Largest Contentful Paint and First Contentful Paint are among the main ones to be considered.

The Largest Contentful Paint (LCP) is a decisive parameter for SEO and user experience. We therefore recommend that you learn more about it in our guide. Find out what it is, how you can measure it and above all, how you can improve your score.

Get ready to meet some technicalities and let’s start!

What is Largest Contentful Paint?

The Largest Contentful Paint (LCP) is a Google metric that belongs to the Core Web Vitals, a new group of metrics aimed at ensuring good results in terms of user experience. Among them there are the Largest Contentful Paint, the First Input Delay and the Cumulative Layout Shift.

The LCP calculates the loading performance of the main section of a web page, which is the largest and most challenging element to be loaded. More simply, it identifies the speed at which the main element, whether text or image, is displayed on the user’s screen.

For Google this is what appears in the Above-the-fold section without scrolling. As anticipated, this metric only consider what is useful to the user experience: images, background images with CSS, text elements, i.e. paragraphs.

Why is it important?

Hence, the importance of this value: a fast LCP will keep the users waiting for the page to load completely, indeed they generally consider a page to be fast or slow according to the time it takes to display the content they find useful.

On the other hand, it is also important to consider the impact of the LCP on the SEO. In this regard, in 2020 Screaming Frog conducted a study on 20.000 URL to test how many websites passed the Core Web Vital assessment. According to the results, most of them didn’t adhere to the minimum criteria.

Then the LCP results were compared with SERP positions and it seems that web pages with good performance in metrics tended to occupy the top positions. Nevertheless, the result does not seem sufficient to say that the LCP influences SERP so much.

How to measure Largest Contentful Paint: tools and techniques

First of all, it is important to know the ideal LCP value, which is, according to Google, 2.5 seconds possibly lower.

Constant monitoring of this value is essential to keep it within the considered thresholds or possibly improve it. In this purpose, we will now point out some useful tools to monitor this parameter.

Among them, many from Google, we will fist mention PageSpeed Insights which allows the value to be measured on both mobile and computers. On the other side Google Search Console, offers an overall assessment. It is also important to mention other tools, such as Chrome UX Report, Chrome DevTools, Lighthouse, Web Vitals Extention.

How to improve Largest Contentful Paint: very important tips

Now that you have all the necessary insights, you have probably tested your website to see what your LCP is. If you got a negative score, don’t worry. That’s what we’re here for.

Generally, reasons for high Largest Contentful Paint can be:

• Heavy resources (videos, images, audio files) slowing down the loading process;
• JavaScript and CSS rendering blocks;
• Slow server responses.

Now it’s time to figure out how to optimise your website’s Largest Contentful Paint and solve your problems. Here are all the tips and analysis we recommend you follow and implement.

1. Optimize image sizes

It is one of the best SEO practices aimed at speeding up the site and achieving a good UX.

Images are, in fact, essential elements within a web page (think e-commerce) and usually they are found in the Above-the-Fold. Therefore, it is very important to optimise them in order to make page loading less slow and to speed up the LCP.

For this purpose, we suggest you to follow the tips below:

• Choose the right file format: JPG for photographs and very colourful images (this format helps to compress heavy files); PNG for line-art and images with fewer colours (it is the perfect format to provide transparent background);
• Compress the images as much as you can, but pay attention to the context and the display: a pixelated image may not properly render the message it wants to convey;
• Resize images: use a photo editing software or the HTML IMG tag’s height and width attributes.

2. Use Critical CSS

Critical CSS are all the elements needed to render the structure and appearance of the displayed page.

According to the rules, it should only be used for Above-the-fold content (all content that is at the top and visible part of the page before the user scrolls down). All other CSS elements on the page must be loaded later.

In this way, CSS is no longer a resource that hinders rendering and you can speed up the loading of the resources that are essential to displaying the main content of the Above-the-fold.

As you can imagine, this can certainly help improve the Largest Contentful Paint.

3. Do not load images in JavaScript

Loading images by using JavaScript can slow down the process.

Therefore, we advise you to leave this task to your browser to avoid slow loading and optimise Largest Contentful Paint.

4. Choose a good hosting service and reduce response time

The web hosting you use can have an impact on web page loading and consequently on Largest Contentful Paint.

Therefore, it is a good idea to choose a server that has a good reputation and has the appropriate characteristics based on website size, volume and traffic. An HTTP/2 push server is useful for optimising performance and improving loading time.

Additionally, the server response time is the time it takes for a server to respond to a request from a browser (with elements in HTML, CSS, JavaScript, etc.).

To improve the LCP, it is good to reduce this amount of time and speed your page to the highest levels. You can do that, following the methods below:

• Exploit caching systems: the visitor can store the resources in the cache and improve time loading when visiting the page again. This will reduce the server processing time and consequently server response time;
• Move the database to another server optimized for database software;
• Use a high-quality CDN to reduce file sizes and deliver files such as images and videos faster (ImageEngine is a recommended tool for adjusting the size of images without losing any quality value);
• Employ HTTP compression in order to reduce file’s sizes before sending them to the browser

Summing up…

In conclusion, analysing and improving Largest Contentful Paint is certainly not a simple task as it requires knowledge of very specific IT techniques and elements. However, it is an absolutely necessary parameter for your website to be SEO-optimised and have a high level of user experience.

We hope that our advice has been useful and that you feel ready to put it into practice. If, on the other hand, you are still a beginner and need professional support to manage all the SEO activities on your website, you can contact the team of experts at Mailsenpai.
All you need to do is contact us and ask for advice!

Have you ever heard of this metric? What’s your experience with SEO rules? Tell us about it in the comments!