Lazy Loading Images and Video
What is lazy loading ?
Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need.
Why lazy load images, video instead of just loading them?
Because it’s possible you’re loading stuff the user may never see:
It wastes data. Be a waste of their money.
It wastes processing time, battery, and other system resources.
When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
Lazy loading images.
Inline Images
The most common lazy loading candidates are images as used in <img> elements.
When we lazy load <img> elements, we use JavaScript to check if they're in the viewport.
If they are, their src (and sometimes srcset) attributes are populated with URLs to the desired image content.
Using intersection observer:
If you've written lazy loading code before, you may have accomplished your task by using event handlers such as scroll or resize.
Modern browsers offer a more performant and efficient way to do the work of checking element visibility via the intersection observer API.
Intersection observer is easier to user and read but it’s not universal.
Example
Using event handlers (the most compatible way):
Best way to use lazy loading with Inline images is: Intersection + event handlers.
Image in CSS
The url is declared in css: background-image.
When resource in screen we’ll add image to contents by add css class.
Lazy Loading Video
Does not autoplay
1.For videos where playback is initiated by the user (i.e., videos that don't autoplay). Use preload attribute.
2. Use poster attribute which lets you specify a placeholder.
Like animated GIF
For video acting as an animated GIF replacement.
They play automatically when loaded.
They loop continuously.
They don't have an audio track.
Lazy Loading libraries
React-lazyload (only react)
What can go wrong ?
So much benefits but not easy.
If you get it wrong, there could be unintended consequences.
I will show you some note.
Some note:
Layout shifting and placeholders.
Image decoding delays.
When stuff doesn't load.
JavaScript availability.
Layout shifting and placeholders:
What happen if shifting in the layout if placeholders aren't used ?
Trigger expensive DOM layout operations that consume system resources.
For <img> tags, src should initially point to a placeholder until that attribute is updated with the final image URL. The poster attribute in a <video> element to point to a placeholder image. Additionally, use width and height attributes on both <img> and <video> tags.
Image decoding delays:
Loading large images in JavaScript and dropping them into the DOM can tie up the main thread. Block screen. => Asynchronously decoding images using the decode method.
When stuff doesn't load :
Sometimes media resources will fail to load for one reason or another and errors occur.
JavaScript availability :
It should not be assumed that JavaScript is always available.
Source: Google Developer
Last updated