Web Performance Optimization Cheat Sheet
Covers measuring Core Web Vitals, lazy loading and code splitting, caching headers and resource hints, and key optimization techniques.
3 PagesAdvancedMar 8, 2026
Measuring Core Web Vitals
Tracking loading, responsiveness, and stability metrics.
javascript
// 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 });
Lazy Loading & Code Splitting
Deferring work until it's actually needed.
javascript
// 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> );}
Caching & Resource Hints
HTTP caching and hints that speed up resource discovery.
html
<!-- 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 -->
Optimization Techniques
High-impact levers for reducing load time.
- Code splitting- ship only the JS needed for the current route or view
- Tree shaking- remove unused exports from the final bundle
- Image formats (WebP/AVIF)- smaller file sizes than JPEG/PNG at similar visual quality
- Critical CSS- inline the above-the-fold CSS and defer the rest
- CDN- serve static assets from edge locations closer to the user
- Compression (Brotli/gzip)- reduces transferred bytes for text-based assets
- Explicit width/height- reserves layout space up front to prevent CLS from late-loading media
Pro Tip
Optimize for Largest Contentful Paint first: find your LCP element in Chrome DevTools' Performance panel (usually a hero image or heading) and preload just that asset - it often yields a bigger score improvement than any amount of JS micro-optimization.
Was this cheat sheet helpful?
Explore Topics
#WebPerformanceOptimization#WebPerformanceOptimizationCheatSheet#WebDevelopment#Advanced#MeasuringCoreWebVitals#Lazy#Loading#Code#CheatSheet#SkillVeris
