LCP (Largest Contentful Paint)
The moment the largest element in the viewport, usually the hero image or the headline, finishes rendering.
Analogy Mental model
When the main course reaches the table. Not when you sat down, not when the menu arrived.
In practice What you actually do
Target under 2.5 seconds. Preload the hero image, serve it at the size it is displayed, put a CDN in front, and remove whatever blocks the first paint. Most of the time the fix is one oversized image and two render-blocking scripts.
Where people get burned Pitfalls
Carousels produce this problem reliably: the first slide is the largest element and usually the heaviest file on the page. A background image cannot be preloaded as effectively as an img element, so the hero belongs in a real image with explicit dimensions.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →