Improving Largest Contentful Paint (LCP): A Practical Guide

Largest Contentful Paint (LCP) is the Core Web Vital that measures how long it takes for the largest visible element above the fold — typically a hero image, a large heading, or a featured video — to load and render. A good LCP score is under 2.5 seconds. An LCP above 4 seconds is classed as poor and contributes to a failing Core Web Vitals assessment, which Google factors into its page experience ranking signal. It's also simply a bad experience: research shows that pages taking more than three seconds to show meaningful content lose a significant proportion of mobile visitors before they've seen anything at all.

At Xpose, LCP optimisation is part of every site performance audit we conduct, and it's one of the Core Web Vitals that most commonly needs attention on websites built without performance as a priority. The good news is that slow LCP is almost always fixable with a defined set of changes, and the improvements are measurable within days using Google Search Console and PageSpeed Insights. This guide covers the main causes of slow LCP and the practical steps to address each one.

What Causes Slow LCP

LCP is slow for one of four reasons, usually in combination. First, a slow server response time (Time to First Byte, or TTFB) means the browser waits before it even begins downloading any content — if the server takes more than 600ms to respond, LCP will struggle to reach 2.5 seconds regardless of what else you optimise. Second, render-blocking resources — CSS and JavaScript files that the browser must download and process before it can render the page — delay when the main content appears. Third, a large or poorly optimised LCP resource — typically an oversized hero image — takes too long to download even after the browser has started loading it. Fourth, slow resource load time caused by the asset being hosted on a slow server or not being prioritised by the browser.

Diagnose which factor is dominant for your site using Google PageSpeed Insights or the Chrome DevTools Performance tab. PageSpeed Insights flags the specific LCP element on your page (hover over the LCP timing in the report to see which element it is) and highlights the breakdown of time spent: TTFB, resource load delay, resource load time, and render delay. Knowing which phase is largest tells you where to focus your optimisation effort.

Optimising Your LCP Element

If your LCP element is a hero image — which is the most common case — the fastest wins are image format and size optimisation. Serve images in WebP format, which is 25–35% smaller than JPEG at equivalent quality and is supported by all modern browsers. Resize the image to the actual dimensions it will be displayed at on the largest screen size where it appears — serving a 4,000-pixel-wide photo for a 1,200-pixel-wide hero section wastes significant bandwidth. Set explicit width and height attributes on the image element to allow the browser to allocate space before the image loads, preventing layout shifts.

Critically, add the fetchpriority="high" attribute to your LCP image and ensure it is not lazy-loaded (remove loading="lazy" from the LCP element — lazy loading is valuable for below-the-fold images but actively harmful for the LCP element). If your hero image is defined in CSS as a background-image rather than an HTML <img> element, the browser discovers it later in the render process — converting it to an HTML img element with fetchpriority="high" typically reduces LCP by several hundred milliseconds. At Xpose, these two changes — format/size optimisation and fetchpriority — are the first things we check for any site with an LCP image problem, and together they often deliver the majority of the improvement needed.

Server Response, Render-Blocking Resources, and CDN

If your TTFB is over 600ms, investigate your hosting and server configuration. Enable caching at the server level — most WordPress hosts support page caching via the hosting control panel or through plugins like WP Rocket or W3 Total Cache. If you're on shared hosting and experiencing consistently high TTFB, a hosting upgrade to managed WordPress hosting (such as Kinsta or WP Engine) or a VPS can produce dramatic LCP improvements. A content delivery network (CDN) reduces TTFB for geographically distributed users by serving content from a node close to the user — for UK-based businesses targeting UK users, a CDN is less critical but still reduces load time for assets like images and scripts.

For render-blocking resources, use the Opportunities section of PageSpeed Insights to identify specific files that are delaying page rendering. CSS files loaded in the <head> are render-blocking by default — critical CSS (the styles needed to render above-the-fold content) should be inlined in the <head>, with the full stylesheet loaded asynchronously. JavaScript files should generally be loaded with the defer or async attribute to prevent them blocking the main render thread. These changes require development work but are among the highest-impact performance improvements available for sites with complex CSS and JavaScript dependencies.