Performance optimization

Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.

How it works

• Identify performance bottlenecks in code and assets

• Prioritize by impact on Core Web Vitals

• Provide specific optimizations with code examples

• Measure improvement with before/after metrics

Performance budget

| Total page weight | ; rel=preload; as=image (and similar for critical CSS/fonts) so the browser starts fetching before the 200 OK lands. Cloudflare reports [20–30% LCP improvements](https://blog.cloudflare.com/early-hints-performance/) on image-heavy pages. Requires HTTP/2+ and is supported by Chromium-based browsers; other browsers ignore the 103 and fall through to the 200 — safe to enable. CDNs (Cloudflare, Fastly, Akamai) can synthesize 103s automatically from prior responses; on your own origin, emit them from the same handler that issues the 200.

Resource loading

Preconnect to required origins:

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Preload critical resources:

<!-- LCP image -->

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">

<!-- Critical font -->

<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>

Prerender likely-next navigations with the Speculation Rules API:

<script type="speculationrules">

{

  "prerender": [{

    "where": { "href_matches": "/*" },

    "eagerness": "moderate"

  }]

}

</script>

moderate triggers after a ~200ms hover — usually intent-correlated, rarely wasted. See core-web-vitals → LCP for the full discussion of eagerness tradeoffs and the prerenderingchange gating you'll need for analytics.

Defer non-critical CSS:

<!-- Critical CSS inlined -->

<style>/* Above-fold styles */</style>

<!-- Non-critical CSS -->

<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<noscript><link rel="stylesheet" href="/styles.css"></noscript>

JavaScript optimization

Defer non-essential scripts:

<!-- Parser-blocking (avoid) -->

<script src="/critical.js"></script>

<!-- Deferred (preferred) -->

<script defer src="/app.js"></script>

<!-- Async (for independent scripts) -->

<script async src="/analytics.js"></script>

<!-- Module (deferred by default) -->

<script type="module" src="/app.mjs"></script>

Code splitting patterns:

// Route-based splitting

const Dashboard = lazy(() => import('./Dashboard'));

// Component-based splitting

const HeavyChart = lazy(() => import('./HeavyChart'));

// Feature-based splitting

if (user.isPremium) {

  const PremiumFeatures = await import('./PremiumFeatures');

}

Tree shaking best practices:

// ❌ Imports entire library

import _ from 'lodash';

_.debounce(fn, 300);

// ✅ Imports only what's needed

import debounce from 'lodash/debounce';

debounce(fn, 300);

Image optimization

Format selection

Responsive images

<picture>

  <!-- AVIF for modern browsers -->

  <source

    type="image/avif"

    srcset="hero-400.avif 400w,

            hero-800.avif 800w,

            hero-1200.avif 1200w"

    sizes="(max-width: 600px) 100vw, 50vw">

  <!-- WebP fallback -->

  <source

    type="image/webp"

    srcset="hero-400.webp 400w,

            hero-800.webp 800w,

            hero-1200.webp 1200w"

    sizes="(max-width: 600px) 100vw, 50vw">

  <!-- JPEG fallback -->

  <img

    src="hero-800.jpg"

    srcset="hero-400.jpg 400w,

            hero-800.jpg 800w,

            hero-1200.jpg 1200w"

    sizes="(max-width: 600px) 100vw, 50vw"

    width="1200"

    height="600"

    alt="Hero image"

    loading="lazy"

    decoding="async">

</picture>

LCP image priority

<!-- Above-fold LCP image: eager loading, high priority -->

<img

  src="hero.webp"

  fetchpriority="high"

  loading="eager"

  decoding="sync"

  alt="Hero">

<!-- Below-fold images: lazy loading -->

<img

  src="product.webp"

  loading="lazy"

  decoding="async"

  alt="Product">

Font optimization

Loading strategy

/* System font stack as fallback */

body {

  font-family: 'Custom Font', -apple-system, BlinkMacSystemFont,

               'Segoe UI', Roboto, sans-serif;

}

/* Prevent invisible text */

@font-face {

  font-family: 'Custom Font';

  src: url('/fonts/custom.woff2') format('woff2');

  font-display: swap; /* or optional for non-critical */

  font-weight: 400;

  font-style: normal;

  unicode-range: U+0000-00FF; /* Subset to Latin */

}

Preloading critical fonts

<link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin>

Variable fonts

/* One file instead of multiple weights */

@font-face {

  font-family: 'Inter';

  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');

  font-weight: 100 900;

  font-display: swap;

}

Caching strategy

Cache-Control headers

# HTML (short or no cache)

Cache-Control: no-cache, must-revalidate

# Static assets with hash (immutable)

Cache-Control: public, max-age=31536000, immutable

# Static assets without hash

Cache-Control: public, max-age=86400, stale-while-revalidate=604800

# API responses

Cache-Control: private, max-age=0, must-revalidate

Service worker caching

// Cache-first for static assets

self.addEventListener('fetch', (event) => {

  if (event.request.destination === 'image' ||

      event.request.destination === 'style' ||

      event.request.destination === 'script') {

    event.respondWith(

      caches.match(event.request).then((cached) => {

        return cached || fetch(event.request).then((response) => {

          const clone = response.clone();

          caches.open('static-v1').then((cache) => cache.put(event.request, clone));

          return response;

        });

      })

    );

  }

});

Runtime performance

Avoid layout thrashing

// ❌ Forces multiple reflows

elements.forEach(el => {

  const height = el.offsetHeight; // Read

  el.style.height = height + 10 + 'px'; // Write

});

// ✅ Batch reads, then batch writes

const heights = elements.map(el => el.offsetHeight); // All reads

elements.forEach((el, i) => {

  el.style.height = heights[i] + 10 + 'px'; // All writes

});

Debounce expensive operations

function debounce(fn, delay) {

  let timeout;

  return (...args) => {

    clearTimeout(timeout);

    timeout = setTimeout(() => fn(...args), delay);

  };

}

// Debounce scroll/resize handlers

window.addEventListener('scroll', debounce(handleScroll, 100));

Use requestAnimationFrame

// ❌ May cause jank

setInterval(animate, 16);

// ✅ Synced with display refresh

function animate() {

  // Animation logic

  requestAnimationFrame(animate);

}

requestAnimationFrame(animate);

Virtualize long lists

// For lists > 100 items, render only visible items

// Use libraries like react-window, vue-virtual-scroller, or native CSS:

.virtual-list {

  content-visibility: auto;

  contain-intrinsic-size: 0 50px; /* Estimated item height */

}

Smooth navigations with View Transitions

The View Transitions API lets the browser cross-fade (or custom-animate) between two DOM states using a single GPU-composited snapshot — no double-render, no layout thrash, and the snapshot doesn't count toward CLS.

Same-document (SPA-style) — Baseline 2026:

// Wrap the DOM mutation that swaps the view

function navigate(newView) {

  if (!document.startViewTransition) return swapDOM(newView);

  document.startViewTransition(() => swapDOM(newView));

}

Cross-document (MPA-style) — Chromium-stable, progressive enhancement elsewhere:

/* On both source and destination pages */

@view-transition { navigation: auto; }

That's the entire integration — same-origin navigations now fade automatically. To opt specific elements into shared-element transitions (e.g. a thumbnail expanding into a hero), give them a matching view-transition-name:

.product-thumb[data-id="42"], .product-hero { view-transition-name: product-42; }

Pair this with Speculation Rules (above) for instant + animated navigations.

Third-party scripts

Load strategies

// ❌ Blocks main thread

<script src="https://analytics.example.com/script.js"></script>

// ✅ Async loading

<script async src="https://analytics.example.com/script.js"></script>

// ✅ Delay until interaction

<script>

document.addEventListener('DOMContentLoaded', () => {

  const observer = new IntersectionObserver((entries) => {

    if (entries[0].isIntersecting) {

      const script = document.createElement('script');

      script.src = 'https://widget.example.com/embed.js';

      document.body.appendChild(script);

      observer.disconnect();

    }

  });

  observer.observe(document.querySelector('#widget-container'));

});

</script>

Facade pattern

<!-- Show static placeholder until interaction -->

<div class="youtube-facade"

     data-video-id="abc123"

     onclick="loadYouTube(this)">

  <img src="/thumbnails/abc123.jpg" alt="Video title">

  <button aria-label="Play video">▶</button>

</div>

Measurement

Key metrics

Testing commands

# Lighthouse CLI

npx lighthouse https://example.com --output html --output-path report.html

# Web Vitals library

import {onLCP, onINP, onCLS} from 'web-vitals';

onLCP(console.log);

onINP(console.log);

onCLS(console.log);

References

For Core Web Vitals specific optimizations, see Core Web Vitals.