Performance & SEO Optimization Skill

Core Web Vitals checklist

• LCP (Largest Contentful Paint): identify the LCP element (usually hero image/heading) — use next/image with priority on it, preload critical fonts, avoid render-blocking client-side data fetching for above-the-fold content (prefer Server Components).
• CLS (Cumulative Layout Shift): always set explicit width/height (or next/image's automatic sizing) on images/embeds; reserve space for ads/dynamic content with a fixed-size skeleton; avoid injecting content above existing content after load.
• INP (Interaction to Next Paint): keep the main thread free — avoid large synchronous JS execution on interaction, code-split heavy client components (charts, 3D, rich editors) with next/dynamic, debounce expensive handlers (search-as-you-type).

Practical optimization order (highest impact first)

1. Image optimization (next/image, correct sizes, modern formats) — usually the single biggest win.
2. Font loading (next/font for automatic self-hosting + font-display: swap behavior, subset if using a large font).
3. Code splitting heavy client-only libraries (3D, charting, rich text editors) via next/dynamic so they don't block initial load on pages that don't need them.
4. Server-render/stream content instead of client-fetching on mount.
5. Third-party scripts (analytics, chat widgets) loaded with next/script's strategy="lazyOnload"/afterInteractive — never beforeInteractive unless truly required.