How Images Kill Your Website Performance
You optimized your Javascript, but your site is still slow. The culprit? Likely your uncompressed images.
According to HTTP Archive, images make up 50% of the total weight of a typical webpage. If you are chasing a 100/100 Lighthouse score, you cannot ignore image optimization.
LCP (Largest Contentful Paint)
Measures loading performance. Large hero images are usually the "LCP Element". If they load slowly (>2.5s), Google penalizes your ranking.
CLS (Cumulative Layout Shift)
Measures visual stability. Images without explicit width/height dimensions cause layout shifts as they load, frustrating users.
The Checklist for 100/100 Score
Use Next-Gen Formats (WebP/AVIF)
JPEG is old tech. WebP is 30% smaller. AVIF is 50% smaller.
Lazy Load Everything Below Fold
Don't load images the user hasn't scrolled to yet. Use loading="lazy".
Compress Aggressively
You don't need 100% quality. 80% quality is visually identical but half the file size.