Lighthouse Optimization
Improving Lighthouse scores.
Improve LCP
Optimize images
• Use modern formats (WebP, AVIF)
• Properly size images
• Lazy load below fold
Preload critical resources
rel="preload" as="image" href="hero.jpg">
Reduce server response time
• Use CDN
• Enable caching
• Optimize backend
Improve FID/TBT
Reduce JavaScript execution
• Code splitting
• Remove unused code
• Defer non-critical JS
Use Web Workers
Move heavy processing off main thread
Optimize third-party scripts
• Load async
• Use facade pattern
Improve CLS
Set image dimensions
width="800" height="600" src="image.jpg">
Reserve space for ads
min-height on ad containers
Avoid inserting content above existing
Do not inject banners or modals dynamically
Use font-display
@font-face {
font-display: swap;
}
Quick Wins
Enable text compression
Gzip/Brotli for text assets
Minify CSS/JS
Use build tools (Webpack, Vite)
Remove render-blocking resources
rel="stylesheet" media="print" onload="this.media=all">
Use HTTP/2
Multiplexing, header compression