What actually moves Largest Contentful Paint

Largest Contentful Paint measures when the biggest piece of content appears. Google's thresholds are published: 2.5 seconds or less is good, over 4 seconds is poor.

Most advice on improving it is an undifferentiated checklist. In practice four things account for nearly all of the movement.

1. What the LCP element actually is

You cannot fix it until you know which element the browser picked, and it is frequently not the one you assume.

Open DevTools, run a Lighthouse report, and read the LCP entry — it names the element. On a surprising number of sites it is a paragraph rather than the hero image, because the hero has not painted yet.

2. Whether it waits for JavaScript

If the LCP element is hidden until a script runs — a scroll reveal, a client-rendered hero, a carousel that mounts on hydration — then LCP is measured from after your bundle downloads, parses and hydrates on the visitor's device.

This is the single largest cause we see, and it is invisible on a developer's machine with a warm cache. Render the final state on the server and animate from it rather than to it.

3. How the image is delivered

If the LCP element is an image, four things matter and they compound:

• Format — WebP or AVIF rather than PNG or JPEG.
• Dimensions — serving a 3000px image into a 800px slot wastes most of the bytes.
• Priority — `fetchpriority="high"` on the hero, and never lazy-load it.
• Discovery — an image referenced only from CSS is found later than one in the HTML.

4. What blocks the render

Render-blocking CSS and synchronous scripts in the head delay everything after them. Fonts are the common offender: a webfont loaded without `font-display: swap` can hold text invisible until it arrives.

What barely matters

Minification, image compression beyond a sensible quality, the framework you chose, and server response time once it is already under a couple of hundred milliseconds. These are worth doing and they will not move LCP from poor to good.

Does LCP affect rankings?

Core Web Vitals are a confirmed ranking signal, though a modest one next to relevance and content quality. The stronger argument is commercial rather than algorithmic: visitors do not distinguish between slow and broken, and a hero that arrives late has already lost the attention it was meant to capture.

How do I measure LCP on my own site?

Lab data comes from Lighthouse or our website scorecard, which runs the same engine against a mobile profile. Field data — what real visitors experienced — comes from Search Console or the Chrome UX Report, and it is the one that counts, because it reflects real devices and real networks rather than your laptop.

Our note on animations and Core Web Vitals covers the JavaScript cause in more depth, including the version of it we found on this site.