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 -->