Two levers for image loading
Images are often the heaviest part of a page, so when and how eagerly they load matters. Lazy loading defers offscreen images until the user is about to scroll to them, while fetch priority lets you tell the browser which images matter most right now.
- Lazy loading saves bandwidth on images never seen.
- Priority hints decide the order of important downloads.
- Together they front load the visible content and delay the rest.
Applying each correctly
The biggest mistake is lazy loading the wrong image. The hero image at the top should load eagerly, while the long list below the fold should load lazily.
- Hero image loads eagerly with a high fetch priority.
- Below the fold images load lazily so they do not compete early.
- Decorative thumbnails can defer without harming the experience.
Common pitfalls
- Never lazy load the largest visible image, since it delays the main paint.
- Reserve space with dimensions so deferred images do not cause shifts.
- Avoid marking too many images high priority, which dilutes the signal.
Key idea
Lazy load offscreen images to save bandwidth, but load the hero eagerly at high priority so the most important pixels arrive first.