Lazy loading (on-demand loading) is a technique for optimizing the loading of web content, particularly images and videos, by deferring their loading until they are needed.
When a page loads, lazy loading prevents images and videos that are off-screen or below the fold from loading immediately. Instead, they are only loaded when a user scrolls down and sees them or when they interact with the content that calls for them.
Advantages of lazy loading:
- Faster page load times
- Reduced data usage
- Improved user experience
- Improved SEO
- Reduced server load
This strategy requires identifying resources as non-blocking (non-critical) which can be applied through multiple ways:
CSS code is, by default, treated asa render blocking. It is possible to optimized CSS for rendering purpose by splitting into multiple files based on media queries.
Lazy loading is implemented at the browser-level in modern browsers. This option can be easily enabled using the loading attribute in images and iframes.
<img src="image.jpg" alt="..." loading="lazy" /> <iframe src="video-player.html" title="..." loading="lazy"></iframe>