The Largest Contentful Paint (LCP) is a metric of Core Web Vitals : it measures the time required before the largest element becomes visible within the "viewport". As long as the LCP hasn't loaded, you'll see almost nothing on the page. In fact, the LCP element is always located above the foldwhich means at the top of the page while it is loading.
Generally the LCP is an image or a block of text, but it can also be a video or an animation. The LCP element can also differ depending on whether the same page is requested on a smartphone or on desktop.
As you might expect, the "largest element" is the most important for the user experience and for perceived or actual loading speed: if the page's largest element doesn't load quickly, the user experience will suffer. How long will you look at a nearly blank page while waiting for it to load? Often you'll even leave the site!
When browsing a site, saving a few seconds can make a huge difference, which is why Google included LCP in its "Core Web Vitals" metrics that measure the quality of your user experience.
LCP accounts for 25% of the overall PageSpeed Insights score: by improving its performance you will likely raise your score, and with it your user experience and your SEO.
In short, LCP is one of the most important performance metrics today.
What causes a slow "Largest Contentful Paint"?
Measurement tools such as 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 poor LCP are the following:
1. Slow server response times
A slow server will have a negative effect on all performance metrics your website's loading speed, not just on 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 blocking rendering
If you add many plugins to your website, or if you chose a very elaborate theme, you might want to reconsider some choices: the addition of JavaScript and CSS (especially above the fold) 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 load times
Images, videos, and blocks of text that appear above the fold also have a direct effect on loading time.
Large elements, such as the hero header (a large banner often featuring text, buttons, etc.), should be optimized to reduce loading times.
4. Client-side rendering
Client-side rendering is popular with many web developers. Using JavaScript, it allows pages to be rendered directly in the browser. However, JavaScript affects LCP, because the browser must first load all critical JavaScript before completing the render.
How to improve "Largest Contentful Paint"?
Here are some ways to improve your LCP loading time.
1. Migrate to a better server
LCP is a content metric. So it makes sense that one of the best ways to improve it is to start with the time it takes to retrieve content from your server.
If, when you run performance tests, your server's response time is poor, change it!
2. Implement a CDN
A CDN is a content delivery network that stores your content on servers distributed around the world: rather than having your content stored in a single location, when a user requests a page, the content is served from the server closest to them.
Thus, if your LCP element is a large image file, your visitor in 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 the content.
3. Set up a caching 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 doesn't have such servers, you can still cache your content by managing it directly with your hosting provider.
4. Serve cached HTML content via a service worker
To make this operation even faster, you can use a "service worker" that will serve cached content first. Thus, if your LCP is a cached image, the service worker will run in the browser background and can intercept server requests.
It's therefore possible to cache the page's HTML content and only update the cache when the content has changed, which allows delivering the Largest Contentful Paint even faster than with a simple CDN.
5. Render content faster
When a browser renders your content, it must first parse the HTML markup to transform it. However, if it encounters external style sheets or synchronous JavaScript tags along the way, it will pause this task to process those external resources.
Scripts and stylesheets are render-blocking resources and therefore delay LCP. To prevent these resources from blocking your LCP from loading, defer any non-critical JavaScript and CSS.
In fact, you could also simply remove any unused CSS on that page, or move it to a different stylesheet.
6. Optimize, compress and reduce all the content you can
The goal of LCP is to make useful on-screen content appear as quickly as possible. The load times of page elements have a direct effect on LCP.
Smaller files load faster. Every saved byte improves LCP, so hunt down overly heavy content and slim down your entire site as much as possible.
Optimize and compress images
Improving the loading and rendering times of images directly accelerates LCP. To do this, convert images to lighter formats such as JPEG or WebP, or compress them.
Try to serve them at the exact dimensions specified in your code, for example using the "srcset" attribute. Do not use images that are not genuinely useful.
Preload important resources
Even if you load optimized and compressed content, some elements of those resources can be buried in a file that takes a long time for the browser to load.
A text file can take additional seconds to load simply because the required font is located in an external stylesheet.
If you have resources that must be prioritized, such as the elements that form your LCP, try to fetch them as early as possible. Preload critical resources that form the first viewport, such as fonts, above-the-fold images, and critical CSS or JavaScript paths.
Compress text files
For text compression, there are compression algorithms that will reduce the size of HTML, CSS, JavaScript, and text files when they are sent between the server and the browser.
Reduce the size of your JS and CSS
Downloading JavaScript and CSS stylesheets prevents your site's content from becoming visible or interactive quickly. Even if JavaScript is asynchronous and doesn't block rendering, it will "compete" for bandwidth during download, which reduces mobile performance.
Now that we know Google scores the experience for visible, stable, and interactive content, it is important to reduce the size of these resources as much as possible. This is the job of "minification", which involves removing all unnecessary spaces and line breaks from your files to reduce their size.
Note that this also means you must hunt down unused scripts and stylesheets: "minified" content that is unnecessary 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 your stylesheets. If you use WordPress, here is a list of some of them.
You can also find a Freelancer who will take care of doing 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's score.
By applying all these optimization techniques, you will improve your site's LCP score, your users will thank you, and your SEO will be enhanced!
