How to speed up Largest Contentful Paint (LCP)

26 January 2021 . minute read

As Google prepares to make the Core Web Vitals a direct ranking factor, we're looking at how to optimize each metric in detail. First up is the Largest Contentful Paint (LCP). Read our guides to First Input Delay and Cumulative Layout Shift.

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.

how-to-speed-up-largest-contentful-paint-1

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.

how-to-speed-up-largest-contentful-paint-2

The most common causes of a poor LCP are:

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • 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.

how-to-speed-up-largest-contentful-paint-3

Stage two: Render your content faster

Clear the path for the LCP

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.

  • 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

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).

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.

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.

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.

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.

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.

how-to-speed-up-largest-contentful-paint-4

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.

how-to-speed-up-largest-contentful-paint-5

Measure how you stack up, then start the journey to optimize the LCP until it is under 2.5 seconds on mobile.

Article:Source

Let's Start a New Project Together

But want to check we are good fit. Let us know your ideas below using our project planner and we’ll see how we can help.