Improve LCP to under 2.5 seconds
Largest Contentful Paint is the time until the biggest visible element renders. Google's good threshold is 2.5 seconds at the 75th percentile of field data. Measure with CrUX or PageSpeed Insights, identify the element, then fix server response, resource load delay, load duration and render delay.
Why this matters
Find the LCP element first, then remove its four delays.
Before you start
- Access to field data (CrUX or Search Console)
- Ability to change markup and asset delivery
How to apply it
Identify the LCP element and its timing
Open the Performance panel, load the page on a throttled mobile profile and read the LCP marker. Record time to first byte, resource load delay and render delay separately.
Check: The LCP element is named in the trace and its four phase durations are recorded.
Remove the dominant delay
Preload hero images with fetchpriority=high, remove loading=lazy from above-the-fold media, and serve the HTML from an edge cache. Avoid client-only rendering for the hero.
Check: The LCP image request starts before the first render-blocking resource finishes loading.
Confirm with field data
After deploying, check the Core Web Vitals report or CrUX for the template. Field data lags, so compare four-week windows.
Check: Field p75 LCP for the URL group is 2.5 seconds or less.
Source: seo-mcp playbook · curated entry · report an error
Framework notes
nextjs-app
Use `next/image` with `priority` on the hero so the framework emits a preload and fetchpriority=high; avoid `loading="lazy"` on hero media. Load the display font with `next/font` in `app/layout.tsx` so its CSS is inlined and preloaded instead of render-blocking.
astro
Use `<Image />` from `astro:assets` for the hero and add `loading="eager"` with `fetchpriority="high"`; the asset pipeline emits optimized dimensions.