What is Lazy loading?

Images, and videos consume a huge amount of data, and affects web performances. If your web page contains many images (or videos), it is true that some -if not many- of them are out of viewport. The normal behavior of any browser is to load all images during the web page loading which may slow loading time.

Lazy loading is used to defer images loading until it is about to enter the viewport, and only load the ones that are displayed once the web page loads. Thus decreases the time the web page needs to firstly load.


Native Lazy Loading

Developers use javascript plugins, or other in viewport detector methods like for example: Intersection Observer to make lazy loading. The good news is that Native lazy loading is now supported in Chrome 75. Using it is very simple. You will only have to add the attribute loading="lazy" to the <img> element.

<img src="image.jpg" loading="lazy" alt="..." />

The value of the attribute loading can be either:

  • lazy => tell the browser to load image just before showing on the screen.
  • eager =>  make browser load image as soon as possible. This can be added to the images that will appear inside viewport once the web page loads.
  • auto => make browser determine whether or not to lazily load.

Watch lazy loading in action

In this video a web page contains some puppy images. You will see how the images loads just before scrolling to them and notice that in the Network tab of the chrome devtools.


Browser Support

https://caniuse.com/loading-lazy-attr