Frontend Performance

When to use

• Diagnosing or improving Core Web Vitals scores (LCP, INP, CLS)
• Reducing JavaScript bundle size or fixing slow load times
• Optimizing images, fonts, or network resource loading
• Choosing between SSR, SSG, RSC, Islands rendering strategies
• Implementing animations without janking the main thread
• Setting up performance monitoring and budgets in CI

Core principles

1. Measure before optimizing — profile first, then fix the specific bottleneck
2. LCP image must never be lazy-loaded — fetchpriority="high" + loading="eager" always
3. Budget enforced in CI — size-limit or Lighthouse CI blocks regressions before they ship
4. Animate transform and opacity only — everything else triggers layout or paint
5. Server state before client state — SSR/SSG gives you LCP for free; hydrate selectively

Reference Files