The TL; DR
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.
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:
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.
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.
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.
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.
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.
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.
When a browser renders your content, it first has to parse the HTML markup into a DOM tree. Now, if this comes across external stylesheets or synchronous JavaScript tags will pause this task to deal with these external factors.
Scripts and stylesheets are both render-blocking resources that delay FCP, and consequently LCP. To prevent these from blocking your LCP from loading, defer any non-critical JavaScript and CSS. In fact, you should also remove any unused CSS entirely or move it to another stylesheet.
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.
Improving how long it takes to load and render these types of images will directly speed up LCP. To do this:
For text compression, compression algorithms will reduce the HTML, CSS, JavaScript weight of text files when they are sent between the server and browser. Brotli offers the best compression rate, but is not supported by every browser. (It is supported for 94.57% of users, though).
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.
Cut down on any unnecessary Javascript Downloading Javascript prevents content on your site from becoming visible or being interactive. Even if the JavaScript is asynchronous and not render-blocking, this JS will battle for bandwidth while it's downloading, which drains mobile performance.
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.
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.
If you have resources that need be prioritized, such as the elements that form your LCP, use to fetch them sooner. Preload critical assets that form the first viewport such as fonts, above-the-fold images, and critical-path CSS or JavaScript. it's important to cut down on the size of your bundle as much as possible.
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.
Article:Source
Interested in working with Diginow? Drop us a line at hello@diginow.co.uk.
We are a Creative Web Design Agency based in London & Leicester, specialising in Bespoke Website Design, Web Development, Branding and Digital Marketing.
Whether it’s a new venture or existing brand. Let us know your ideas below using our project planner and we’ll see how we can help.
