Web Performance - Practical Guide
The 3 Essential Metrics
- LCP (Largest Contentful Paint): < 2.5s (main loading time)
- FID (First Input Delay): < 100ms (reactivity)
- CLS (Cumulative Layout Shift): < 0.1 (visual stability)
Measurement and Audit Tools
1. Google Lighthouse (Free and integrated)
# Via Chrome DevTools: F12 > Lighthouse
# Or in CLI
npm install -g lighthouse
lighthouse https://mysite.com
2. Unlighthouse (Boosted Version)
Scans your entire site automatically (multiple lighthouse)
npx unlighthouse --site https://mysite.com
3. Useful Extensions
- Web Vitals: Real-time monitoring (Chrome Extension)
- Screaming Frog: Complete technical SEO audit
Image Optimizations
Recommended Formats (in order of preference)
- WebP: -25% to -35% vs JPEG
- AVIF: -50% vs JPEG (limited support)
- Optimized JPEG: 80-85% Quality
Techniques
<!-- Responsive + modern formats -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
Optimization Tools
- Squoosh.app (Google) - Web interface
- ImageOptim (Mac) / TinyPNG (Web)
- Sharp (Node.js) to automate
Code Optimizations
CSS
/* Automatic minification via build tools */
JavaScript
// Automatic code splitting
// Tree shaking to remove dead code
// Minification + gzip/brotli compression
Lazy Loading
<!-- Images -->
<img src="image.jpg" loading="lazy" alt="">
<!-- Scripts -->
<script src="script.js" defer></script>
Cache Strategies 💾
Browser Cache
<!-- Static cache (1 year) -->
<meta http-equiv="Cache-Control" content="max-age=31536000">
Service Worker (Programmable Cache)
// Cache-first for static assets
// Network-first for dynamic content
CDN + Edge Caching
- Cloudflare (free basic)
- AWS CloudFront (for example)
- Vercel Edge (auto with Next.js)
Bonus accessibility tools
- WAVE: Automatic accessibility audit
- IBM Accessibility Checker: More in-depth tests
- axe DevTools: Chrome/Firefox extension
Advanced Resources
- The Ultimate Guide to Web Performance - Complete video
- Web.dev Performance - Google