⚡ Site Speed Optimization
Faster loading times = better rankings + happy users
📊 Core Web Vitals Targets
LCP (Largest Contentful Paint)
Time for main content to load
INP (Interaction to Next Paint)
Time to respond to user interactions
CLS (Cumulative Layout Shift)
Visual stability during load
🛠️ Optimization Strategies
🖼️ Use WebP Format
Convert images to WebP for 25-35% smaller files than JPEG/PNG with same quality.
High Impact📏 Resize Images
Don't serve 2000px images when only 800px is needed. Match image dimensions to display size.
High Impact⏳ Lazy Loading
Add loading="lazy" to images below the fold. Only load what's visible.
Medium Impact📐 Specify Dimensions
Add width and height attributes to prevent layout shift during loading.
Medium Impact📦 Minify CSS/JS
Remove whitespace, comments, and shorten variable names to reduce file sizes.
High Impact🔗 Bundle Files
Combine multiple CSS/JS files into fewer files to reduce HTTP requests.
Medium Impact⚡ Defer JavaScript
Add defer or async attributes to non-critical scripts to not block rendering.
High Impact🎯 Remove Unused CSS
Purge unused CSS rules. Most sites only use 20-30% of their CSS.
Medium Impact🌐 Use a CDN
Serve content from servers closest to users. Cloudflare, Fastly, or AWS CloudFront.
High Impact💾 Enable Caching
Set Cache-Control headers for static assets. 1 year for versioned assets.
High Impact🔒 Enable GZIP/Brotli
Compress text-based files. Brotli offers 15-25% better compression than GZIP.
High Impact⚡ HTTP/2 or HTTP/3
Enable multiplexing and header compression for faster parallel downloads.
Medium Impact🔗 Preload Fonts
Add link rel="preload" for critical fonts to start loading early.
Medium Impact📊 Subset Fonts
Only include characters you need. Latin-only subset is much smaller.
Medium Impact💻 System Fonts
Use system font stack for body text. Instant rendering, zero download.
High Impact🎭 Font-display: swap
Show text immediately with fallback, swap when font loads.
Low Impact💻 Implementation Examples
src="image.webp"
loading="lazy"
decoding="async"
width="800"
height="600"
/>
href="critical.css"
as="style"/>
<link rel="preload"
href="font.woff2"
as="font"
crossorigin/>
<script src="critical.js"></script>
<!-- Non-critical - defer -->
<script src="analytics.js"
defer></script>
<FilesMatch "\.(css|js|woff2)$">
Header set Cache-Control
"max-age=31536000,
immutable"
</FilesMatch>
🔧 Speed Testing Tools
🎯 Priority Matrix
🔴 Critical (Do First)
- ✓ Optimize LCP image
- ✓ Enable compression
- ✓ Convert to WebP
- ✓ Defer render-blocking JS
🔵 Quick Wins
- ✓ Add lazy loading
- ✓ Set image dimensions
- ✓ Enable browser caching
- ✓ Minify CSS/JS
🟡 Important
- ✓ Set up CDN
- ✓ Preload critical fonts
- ✓ Remove unused CSS
- ✓ Optimize web fonts
🟢 Nice to Have
- ✓ Enable HTTP/3
- ✓ Implement service worker
- ✓ Add resource hints
- ✓ Use font subsetting
✅ Speed Optimization Checklist
📸 Images
- WebP format used
- Images compressed
- Lazy loading enabled
- Dimensions specified
- Responsive images
💻 Code
- CSS minified
- JS minified
- JS deferred
- Critical CSS inlined
- Unused code removed
🖥️ Server
- CDN enabled
- Gzip/Brotli on
- Cache headers set
- HTTP/2 enabled
- SSL configured