​
Optimization Techniques

Use these techniques to hit the Performance Budgets.

​
Code splitting and lazy loading

const Page = lazy(() => import("./Page"));
<Suspense fallback={<Skeleton />}>
  {" "}
  <Page />{" "}
</Suspense>;
Tips:
  • Split routes and heavy components
  • Avoid hydrating full‑screen loaders; render meaningful content first

​
Preload critical resources

<link
  rel="preload"
  href="/fonts/inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link
  rel="preload"
  href="/styles/critical.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>

​
Responsive images

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"
  loading="lazy"
  alt="Hero"
/>

​
Use modern formats with fallbacks

<picture>
  <source srcset="img.avif" type="image/avif" />
  <source srcset="img.webp" type="image/webp" />
  <img src="img.jpg" alt="" />
</picture>

​
Server headers

res.set("Cache-Control", "public, max-age=31536000, immutable");
res.set("Vary", "Accept-Encoding");

​
Network hints

<link rel="preconnect" href="https://api.base.org" />
<link rel="prefetch" href="/next-screen.js" />

​
JS performance

  • Prefer transform/opacity animations
  • Memoize expensive computations
  • Avoid large polyfills; target only needed features

​
Monitoring and budgets

  • Integrate Web Vitals reporting
  • Set Lighthouse budgets and run in CI