Largest Contentful Paint (LCP)
How long until the biggest thing on the first screen (usually the hero image or headline) actually renders. Under 2.5s passes.
See it
What it is
LCP times how long it takes for the biggest content element in the viewport to render: usually a hero image, a background image, a video poster, or a big block of headline text. It is the browser's best guess at the moment a visitor thinks 'ok, the page is here.' Under 2.5s is a pass, over 4s is a fail.
Break a bad LCP into its four phases before fixing anything: TTFB (server think time), resource load delay (how late the browser even discovered the image), resource load duration (the download itself), and render delay (blocked by CSS or JS after the bytes arrived). Load delay is usually the villain, and it is usually cheap to fix: put the hero in the initial HTML where the preload scanner finds it, and mark it fetchpriority='high'. Reach for a preload only when the candidate stays hidden from the parser, like a CSS background image or an element injected after hydration; preloading something already sitting in the markup buys nothing and competes with the rest of the queue.
Gotcha: lazy-loading the hero image. A blanket loading='lazy' on every image, or an image only injected after React hydrates, hides the LCP candidate from the preload scanner and adds a full round trip. Also note the LCP element is not fixed: it can change as the page paints, and it differs between phone and desktop layouts.
Ask AI for it
Optimize this page's Largest Contentful Paint. First identify the LCP candidate on mobile and desktop, then measure its four-phase breakdown: TTFB, resource load delay, resource load duration, render delay. Fix the phase that dominates instead of applying everything at once. Slow TTFB: cache or stream the HTML. Long load delay: render the candidate in the initial HTML so the preload scanner sees it, and add a <link rel='preload'> (plus preconnect to its host) only if it stays late-discovered, such as a CSS background image or a client-injected element; skip the preload when it is already in the markup. Long download: right-size it with responsive srcset matched to the real layout width, in whichever modern format actually encodes smaller for that image. Long render delay: clear the render-blocking CSS and JS ahead of it. Put fetchpriority='high' on an eager LCP image, remove any loading='lazy' from it, and leave every below-the-fold image lazy. Target LCP under 2.5s on a throttled 4G mid-range phone and show the before and after phase breakdown.