6.1 Lazy Loading Images

Introduction:

Only load an image once it’s about to enter the viewport, rather than shipping every image on a page at first paint. Use the browser-native loading="lazy" attribute as your baseline; it’s supported everywhere modern and fall back to a JS-based loader for older browsers or more control over the loading threshold.

This is one of the simplest wins in the “quick frontend gains” category: on its own it does nothing for an image’s file size, so pair it with next-gen image formats (see 6.2) for a compounding effect rather than treating it as a fix in isolation.

Lazy Sizes