What is LCP (Largest Contentful Paint)?
Answer
LCP (Largest Contentful Paint) measures when the largest content element visible in the viewport (image, video poster, or block-level text) finishes rendering. It represents the perceived loading speed from the user's perspective. Good: <2.5 seconds. Needs improvement: 2.5–4 seconds. Poor: >4 seconds. Common LCP elements: hero images, H1 headings, above-the-fold video thumbnails. Common causes of poor LCP: slow server response (TTFB), render-blocking JavaScript and CSS, slow image loading (large unoptimized images), client-side rendering (JS renders the content, delaying LCP). Fixes: optimize server/TTFB, preload the LCP image (<link rel="preload" as="image">), convert images to WebP/AVIF, use a CDN, avoid lazy-loading the LCP image, eliminate render-blocking resources. LCP is the most impactful metric for perceived performance — users notice fast LCP as a "page loaded quickly."