Largest Contentful Paint is the most visible of the core vitals because it is the first thing users actually see appear. In most audits the LCP problem is an image that arrived late or a font that hid the text.
The fix sequence rarely changes: declare the candidate early, make the file small, and give the fetch priority. What changes in 2026 is how strictly the field cofirms the lab.
This guide walks the image pipeline and the font pipeline as one system, because the font delay frequently manufactures the image delay.
The Image Pipeline
Start with the LCP candidate known. The hero image or the largest text block, and preload whatever wins. Preloading an image that is not the LCP wastes budget, so identify first.
Serve modern formats and real sizes. AVIF or WebP with responsive sources and a width that matches the container beat a downgraded 4000 pixel JPEG every time.
Render priority is the final lever. fetchpriority high on the LCP image tells the browser not to wait behind other subresources, and it pairs with the preload to remove the discovery gap.
The Font Pipeline
Self-host fonts. A third-party font host adds a round trip, a cookie hop and a second origin to every page, and the LCP text waits on all of it.
Use font-display swap so the text paints immediately with the fallback, then swaps when the webfont arrives. Combined with metric-matched fallbacks, swap removes the invisible text worst case.
Preload the font file for the hero text and keep the font subset small. A variable font with only the weights in use beats three static files loading separately.
| Font Action | Effect | Risk Managed |
|---|---|---|
| Self-hosting | Removes origin hops | Consistency across users |
| font-display swap | Paints text instantly | Invisible text phase |
| Metric-matched fallback | No layout shift on swap | CLS on font resolve |
| Preload hero font | Removes discovery wait | LCP text delay |
LCP Fixes That Miss
Optimizing the wrong candidate fails silently. Compressing a slider second slide while the LCP text waits on a font changes nothing, so identify the actual largest element before compressing anything.
Preload overshoot is second. Preloading the logo, the font, the background and the hero queues the LCP image behind every preloaded sibling.
Lab-only verification is third. A 0.9 second LCP in Lighthouse on a desktop with cache ignores the field on mobile where the image actually loads cold.
- Compressing non-LCP elements
- Preloading everything and queueing the hero
- Web font hosts adding origin latency
- No field verification after the fix
A Field Verified Pass
Run the pass as one sweep. Identify the candidate, preload it, compress it, prioritize it, fix the fonts, then verify the field LCP for the affected template at the 75th percentile.
Keep a per-template LCP budget. The hero pipeline budget, image weight and font strategy stay documented so the next hero does not silently break the pass.
Match the fix to the failure. If the field shows the text waiting on the font, the image pipeline is irrelevant until the font resolves, and the audit should read the phase that cost the time.
Real-World Considerations
Content management systems complicate the pipeline. Editors upload 4000 pixel photos and the theme serves them untouched, so the fix extends to upload-time resizing and a strict image budget policy.
Client-side headers and consent layers load before the paint. A heavy consent script ahead of the hero manufactures the same delay the image pipeline then gets blamed for.
Video posters and background images follow the same rules. A video preloading with autoplay can starve the hero fetch of priority, so the LCP audit includes the media siblings.
Where the Pass Pays
Every template with a hero pays, which in practice is every site. Start with the templates earning traffic and revenue, and let the discipline spread from there.
For content-heavy pages the same pipeline runs lighter, the candidate is often a heading and the budget is mostly font and first-paint work.
Implementation Checklist
- Identify the true LCP candidate per template
- Preload the LCP image with fetchpriority high
- Serve AVIF or WebP in real responsive sizes
- Self-host fonts and use font-display swap
- Metric-match the font fallback
- Verify field LCP at p75 for the affected template
Final Thoughts
LCP is won on the largest element and verified in the field. The image pipeline and the font pipeline run as one system, and the budget holds them there.
Preload, compress, prioritize and verify. The biggest paint stops being the slowest when the sequence is respected.
Frequently Asked Questions
Because the largest text often paints only when the font resolves. Without swap or a fast font, the text stays invisible and the paint waits on the font network time.
The same rules apply. Preload, size down and prioritize, with the video itself deferred unless autoplay is the point, in which case it owns the budget.
Compare the field LCP distribution before and after at the 75th percentile for the template. Flag regressions when the new distribution shifts back.
