The TL; DR
- Largest contentful paint is the biggest visual element loaded by the page
- Users like to see content appear as quickly as possible
- Slow LCP is caused by slow servers, render-blocking, and heavy resources
- LCP can be sped up by a CDN, caching content, and optimizing assets
This is the metric that measures how it takes to give users visual content, a watershed moment in the load process that shows a user that yes, progress is being made.
What is Largest Contentful Paint?
Largest Contentful Paint is a pleasingly simple metric. It is the biggest visual part of the page. Often an image or a block of text, the reasoning is that once there is something to look at, the user can start getting value from the page.
The elements that can be considered the Largest Contentful Paint are:
- Img elements
- Image elements inside an svg element
- Video elements (the poster image is used)
- 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
An element can only be considered the largest contentful element if it has rendered and is visible. So, images further down the page will not affect the LCP time.
But, as you can see in the green boxes above, the Largest Contentful Paint can change during the load. You can see how the LCP switches from the section title to the headline, to the image.
When this happens the smaller element can be reported as the largest contentful element, but when the bigger element finishes rendering, it gets reported via another Performance Entry.
If a user interacts with the page, by clicking or scrolling, the reporting will take the LCP from that moment. If the user lets the page completely load the LCP will be taken from the largest contentful element that is rendered and visible.
What causes a slow Largest Contentful Paint?
Measurement tools such as the Chrome User Experience Report, PageSpeed Insights, and Search Console (Core Web Vitals report) will show you how long it takes to load the LCP.
The most common causes of a poor LCP are:
- Slow server response times
- Slow resource load times
- Client-side rendering
How to improve Largest Contentful Paint time
Stage one: Serve your content faster
LCP is a content metric so it makes sense that one of the best ways to improve it is to start with how long it takes to retrieve the content from your server.
Activate a CDN
A content delivery network will store your content on servers all around the world. Rather than having your content stored in a single location, when users request a page, the content is served from the server closest to them.
So, when your LCP element is a big HD image file, your user in Helsinki isn't going to have to wait for it to be piped down the wire all from your Brisbane server. Less distance = less time.
Cache your HTML
Also, 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 edge servers, you can still cache your content by managing your cloud provider's cache behavior.
Serve cached HTML content via 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 an image that is cached, a service worker will run in the browser background and can intercept requests from the server.
This makes it possible to cache the HTML page's content and just update the cache when the content has changed. This will deliver the Largest Conteful Paint even faster than a regular CDN trip.
Top tip: A big advantage of using a Progressive Web App is that they use a service worked by design so it will have a good effect on your Largest Contentful Paint time, too.
Here you can see Google's data on the time it takes to serve content using a service worker compared to without.
Stage two: Render your content faster
Clear the path for the LCP
Optimize, compress, and minify whatever content you can
The goal with LCP is to get useful content onto the screen as fast as possible. The time it takes to load above-the-fold elements has a direct effect on LCP. Smaller files lead to faster loading.
- Optimize and compress images
- Preload important resources
- Compress text files
Improving how long it takes to load and render these types of images will directly speed up LCP. To do this:
- Convert images into lighter formats such as JPEG 2000, JPEG XR, or WebP
- Don't use an image in the first place, unless 100% required
- Compress images with Imagemin
Minify your CSS
If you use a module bundler or build tool such as Webpack it is possible to minify the CSS files on each build with a plugin for your bundler too. For example, Webpack can be minified with the optimize-css-assets-webpack-plugin.
Now we know that Google is boiling down the experience to visible, stable, and interactive content, it's important to cut down on the size of your bundle as much as possible.
Top tip: Coverage in Chrome DevTools provides a breakdown of unused code.
Preload your most important assets
Even if you are loading optimized and compressed content, some elements of these resources can be buried in file that takes the browser a long time to load. A text file can take extra seconds to load because the font needed for it is in an external stylesheet.
Measure and debug Largest Contentful Paint
The best way to get started on the process of improving Largest Contfulpaint is to measure it using one of the many tools that Google makes available.
You can see your LCP time on Lighthouse 6.0, LCP in Chrome DevTools, and in the Timings section of the Performance panel in Chrome DevTools, you can also see which element is classed as the LCP when you hover over the Related Node field.
The Chrome User Experience Report provides real-world LCP values aggregated at the origin-level and Pagespeed Insights provides a full Core Web Vitals assessment.
Measure how you stack up, then start the journey to optimize the LCP until it is under 2.5 seconds on mobile.
Interested in working with Diginow? Drop us a line at email@example.com.
We are a Creative Web Design Agency based in London & Leicester, specialising in Bespoke Website Design, Web Development, Branding and Digital Marketing.