Measuring Perceived Load Speed
Early web performance metrics like "Page Load Time" or "DOMContentLoaded" measure technical events that don't correlate well with what users actually perceive. A page might fire its load event in 800ms but still show a blank white screen for three seconds while JavaScript initializes.
Largest Contentful Paint (LCP) measures the time from when the page starts loading to when the largest image or text block visible in the user's viewport is rendered. It's a proxy for "when did the user see the main thing they came for?" — which is a much better measure of perceived speed than any technical event.
The "largest element" is determined by area in the viewport. Common LCP elements are hero images, large text headings, or video poster frames. The browser continuously updates its candidate as the page loads and reports the final winner.
Thresholds:
- ✅ Good: 2.5 seconds or less
- ⚠️ Needs Improvement: 2.5s – 4.0s
- ❌ Poor: More than 4.0 seconds
Common causes of poor LCP:
- Slow server response times (the HTML itself arrives late)
- Render-blocking JavaScript or CSS that delays the browser from painting anything
- The LCP image not being preloaded — the browser discovers it late in the parsing process
- Large, unoptimized images (a 4MB JPEG where a 200KB WebP would do)
The most impactful single fix for LCP is often adding <link rel="preload"> for the LCP image, telling the browser to fetch it immediately rather than waiting to discover it in the HTML.