Skip to main content
Andrea Verlicchi

Making the web faster and more user-friendly

Tagged “lazy loading”

  1. Do we still need lazy loading libraries and `data-src`?

    Back in the day, when browser support for native lazy loading wasn’t widespread, the best practice was to use `data-src` attributes and a JavaScript library like my vanilla-lazyload to load images as they entered the viewport. Is this still best practice today?

    Read more →
  2. An elegant technique to lazyload images in Swiper, and lazily create Swiper instances

    Say you have multiple carousels in a page, each one containing multiple images, and you want to download only the images that are inside the visible portion of the page, and maybe save some CPU time by lazily create the carousel instances. I think I’ve found a valuable and elegant technique to do so.

    Read more →
  3. vanilla-lazyload vs lazysizes

    As the author of vanilla-lazyload, it's not the first time I get asked the question: What are the differences between vanilla-lazyload and lazysizes? This blog post is the answer to that question.

    Read more →
  4. Lazy load responsive images in 2020

    Do you want to boost performance on your website? You can do that by using **responsive images and lazy loading! In this article, you will find the HTML, JavaScript, and CSS code to lazy load responsive images, to make browsers use modern image formats like WebP and Jpeg2000, and to enable native lazy load where supported.

    Read more →
  5. A smashing article on hybrid lazy loading

    On May 6th, 2019 I wrote my first article on Smashing Magazine: Hybrid Lazy Loading, A Progressive Migration To Native Lazy Loading.

    Read more →
  6. Native lazy loading and js-based fallback with vanilla-lazyload 12

    On April 6th 2019, Addy Osmany wrote about native image lazy-loading. Two days later Yvain, a front-end developer from Paris, asked me if my vanilla-lazyload could be a loading attribute polyfill, inspiring me to develop and release version 12 of my script, which features a new use_native option to enable native lazy-loading where supported. You can already use it today.

    Read more →
  7. Lazy load responsive images in 2019

    In the latest years, both at my job and as maintainer of a LazyLoad script, I've specialized in lazy loading of responsive images. Today I'm going to show you what HTML, CSS and JavaScript code you need to write in 2019 in order to serve responsive images and load them lazily.

    Read more →
  8. Intersection Observer and lazy loading of elements

    In August 2017 the Intersection Observer API, a new exciting browser API, finally gained quite wide support. We can use it to know when two DOM elements intersect, or when a given DOM element enters the browser viewport. The lazy loading of images is just the case.

    Read more →
  9. Lazy load of responsive images with srcset and LazyLoad

    It's now possible to have lazy loading on responsive images to make our images to adapt to users screens and keep our website fast. In this article, we'll see what markup we need to write and which Javascript libraries we're gonna need to do that.

    Read more →

See all tags.