Glossary
LCP (Largest Contentful Paint)
LCP is the time it takes for the largest visible element on a webpage to render. It's one of Google's three Core Web Vitals.
Largest Contentful Paint (LCP) measures when the largest above-the-fold element — usually a hero image, a hero video, or a headline — finishes rendering. It's a proxy for perceived load speed: the moment the user feels the page is ready, not the moment all assets finish loading.
Google's threshold: LCP under 2.5 seconds is 'good', 2.5–4.0 is 'needs improvement', and over 4.0 is 'poor'. The threshold is measured at the 75th percentile of real-user data — meaning 75% of your visitors need to hit the bar for the page to qualify as 'good'.
Common LCP killers: heavy hero images that aren't optimized (unoptimized JPEGs over 1MB), hero videos without poster frames, render-blocking CSS / JavaScript above the fold, slow server response times (TTFB > 600ms), and missing image dimensions causing late-discovery of the LCP element.
Fixes ranked by impact: serve images via a CDN with modern formats (WebP, AVIF); use next/image (or equivalent) with priority + correct sizes attributes; pre-connect to image origins via <link rel='preconnect'>; defer non-critical CSS; reduce the JavaScript bundle that runs before the first paint.
Server-rendered pages (SSR / SSG) typically achieve sub-1.5s LCP without effort because the HTML — including the LCP element — lands in the browser fully formed. Client-rendered pages (CRA-style SPAs) struggle with LCP because the browser has to download, parse, and execute JavaScript before any content renders.
Example
Compressing a 4MB hero image down to 280KB (WebP) and serving it via next/image with a priority hint can drop LCP from 3.8s to 1.2s on the same page. Adding a <link rel='preconnect'> to the image CDN squeezes out another 100ms.