Web Performance Optimization Cheat Sheet

// Using the web-vitals libraryimport { onLCP, onINP, onCLS } from 'web-vitals';onLCP(console.log);  // Largest Contentful Paint - loadingonINP(console.log);  // Interaction to Next Paint - responsivenessonCLS(console.log);  // Cumulative Layout Shift - visual stability// Programmatic timing via PerformanceObservernew PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    console.log(entry.name, entry.startTime);  }}).observe({ type: 'largest-contentful-paint', buffered: true });

// Native lazy-loaded image// <img src="hero.jpg" loading="lazy" alt="Hero" width="800" height="400">// Dynamic import for route-level code splittingconst Chart = React.lazy(() => import('./Chart'));function Dashboard() {  return (    <React.Suspense fallback={<Spinner />}>      <Chart />    </React.Suspense>  );}

<!-- Preload the LCP image so the browser fetches it immediately --><link rel="preload" as="image" href="/hero.webp"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://api.example.com"><!-- Cache-Control for static, fingerprinted assets --><!-- Cache-Control: public, max-age=31536000, immutable --><!-- HTML - must revalidate since it references fingerprinted assets --><!-- Cache-Control: no-cache -->

<!-- Boost the LCP image above the browser's default heuristic priority --><img src="/hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600" /><!-- Deprioritize offscreen/below-the-fold images competing for bandwidth --><img src="/related-1.webp" loading="lazy" fetchpriority="low" alt="Related" /><!-- Works on preload and fetch() too --><link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /><script>  fetch('/api/critical-data', { priority: 'high' });</script>

// Long synchronous work blocks the main thread and delays the next paint// after a click/keypress - split it into yieldable chunks.async function processLargeList(items) {  for (let i = 0; i < items.length; i++) {    doExpensiveWork(items[i]);    if (i % 50 === 0) {      // Yield back to the browser so pending input/paint can run      if ('scheduler' in window && 'yield' in scheduler) {        await scheduler.yield();      } else {        await new Promise((resolve) => setTimeout(resolve, 0));      }    }  }}// Detect long tasks in production via PerformanceObservernew PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    if (entry.duration > 50) console.warn('Long task:', entry.duration);  }}).observe({ type: 'longtask', buffered: true });

self.addEventListener('fetch', (event) => {  if (event.request.destination !== 'script' && event.request.destination !== 'style') return;  event.respondWith(    caches.open('assets-v1').then(async (cache) => {      const cached = await cache.match(event.request);      const networkFetch = fetch(event.request).then((response) => {        cache.put(event.request, response.clone());        return response;      });      // Return cached immediately if present; otherwise wait on the network      return cached || networkFetch;    })  );});

<!-- preconnect does DNS + TCP + TLS ahead of time - use sparingly (3-4 max),     each open connection has real cost --><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preconnect" href="https://api.example.com" /><!-- Under HTTP/2 or HTTP/3, avoid legacy domain sharding (splitting assets     across subdomains) - it defeats connection multiplexing and forces     extra handshakes instead of reusing one connection --><!-- Prefer same-origin or a single CDN origin so requests share one     multiplexed connection rather than each needing preconnect -->