Slow Largest Contentful Paint (LCP)

LCP is how long the largest image or text block takes to appear. Good is 2.5 seconds or less. Split the time into server response, load delay, download and render delay, then fix the largest part.

Book a Free Consultation

Fix the parts together

Shrinking an image does not help if the browser is still waiting on a render-blocking script. Check all four parts before deciding what to change.

Diagnose it

Symptoms, checks and fixes

Common symptoms

An "LCP issue" in the Core Web Vitals report.
The main hero image or heading appears late on phones.

Checks to run

Diagnostic checks
Check	How to tell	Fix
Is the server slow to respond?	Measure time to first byte. Redirects and cache misses add to it.	Cut redirects, cache pages, and serve from a CDN close to visitors.[1]
Is the LCP image found late?	Check whether the hero image is in the initial HTML or added later by script or CSS.	Put it in the HTML or preload it, and give it fetchpriority="high".[1]
Is the LCP image lazy-loaded?	Look for loading="lazy" on the hero image.	Remove lazy loading from the LCP image; web.dev says never to lazy-load it.[1]
Is the image too heavy?	Check the file size and format of the hero image.	Compress it and use a modern format such as AVIF or WebP.[1]