How to Optimize Largest Contentful Paint (LCP)

In our previous article, we discussed Core Web Vitals. In this article, we will focus on the Largest Contentful Paint (LCP) and how to optimize it.

Let’s get started!

Quick Overview

The LCP measures when the page becomes useful to the user or when the main content on the screen has likely loaded.

Before we can discuss how to optimize the LCP, we need to first understand what can cause a poor LCP.

The LCP depends on several factors, such as:

• Time-to-First Byte (TTFB) — the time between the browser’s request for content and receiving the first byte back from the server. It can be affected by slow server response times. The maximum suggested time is 1000ms or 1s (40% of the LCP).

• Resource Load Delay — the time between the TTFB and the LCP loading. It can be affected by inefficient resource prioritization. The maximum suggested time is 250ms (10% of the LCP).

• Resource Load Time — the time to load the LCP resource. It can be affected by unoptimized resources. The maximum suggested time is 1000ms or 1s (40% of the LCP).

• Element Render Delay — the time between loading the LCP and fully rendering the LCP resource. It can be affected by render-blocking resources, such as JavaScript and CSS. The maximum suggested time is 250ms (10% of the LCP).

Steps to Optimize LCP

Now that we know what factors affect LCP, we can discuss what we can do to improve it!

Eliminate unnecessary resource load delay

Make sure the LCP resource starts loading as soon as possible by:

• adding priority hints or preload

• minimizing network contention

• using same-origin resources (when possible)

Eliminate unnecessary element render delay

Ensure the LCP element can render immediately after its resource has finished loading by:

• removing or minimizing render-blocking styles

• deferring render-blocking JavaScript (bonus tip: Angular has relatively recently introduced deferrable views)

Reduce resource load time

Reduce LCP resource load times as much as possible without compromising quality by:

• compressing images

• using modern image formats (such as .avif and .webp)

• using properly sized images

• using a CDN to reduce network distance

Reduce time-to-first-byte

Deliver the initial page as quickly as possible by:

• using a CDN to reduce network distance

• upgrading your server’s hardware for faster processing

• making sure response bodies can be streamed

Conclusions

In this article, we studied how to optimize the Largest Contentful Paint (LCP).

We discussed the factors that affect LCP and what actions we can take to improve it.

In our next article, we will talk about optimizing the Cumulative Layout Shift (CLS). Don’t miss it!

Thank you for reading!