Making the web faster and more sustainable
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.
What are vanilla-lazyload and lazy sizes? #
Using one of them is very important to improve the rendering time of your website by delaying the loading of all non-critical content to later, in order to get better Core Web Vitals and particularly to reduce the Largest Contentful Paint.
So what are the differences between vanilla-lazyload and lazysizes? What follows is a detailed comparison of the two.
vanilla-lazyload and lazysizes compared #
Find the main features of vanilla-lazyload compared to lazysizes' in the table below.
|Is lightweight (source: bundlephobia)||✔ (2.8 kB)||✔ (3.4 kB)|
|Is extendable||✔ (via API)||✔ (via plugins)|
|Is SEO friendly||✔||✔|
|Optimizes performance by cancelling downloads of images that already exited the viewport||✔|
|Retries loading after network connection went off and on again||✔|
|Supports conditional usage of native lazyloading||✔|
|Works with your DOM, your own classes, and data-attributes||✔|
|Can lazyload responsive images||✔||✔|
|...and automatically calculate the value of the
|Can lazyload iframes||✔||✔|
|Can lazyload videos||✔|
|Can lazyload background images||✔|
|Can lazily execute code when given elements enter the viewport||✔|
|Can restore DOM to its original state||✔|
Table rows explained #
Is extendable #
Is SEO friendly #
Both scripts don't hide images/assets from search engines. No matter what markup pattern you use. Search engines don't scroll/interact with your website. These scripts detect whether or not the user agent is capable to scroll and if not, they reveal all images instantly.
Optimizes performance by cancelling downloads of images that already exited the viewport #
If your mobile users are on slow connections and they scroll down fast, vanilla-lazyload cancels the download of images that are still loading but already exited the viewport. Although if for some reason you don't want this to happen, this feature can be turned off.
Retries loading after network connection went off and on #
If your mobile users are on flaky connections and go offline and back online, vanilla-lazyload retries downloading the images that errored.
Supports conditional usage of native lazyloading #
If your users are on a browser supporting native lazyloading and you want to use it, with vanilla-lazyload you can conditionally activate it by setting the
use_native option to
true. Find here more information and the conditional native lazyload demo.
Works with your DOM, your own classes and data-attributes #
Both scripts work by default with the
data-src attribute and the
lazy class in your DOM, but on vanilla-lazyload you can change it, e.g. to
data-origin, if you want to migrate from other lazy loading scripts to vanilla-lazyload without changing your HTML markup.
Can lazyload responsive images #
Both vanilla-lazyload and lazysizes can lazyload responsive images by all kinds, the simple
img tag and the
picture tag with multiple
For more information, check out lazy load responsive images in 2020 by yours truly.
...and automatically calculate the value of the
sizes attribute #
The lazysizes script has a function that can spare you the "fatigue" of writing the value of the
sizes attribute in your HTML markup. By placing a
This is a missing feature vanilla-lazyload for a reason. To make browsers display your website's content as fast as possible, you will have to mix lazy loading and eager loading (eager being the opposite of lazy). The best practice here is to eagerly load images above-the-fold and lazy loading the ones below-the-fold. In the eagerly loaded images you will have to put a sensible value of the
Can lazyload iframes #
Both vanilla-lazyload and lazysizes can lazyload the
Can lazyload videos #
Only vanilla-lazyload can lazyload the
video tag, even with multiple
See lazy video in vanilla-lazyload documentation for more.
Can lazyload background images #
Only vanilla-lazyload can lazyload background images, even multiple background images. It also has a way of supporting HiDPI displays such as Retina and Super Retina displays.
Check lazy background images in vanilla-lazyload documentation for more.
Can lazily execute code when given elements enter the viewport #
Only on vanilla-lazyload you can execute code when given elements enter the visible portion of the page.
Check out the lazy functions section in vanilla-lazyload documentation for more.
Can restore the DOM to its original state #
Sometimes you need to clean up your DOM before unloading it and soft-navigating to another page, e.g. when using TurboLinks.
vanilla-lazyload allows you to restore all DOM it manipulated to its original state by calling the
vanilla-lazyload has more features you can use to lazyload images, background images, videos and iframes, it's optimised for slow connections, it automatically retries loading images after a network down, supports conditional native lazy loading, can execute code lazily, and restore your DOM to its original state.
On the other hand, lazysizes is extendable and it has the ability to automatically calculate your images
sizes attribute if you don't want to.