Lazy load images to reduce initial-load page weight with the browser-native
What Is Lazy Image Loading?
Similar to other strategies for streamlining the loading process like on-demand, deferred, and asynchronous loading, lazy loading only loads a resource in anticipation of a need for it.
Fortunately for page speed, images load asynchronously - in the background without render blocking. The downside is that all images on the page are downloaded immediately, whether the user ever sees them or not. Images often account for the greatest share of total page weight, so below-the-fold images are a great application for lazy loading with the potential to drastically reduce initial-load page weight.
Lazy image loading is a technique to avoid unnecessary downloads by delaying below-the-fold images until each image appears on screen.Live Example
Instructing the browser to load each image just before it's scrolled into view makes the process appear seamless to the user.
<img>s with a placeholder and then detecting when each image comes into view and updating the
src with the intended file.
<iframe>s can also be lazy loaded, but in some cases there may be a better option, for example on-demand loading for embedded videos like YouTube.
Native Lazy Images
Along with reducing code overhead, one of the benefits of handling lazy loading in the browser is a greater potential to intelligently adjust loading behavior and scrolling thresholds automatically based on a complex set of variables like internet connection speed and data saver settings.
The loading="lazy" Attribute
Native lazy image loading is as simple as placing the
loading="lazy" attribute on each below-the-fold
loading attribute accepts two values:
lazy- Loads shortly before scrolling into view.
eager- (default) Loads immediately, regardless of other conditions.
eager value may only be needed in the rare case of overriding automatic lazy loading in data-saver modes. (The Chrome browser also accepts an
auto value which it treats as default, but recommends against using
auto until it's included in the official HTML specification.)
Most modern browsers can take advantage of native lazy loading, but it also degrades gracefully - older browsers will simply ignore the
loading="lazy" attribute and load images normally.
Although it's part of the HTML spec and supported by most browsers, as of 2021 some HTML validators don't yet recognize the
loading attribute and will report an error.
The examples below use a simple
<img> tag, but this technique is adaptable for responsive images with additional attributes like
data-srcset. There are also many established libraries, frameworks and plugins that can provide the same result.
Along with the
loading="lazy" attribute, each
<img> tag needs a few changes:
data-srcto temporarily store the path of the final image.
- Add a new
srcattribute with a placeholder of equivalent proportions.
- Optionally add a
Prevent Content Reflow With Lazy Images
Content reflow happens when elements on a page resize or reposition such that surrounding elements are repositioned as well. Recalculating the layout and repainting a significant portion of the content unnecessarily taxes the browser and can be disorienting to the user.
For pure native lazy image loading, indicating the intrinsic pixel dimensions of the image with the
height attributes is enough.
IntersectionObserver (or neither) and updates the HTML accordingly:
(In the interest of simplicity, this snippet doesn't include the
EventListener method that was common prior to
IntersectionObserver, which can be added as a secondary fallback for slightly deeper browser support.)
As always, be sure to minify the code to reduce file size and logically consolidate with other files for the most efficient file compression.
Browser Support For Native Lazy Images
According to CanIUse.com on the loading attribute and fallbacks:
- ~73% support
loading="lazy"= Chrome, Firefox, Edge (Blink), Opera
- ~19% support
loading="lazy") = Safari
- ~8% support neither = IE, older Safari & other old browsers
Tailored For Your Users
Although relatively new, browser support for native lazy loading is already strong - strong enough that many websites can potentially use the
For example, about 95% of the visitors to PageSpeedChecklist.com can benefit from native lazy loading. There are also relatively few below-the-fold images so the potential impact is minimal.
Lazy loading these images saves about 240KB of initial-load page weight, but for pages with many large below-the-fold content images the saving can be much greater.
Even More Speed
Lazy loading is just one of many powerful strategies to streamline the loading process. Take advantage of every opportunity to maximize speed with the complete page speed checklist:Page Speed Checklist