Before caching, before a CDN, before a new framework: open the network tab and sort by size. On most sites the top ten entries are photographs exported straight from a camera or a design file.
The three rules
Resize to the largest size the layout will actually display, at most twice that for high-density screens. Export as WebP or AVIF with JPEG as the fallback. Set width and height on every image tag so the page does not jump while they load.
Make it the default
- Have the CMS resize on upload so editors cannot get it wrong.
- Lazy-load everything below the fold, and nothing above it.
- Check one page a month in PageSpeed Insights and fix the biggest image first.
