performance2025-01-12
Web Performance and Images
How images affect website speed and what you can do about it.
Images typically account for 50% or more of a webpage's total weight.
Impact on Performance
- Slower page load times
- Higher bounce rates
- Lower SEO rankings
- Poor Core Web Vitals
Core Web Vitals
Images affect:
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
Optimization Strategies
1. Compress images - Reduce file size 2. Use modern formats - WebP, AVIF 3. Lazy loading - Load on scroll 4. Responsive images - Serve appropriate sizes 5. CDN delivery - Faster global access
Testing Tools
- Google PageSpeed Insights
- Lighthouse
- WebPageTest
- GTmetrix
Performance Budget
Set limits:
- Total page: < 1.5MB
- Images: < 500KB
- Hero image: < 200KB