Lazy

Native lazy loading for the web.

0 stars out of 5

0 0 0 0 0
  • Author Taufik Nurrohman
  • Maintainer 1
  • Member
  • Version 1.1.0

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. Where images are concerned, “non-critical” is often synonymous with “off-screen”. 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. 1

Starting with Chrome 76, you’ll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library. Please note that only images that are below the device viewport by the calculated distance load lazily. All images above the viewport, regardless of whether they’re immediately visible, load normally.

This extension helps you to automatically add the loading attribute with the value of lazy. To disable the lazy loading behavior on certain iframes and images, you can add the attribute manually with the value of auto. This is the default value, so it’s the same as not adding the attribute at all:

<iframe loading="auto" src="/route/to/embed.html"></iframe>
<img alt="" loading="auto" src="/route/to/image.jpg">

0 Comments

No comments yet.