Search and SEO
What is Largest Contentful Paint?
Largest Contentful Paint measures when the largest visible element in the viewport finishes rendering — usually a hero image, a heading or a text block. It is the closest single metric to "when did the page look useful", and the target is under 2.5 seconds.
Also called: LCP
What actually causes a slow LCP
Rarely total page weight. Almost always the critical path: the chain of requests that must complete before the largest element can paint. A render-blocking stylesheet, a font that is discovered late, or a client-rendered page where nothing paints until a JavaScript bundle downloads and executes.
Fixing it, in order
- Identify the LCP element from field data, not from your own browser on office wifi
- Make sure it is discoverable in the initial HTML rather than injected by script
- Preload only what that element needs — typically one font file and one image
- Serve images in a modern format at the size the viewport actually uses
- Remove render-blocking resources from the critical path
- Never lazy-load the LCP image. It is a direct delay to your worst metric
A real example
A client-rendered site measured 9.0 seconds LCP on mobile — not because anything was large, but because four things had to happen in strict sequence before a single pixel appeared: download the bundle, execute it, render the DOM, then discover and fetch the fonts.
Where this is covered in depth
A definition can only go so far. Core Web Vitals, and the order that actually reduces them covers this properly — 3 minutes, free, no email required.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.