Core Web Vitals: tips to optimise LCP (Largest Contentful Paint)

Continuing on with our series exploring what Core Web Vitals (see our first our first post here) means for WordPress development, we will be looking at LCP (Largest Contentful Paint). We’ll take a look at what it is, and how we can improve page load speeds by optimising the largest assets your site may contain.

What is largest contentful paint?

LCP is the amount of time it takes to render the single largest element, usually an image but can extend to text, videos and SVGs. Google Lighthouse, Google’s site metric analysis & performance tool used to measure all of the core web vitals indicates that sites should try and keep LCP under 2.5 seconds.

LCP usually only considers the content directly in the users viewport, meaning content below the fold will not be considered as LCP is more about the users perceived loading experience.

How to improve LCP?

There are four common causes that can affect LCP:

1. Slow server response
2. Render-blocking assets like JavaScript & CSS
3. Slow resource load times
4. Client-side rendering

Slow server response

A faster server response can improve LCP by providing cached site pages & assets. Establish third-party connections early by using techniques like `preconnect` and if required point users to nearby Content Delivery Networks so speed this up.

Render blocking JavaScript & CSS

Every time CSS or JavaScript files are added to the site, the browser will pause the loading of the rest of the page until those files have finished loading in. The browser will then continue to load until it hits another JavaScript or CSS file and the cycle repeats until the page has fully loaded. These are known as render-blocking assets, which both delay the FCP (First Contentful Paint) and then consequently the LCP.

An easy fix would be to defer the non-critical JavaScript & CSS files which will allow the content to continue loading and thus speed up the initial content seen by the user. Further techniques can be used like minification, removing unnecessary or unused code, inline critical CSS and more.

Slow resource load times

The main resources that can affect load times are usually images, these are the main culprits for slow LCP, especially if they appear above the fold.

There is a lot of different ways in which you can help alleviate the loading of these assets.

Optimise & compress the images

Using WordPress plugins like Smush can help with compression. Compression can also be done during development for site assets with npm packages like imagemin.

Newer image formats

Use newer image formats like WebP, these display similar image quality but at a much lower file size. Be aware some of these newer formats are not supported in older browsers.

Responsive images

Use responsive images, for example you may have a hero image at 1400px wide for your desktop users but you would not want to serve that to your mobiles users as loading would take significantly longer. Using the <picture> element you can serve different image sizes for different screen breakpoints.

Client side rendering

Libraries like React, & Vue have made building single-page web applications incredibly easy. However if these are not optimised correctly it may result in longer loading times. Be sure to use minification, defer unused scripts and remove unnecessary polyfills.

Reducing the reliance of JavaScript can actually be extremely beneficial when it comes to LCP as it is one of the heaviest assets in terms of loading. Using tools like GatsbyJS and Netlify allow you to build sites using JavaScript frameworks like React but then convert them into extremely optimised static HTML pages.

Conclusion 

When it comes to LCP performance, there is no one solution to suit all. It really depends on the user criteria, how the site is designed or what the valuable content is that you wish to show your users.

Many of the solutions above should reduce your sites LCP score significantly and provide a better user experience overall.