Core Web Vitals: Improve Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vitals metric: it marks the time it takes for the most oversized 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 differ depending on whether the same page is requested on a smartphone or a desktop.
As you might expect, “the largest element” is the most important in the user experience and 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 significant performance metrics today.
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 if you have a poorly performing server.
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 displayed above the waterline also directly affect 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
How to improve the “Largest Contentful Paint”?
Here are some ways to improve the loading time of your LCP.
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 visitor 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 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” to serve the cached content first. So if your LCP is a cached image, the service worker will run in the browser’s background and can intercept requests from the server.
It is thus possible to cache the HTML page’s content and 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
You could also 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 helpful 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 too heavy content 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, such as the “srcset” tag. Do not use images that are not 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 because the required font is in an external style sheet.
Compress text files
Reduce the weight of your JS and CSS
Now that we know that Google rates the experience as visible, stable, and interactive content, it’s essential to reduce the size of these assets as much as possible. This is the job of “minification”, which eliminates 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!
You can also find a team of professionals who will do it manually.
It would be best to 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!