Tips / Nginx

Lazy Load using Lazy Sizes on all your web designs

I’m not a web developer, however, sometimes I find very interesting and useful tools for websites. And yesterday I found a ‘lazy load’ library called Lazy Sizes. Its written in VarnillaJS and is very performant for any Lazy Load process, it can be applied to normal images, responsive images, iframes and/or scripts.

How does Lazy Sizes work?

Just add the javascript code to your website and insert the lazyload class into all your website elements that you want to be lazy loaded. ¬†This lazy load technique works pretty well on most websites I’ve tested so far.

Lazy Load

One of the good things of lazy size is the fact that you don’t need more than the main library, no big plugin or web ¬†installations are needed, just put it into your code, place the class inside your web elements and that’s all. Example:

<script src="lazysizes.min.js" async=""></script>

Lazy loading examples using Lazy sizes:

<img class="lazyload" data-src="image.jpg" alt="Your image" />

Now, what about responsive images? Just use ‘data-srcset’ attribute and your responsive images will be lazy loaded without any problem, example:

alt="responsive image"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />

Lazy load for Iframes? Yes, that’s possible too with Lazy Sizes, example:

<iframe data-src="//" class="lazyload" frameborder="0" allowfullscreen></iframe>

You can download this library from the author page @ Github.

Popular search terms:

  • lazy load nginx
  • lazy size
  • lazyload en nginx
  • lazyload nginx

Esteban Borges

Linux Geek, Webperf Addict, Nginx Fan. CTO @Infranetworking