Pick one LCP candidate
LCP should be intentional. On many marketing pages it is the hero heading or a single primary image — not a carousel of decorative assets competing for priority.
Find the current LCP element in field tools, then redesign the above-the-fold so that element is obvious, fast, and stable. Competing heroes almost always lose.
Image policy that protects LCP and CLS
- Use
next/imagewith modern formats (AVIF/WebP) - Set explicit width and height (or aspect ratio) to protect CLS
- Lazy-load below-the-fold media
- Reserve
priority/ fetch priority for the true LCP image only - Avoid huge PNG logos when a compressed SVG or WebP will do
Decorative motion and background video are common LCP killers. If they are not the message, demote them.
Fonts without layout shift
next/font with display: swap and adjusted fallback metrics keeps text readable while reducing jarring swaps. Limit the number of weights and families on the first paint.
INP: less main-thread work
Heavy animation libraries, particles, and large client bundles delay interactions. Keep above-the-fold as Server Components where possible. Defer analytics and non-critical scripts with afterInteractive or lazyOnload.
Break long tasks: split hydration, debounce expensive handlers, and avoid synchronous work on every keystroke or scroll.
TTFB, caching, and measurement
Static generation and CDN caching keep TTFB low. Avoid unnecessary middleware on every request. Cache HTML for marketing routes aggressively when content is not personalized.
Lab scores guide engineering. CrUX field data decides ranking impact. Fix the pages that get real traffic first — not only the homepage in a perfect lab profile.
XYRONEXT builds web experiences with CWV budgets as part of delivery, not an afterthought.