Largest contentful paint (LCP)

Example

Take the mobile home page of a dental practice with an LCP of 4.2 seconds. The largest element is a 1.8 MB photo of the surgery, and the time splits into four parts:

• 0.6 s — waiting for the server’s first byte;
• 0.8 s — before the browser even discovers the photo, because it is set in the CSS;
• 2.4 s — downloading the photo;
• 0.4 s — drawing it on screen.

That adds up to 4.2 seconds. The same photo as a WebP, at the size the phone actually displays, weighs about 150 KB and downloads in 0.3 s. If the browser requests it straight away rather than after the CSS file, the discovery delay drops to 0.1 s. The new total is 0.6 + 0.1 + 0.3 + 0.4 = 1.4 seconds, comfortably under the 2.5-second threshold, with the design untouched.

Why it matters for a business

LCP is the moment a visitor decides whether to wait, and with paid traffic the cost of that wait is easy to work out. Suppose a Google Ads campaign buys 2,000 clicks a month at €0.50 each, a €1,000 budget. If one visitor in ten gives up during a four-second load, 200 clicks, or €100 a month, never see the offer on your landing page. The one in ten is an assumption for the example; the arithmetic holds at any budget. LCP also counts towards the Core Web Vitals that Google uses in ranking, though with a small weight.

How to improve it

• The main image is served at the right size and in a modern format (WebP or AVIF).
• It loads with high priority and is never lazy-loaded; lazy loading is for images below the first screen.
• If a slider of five heavy photos opens the page, we discuss replacing it with a single image.
• The server answers quickly and pages are cached.
• The CSS and fonts the first screen needs are not queued behind other code.

Measuring the parts of LCP and fixing them in order is the core of our website speed optimisation work.