| Life cycle |
Tiers |
Responsible |
| 3. Implementation |
Network |
UX/UI Designer |
| Priority |
Implementation difficulty |
Ecological impact |
| 4 |
4 |
5 |
| Saved resources |
| Processor / Network |
By default, all resources (images, videos, iframes, etc.) of a web page are downloaded, even when users do not display them, for instance if they are outside the viewport. To avoid this, the lazy loading technique can be used: elements with this attribute will be loaded only when they become visible on the screen.
It is possible to add a loading attribute to images and iframes in HTML so that the browser will only download images
that are displayed on the screen. However, this attribute is very recent: it will not work on older browser versions.
For the sake of improved compatibility, it is still possible to use very light Javascript mini-libraries which can handle
images lazy-loading, such as:
- LOZAD 1.9 KB (gzip)
- vanilla-lazyload 3.5 KB (gzip)
In this example, the image and iframe will be automatically lazy-loaded by the browser. If an image must be displayed on
the screen, it will be downloaded and displayed. Otherwise, it will not be downloaded.
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
See also :
| The number of ... |
is equal to or less than |
| images, iframes, and videos called without a lazy loading attribute and below the initial viewport is |
0 |