Detailed definition
The most important Core Web Vitals metric. It measures when the largest content element visible on screen (usually the hero image, video poster or h1) has fully loaded. To improve LCP: compress images (WebP/AVIF), use preload, use a CDN, reduce server response time, inline critical CSS and use lazy loading.
Examples
- By using a 200KB WebP in the hero instead of a 2MB JPEG, you can bring LCP down from 4s to 2s.