The moving parts

Largest Contentful Paint is the meta moment a page proves itself. Here is the checklist that took one project from 4.2s to 1.1s.

1. Serve the hero as WebP, sized to container

A 300KB PNG optimized to a 45KB WebP at the exact rendered width cut down the biggest single asset we had. Use `srcset` and `sizes` liberally.

2. Preload the critical font

Fonts are a top LCP contributor. Fetch the subset, add `font-display: swap`, and preload the main webfont with a `crossorigin` hint.

3. Inline what first paint cannot wait for

The darkest pattern is blocking on a render-blocking script. Move it to `defer`, inline critical CSS above the fold and let the full stylesheet load async.

4. Give the server nothing to do

Static pages should be static. CDN or not, cache aggressively with immutable headers on hashed assets, and never run dynamic queries on the critical path.

Result

1.1s LCP, 100/100 Lighthouse performance, zero regressions. The playlist: measure, optimize the biggest asset, repeat.