How To Improve Largest Contentful Paint for Faster Load Times

Largest Contentful Paint (LCP) is a Core Web Vital metric that tracks how many seconds it takes for your page’s most data-intensive, above-the-fold element to load. These elements can be text, images, elements with background images, or even videos.

Optimising your page’s LCP has an outsized impact on page speed and user experience. A faster LCP is a leading indicator of when your page’s most critical content appears and how fast the overall load process is—both things people like in a website. It’s important that Google has even made LCP and the other Core Web Vital metrics a ranking factor.

Many websites are hampered by slow page speeds because they aren’t optimised for a fast Largest Contentful Paint load time. These four proven methods will help you find and correct performance issues holding your page back by offering a set of solutions that range from basic to advanced. By implementing even a few of these suggestions, you’ll get faster LCP load times, lower bounce rates, and a better overall experience for your audience.

1. Reduce the size of your page’s largest element

Reducing the size of your LCP element is often the easiest solution to a slow LCP load time. However, it’s essential to figure out your page’s LCP element before trying to reduce it. Many people assume it’s the hero image, but often it’s the H1 or H2 text elements. You can find your page’s LCP element using a tool like Lighthouse or Calibre.

Now that you know what your LCP element is, here are some steps you can take to reduce its overall size:

For image elements:

• Use the right format: Use SVG for vector assets and replace JPEG and PNG with either AVIF or WebP.
• Serve the right image size: Different devices or viewports require different-sized images. If the image is too big, the browser needs to reload the image in a more appropriate size. An easy way to serve dynamic image sizes is with a CDN or WordPress plugin. However, you can also create the same effect using the srcset attribute or <picture> element.
• Compress images: Many image files are larger than they need to be. Use an online image compressor to reduce file size while keeping the quality high.

For text elements:

• Choose the right font file type: Typefaces that support WOFF2 are the best for now as they’re widely supported and use compression, unlike WOFF.
• Use self-hosted fonts: Web fonts may be easy to find, but they’re also usually slower and less reliable. Choose self-hosted fonts to keep LCP load times fast and consistent. Use Calibre’s third-party reports to see how much these web fonts are slowing down your pages.
• Remove unnecessary weights and variants: Reduce the overall size of your font file by removing unused font weights from the pack. Learn more in our guide to performance typography.
• Don’t use web fonts: The fastest way to render text in a browser is not to use web fonts at all. Where possible, use system font stacks as a faster alternative.

For video elements:

• Use video compression: MP4s compressed with h264 provide great compression with GPU decoding. GIFs are slow to load and provide poor image quality—avoid them at all costs.
• Reduce the file size: Do this by compressing the video file, removing any audio in an otherwise muted video, and editing unnecessary portions.
• Try a CDN: Content Delivery Networks (CDNs) help serve up images and videos more quickly by automatically compressing and optimising image files for quick delivery.

2. Improve your Time to First Byte metric

Time to First Byte (TTFB) measures how quickly a web server reacts when visitors want to load your page. Ideally, your TTFB should be faster than 300 ms, but any improvements to this metric will speed up your LCP.

The first and easiest fix is to upgrade your hosting. Hosting matters, especially when it comes to page speed and website performance. When picking which hosting company to go with, check to see if they have dedicated servers with fast machine specs, especially CPU, GPU, and memory.

However, not everyone is in a position to switch their hosting. In that case, here are some other ways to improve your TTFB:

• Use a CDN: One benefit of CDNs is that they geographically distribute your content so it’s closer to your audience. Using a CDN allows you to deliver critical content as soon as possible.
• Take advantage of caching: Caching allows you to save a copy of your content on the reader’s browser or the server for faster delivery the next time they visit. Check your cache-control headers to ensure you’re taking full advantage by setting where and how long it’s stored. For people not familiar with caching, some CMSs like WordPress have plugins that’ll help you manage your caching options in a more user-friendly way.
• Implement SSR and ISR: Server-Side Rendering (SSR) and Incremental Static Regeneration (ISR) are more advanced techniques. SSR helps speed up the delivery of content that is updated frequently. ISR is perfect for content that rarely changes, like blog posts. Learn more about both of these in our article on the Next.js framework.
• Use an APM product for server-side monitoring: Chances are that your server-side framework integrates with one of the many APM products on the market. An APM provides your development team with everything needed to understand why a server-side rendered page is slow.
• Monitor changes: TTFB changes often and improves best when it’s constantly monitored. Using a tool like Calibre allows you to monitor TTFB so you can experiment and see how your efforts are impacting page speed.

3. Audit your page’s load priorities

Pages can only load so much so quickly. Make sure your page’s LCP and other critical elements are the top priority so that browsers don’t waste time and resources on elements that the browser can load later.

Here are some tactics you should use to get your load priorities in order:

• Sort out lazy load: Lazy loading images delays them from loading until a reader needs to see them, which frees up the thread for other processes. Generally, lazy loading is a good thing, but make sure to exempt any images that are your LCP element. Lazy loading them will only delay your LCP.
• Try preloading: Preloading allows you to tell the browser about critical elements you want to load first. Setting up preloading for critical images and fonts will help them load faster. Set up preloading by editing your header CSS or using a plugin (if available for your CMS).
• Use font-display: Font-display is a CSS property that allows you to control how (or if) fonts are displayed while they’re being loaded. “Swap” is the option we recommend for the fastest results.
• Prioritise critical requests: These advanced techniques allow you to optimise what your browser works on to improve LCP. To get the most out of your page’s load priorities, try reducing critical chain requests, adding priority hints, and deferring non-essential scripts.

4. Get rid of any render-blocking resources

Render-blocking resources are URLs that hold up your most critical elements during the loading process. Identifying and pruning any render-blocking resources frees the browser to focus on your Largest Contentful Paint element, meaning it should render faster.

Some strategies to accomplish this include:

• Minify and compress CSS and JavaScript: Use a tool like Terser or cssnano to minify your JavaScript and CSS files, making them smaller and easier to download. For compression, use a CDN, as their services often include compression by default.
• Use async or defer on scripts: Use async and defer attributes to ensure that <script> tags are non-blocking. Avoid using scripts that include document.write.
• Prioritise critical CSS and JavaScript: To speed things up even more, there are several techniques you can use to prioritise the most important CSS and JavaScript for your page. This includes critical CSS, where you inline the most important CSS for quicker load times. You can use code-splitting to load essential JavaScript first.
• Reduce third-party scripts: Some third-party scripts can slow down your page load times. Use a tool like Calibre to see what third-party scripts are running and how much time they add to the rendering process.

Better overall LCP metrics require better data

If you’re serious about improving your Core Web Vitals and Largest Contentful Paint, you need a constant stream of reliable data. That way, you see where optimisations have worked, and new problems have unexpectedly cropped up.

Calibre allows you to track the Web Vitals of an unlimited number of pages and will alert you when any surprise spikes need to be addressed. Try Calibre free for 15 days to start improving your site performance. Not sure if you’re ready? No worries, see how your website performs with our Core Web Vitals Checker—no signup required and always free every time.