Largest Contentful Paint

We touched on the Largest Contentful Paint, or LCP, metric earlier when we talked about the First Contentful Paint. The Largest Contentful Paint is another of the metrics that make up Google’s Web Vitals. The Largest Contentful Paint measures the time it takes to render the largest content element, which could be an image, heading, text, etc., so that it is visible to the user. This is important because, to the user, if they perceive that content is loading, they are less likely to become annoyed from having to wait until the page loads. The faster content becomes visible within their viewport, the more likely they will stay and interact with your page instead of bouncing from your page. Compared with other metrics, like measuring the DOM load time, the Largest Contentful Paint is a more accurate measurement, as it also factors in what users are seeing and experiencing on the page.

Like the First Contentful Paint, the Largest Contentful Paint is a significant factor within the overall Web Vitals score. In fact, the Largest Contentful Paint makes up 25 percent of the performance score, so developers will want to make sure to pay attention to this metric if it shows up as one of the recommended optimization actions in Lighthouse. Again, in terms of page speed, First Contentful Paint and Time to First Byte are useful, but the Largest Contentful Paint metric is a better representation of how your page performs in front of actual visitors. This can be all the difference between a conversion or a lost visitor.

The Largest Contentful Paint, like the First Contentful Paint, is measured in seconds. Web Developers will want to aim for an LCP under 2.5 seconds or less. Anything over four seconds is considered a poor score and will require further investigation into what is causing a slow First Contentful Paint. Furthermore, this score must reflect well on both desktop and mobile devices. Mobile devices make up over half of the traffic today, so your sites and pages must also be optimized to load fast, even with less-than-ideal network conditions.

There are a variety of issues that can affect the Largest Contentful Paint and we will discuss the methods and techniques that developers can use to improve the Largest Contentful Paint score for their web properties.

Images typically make up a sizeable piece of the total weight of a web page. Ensuring they are optimized is a critical step in reducing the Largest Contentful Paint metric. Within this category, there are multiple techniques that can be carried out to improve and optimize images to help with reducing the length of time it takes to load the page. The good thing about optimizing images is that it is easy to carry out compared to other, more advanced optimization techniques. Techniques like image compression, or image encoding, which uses an algorithm to reduce the size of images, without affecting the overall quality of the image to users, is just one technique.

In addition to that, ensuring that image dimensions are correctly defined helps the browser know how much space is needed for each image, so it does not have to resize images based on the user’s device later, which takes additional time and system resources. This can be done by manually resizing images or using the srcset attribute, which allows developers to set different image width sizes based on the user’s device. Lastly, for sites that utilize a large banner, or hero image, preloading these images allows the browser to prioritize this when rendering, which can improve your Largest Contentful Paint score.

The response time from the server plays another part in helping deliver resources so you can reduce the Largest Contentful Paint on your web pages. One of the first optimization techniques development teams can investigate is optimizing the back-end server code and database queries and making them more inefficient. Related to that, cleaning up or removing any unnecessary third-party plugins can also help, as they consume more system resources and slow down response times. Teams could also opt to invest in upgrading hardware as well, but if the back-end code itself is the bottleneck, then this is only a temporary solution, and you will find yourself back where you started.

Lastly, server-side caching, which is typically carried out by utilizing a set of proxy servers within a CDN, is an effective method to reduce latency. Browser caching is also beneficial, but only if users engage in subsequent visits to your pages. Depending on a visitor’s location, a CDN allows content to be delivered faster, as they are served from a node closer to a visitor’s physical location. Additionally, CDNs (Content Delivery Networks) provide automatic caching from your origin server, which is another added benefit. However, investing in a CDN is not as easy as optimizing page content and code, caching, or improving the delivery of server-side code as we discussed in previous sections. It may require a large investment, so the cost may not outweigh the benefits, so it all depends on the goals and requirements of your business.