Web Vitals: How to improve Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) is a Core Web Vitals metric: it measures the time it takes for the largest item to become visible in the viewport. Until the LCP is loaded, you will hardly see anything on the page. This is because the LCP element is always located above the waterline, that is to say at the top of the page being loaded.
While the LCP is typically an image or a block of text, it can also be a video or animation. The LCP element can also be different depending on whether the same page is requested on a smartphone or on a desktop.
As you might expect, “the largest element” is the most important in the user experience and for actual or perceived loading speed: if the largest element on the page is not loading quickly, the user experience will not be good. How long do you stare at a nearly blank page, waiting for the page to load? Often you will even leave the site!
When browsing a site, a few seconds of waiting for less can make a huge difference, which is why Google has included LCP in one of these “Core Web Vitals” metrics, which measure the quality of your performance. user experience.
LCP represents 25% of the overall PageSpeed Insights score: by improving its performance, you will probably improve your rating, and with it your user experience, and your SEO.
In short, LCP is one of the most important performance metrics today.
 |
| largest-contentful-paint-lcp |
What are the causes of slow "Largest Contentful Paint"?
Measurement tools like PageSpeed Insights or Search Console (in the Core Web Vitals report) will tell you how long it takes for the LCP to load.
The most common causes of a bad LCP are:
1. Slow server response times
A slow server will negatively affect all of your website load speed metrics, not just the LCP.
Even if all your resources are optimized, it will be useless as long as you have a poorly performing server.
2. JavaScript and CSS block rendering
If you are adding a lot of plugins to your website, or have chosen a very elaborate theme, you may need to reconsider some choices: adding JavaScript and CSS (especially above the waterline) strongly affects loading times.
Whenever a browser encounters a synchronous script or an external stylesheet, it delays the final rendering of a web page.
3. Resource loading time
Images, videos, and blocks of text that display above the waterline also have a direct effect on load time.
Large elements, such as the Hero Header (a large, often imposing banner with texts, buttons, etc.), must be optimized to reduce loading times.
4. Client-side rendering
Client-side rendering is popular with many web developers. Using JavaScript, allows web pages to be rendered directly in the browser. However, JavaScript does impact LCP because the browser must first load all critical JavaScript before it finishes rendering.
How to improve the “Largest Contentful Paint”?
Here are some ways to improve the loading time of your LCP.
 |
| How to improve the Largest Contentful Paint |
1. Migrate to a better server
LCP is a measure of content. So it makes sense that one of the best ways to improve it is to start with how long it takes to fetch the content on your server.
If your server response time is poor when performing performance scans, change it!
2. Set up a CDN
A CDN is a content delivery network that stores your content on servers spread across the globe: rather than having your content stored in one place, when a user requests a page, the content is served from the closest server to him.
So if your LCP element is a large image file, your visit to Madrid will not have to wait for the file to be routed by cable from your server in Strasbourg.
Less distance to travel = less time to deliver content.
3. Set up a cache system
If your CDN uses edge servers, you can cache your content so that it doesn't have to be reloaded every time.
If your CDN does not have such servers, you can still cache your content, managing it directly with your host.
4. Serve cached HTML content through a service worker
To make this even faster, you can use a "service-worker" that will serve the cached content first. So if your LCP is a cached image, the service worker will run in the background of the browser and can intercept requests from the server.
It is thus possible to cache the content of the HTML page and to update the cache only when the content has changed, which makes it possible to deliver the Largest Contentful Paint even faster than with a simple CDN.
5. Make content faster
When a browser renders your content, it must first parse the HTML markup to transform it. However, if the latter encounters external style sheets or synchronous JavaScript tags on its way, it will interrupt this task to process these external resources.
Scripts and stylesheets are resources that block rendering and therefore delay LCP. To prevent these resources from blocking your LCP from loading, report all non-critical JavaScript and CSS.
In fact, you could also just delete any unused CSS on that page, or move it to another stylesheet.
6. Optimize, compress and shrink all the content you can
The goal of LCP is to make useful content appear on screen as quickly as possible. The loading time of the page elements has a direct effect on the LCP.
Smaller files allow faster loading. Each byte gained improves LCP, so you have to hunt down content that is too heavy and lighten your entire site as much as possible.
Optimize and compress images
Improved image loading and rendering times directly speed up LCP. To do this, convert the images to lighter formats such as JPEG or WebP, or compress them.
Try to serve them at the exact dimensions provided in your code, for example with the “srcset” tag. Do not use images that are not really useful.
Preload important resources
Even if you load optimized and compressed content, some elements of these resources may be embedded in a file that takes a long time for the browser to load.
A text file can take extra seconds to load, just because the required font is in an external style sheet.
If you have resources that need to be prioritized, such as the items that make up your LCP, try to get them back as soon as possible. Preload the critical assets that make up the first viewport, such as fonts, images above the waterline, and critical CSS or JavaScript paths.
Compress text files
For text compression, there are compression algorithms that will reduce the weight of HTML, CSS, JavaScript, and text files as they are sent between the server and the browser.
Reduce the weight of your JS and CSS
Downloading Javascript and CSS stylesheets prevents your site content from being quickly visible or interactive. Even though JavaScript is asynchronous and doesn't block rendering, it will “fight” for bandwidth while downloading, which reduces mobile performance.
Now that we know that Google rates the experience as visible, stable, and interactive content, it's important to reduce the size of these assets as much as possible. This is the job of "minification", which consists of eliminating all unnecessary spaces and line breaks from your files to reduce their weight.
Be careful, this also means that you have to hunt for unused scripts and stylesheets: unnecessary "minified" content is content that shouldn't have to be loaded at all, optimized or not!
There are many tools to help you compress your JavaScript scripts and stylesheets. If you are using WordPress, here is a list of a few of them.
You can also find a freelancer who will do it manually.
Conclusion
You should now understand why Largest Contentful Paint is essential for performance and user experience, and how you can improve your website score.
By applying all these optimization techniques, you will improve the LCP score of your site, your users will thank you, and your SEO will be improved!