Image Optimization

Summary

Serving appropriately sized, modern-format (WebP/AVIF) images with proper compression — often the single biggest lever for improving page load performance.

How to Learn This

1Convert a few large images to WebP and compare file sizes.
2Use responsive `srcset`/`sizes` (or `next/image`) to serve appropriately sized images per device.
3Audit a real page's images with Lighthouse and fix the flagged ones.

Lazy Loading

Memoization

More topics in Performance

Lazy Loading Memoization Bundle Splitting Virtualization Tree Shaking Code Splitting Caching Lighthouse Core Web Vitals Web Vitals Prefetching Preloading

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — free on the InsideEdge app.

Download