What I expect from a modern image lazyloader
What should a good lazyloader be in 2016?
Using a lazyloader is a great way to improve the loading spead of a page. However, during my webperf audits, I’ve seen some lazyloaders that were causing more problems than improvements. I’m also sad to see some massively used lazyloaders not evolving and not implementing new technologies.
I could create “the-lazyloader-of-my-dreams.js”, but 1) I don’t have time and 2) it wouldn’t fix the other lazyloaders.
My wish list for lazyloaders maintainers
- Can be loaded as an async script.
- Doesn’t wait until end of body, DOM Ready of Window.onload to load images.
- Shows image while loading, for progressive JPEG support.
- Detects visibility.
- Is compatible with iframes
- Is compatible with divs or JS widgets
- Is compatible with background images (and media queries).
- Is compatible with srcset or
to load responsive images. - Detects if previous images were loaded too slowly and loads lower resolution images for the next images.
- Uses a single scroll event listener instead of one per image.
- Throttles the scroll event.
- Uses a Passive Event Listener.
- Is compatible with the Interaction Observer API.
- Detects cross-domains in URLs and preconnect them asap.
- Alerts developers about specifying dimensions, to avoid reflows.
Benchmark of some existing lazyloaders
| aFarkas/lazysizes | vvo/lazyload | tuupola/jquery_lazyload | verlok/lazyload | |
|---|---|---|---|---|
| 1 - async | ✔ | ✗ | ✔ | ✔ |
| 2 - doesn’t wait | ✗ | ✔ | ✗ | ✗ |
| 3 - visibility | ✔ | ✔ | ✔ | ✔ |
| 4 - progressive | ✔ | ✔ | ✗ | ✔ |
| 5 - iframes | ✔ | ✔ | ✗ | ✔ |
| 6 - divs | ✔ | ✗ | ✗ | ✗ |
| 7 - background | ✔ | ✗ | ✔ | ✔ |
| 8 - srcset, picture | ✔ | ✗ | ✗ | ✔ |
| 9 - detect slowness | ✗ | ✗ | ✗ | ✗ |
| 10 - single listener | ✔ | ✔ | ✔ | ✔ |
| 11 - throttling | ✔ | ✔ | ✗ | ✔ |
| 12 - passive event | ✗ | ✗ | ✗ | ✗ |
| 13 - interaction | ✗ | ✗ | ✗ | ✗ |
| 14 - preconnect | ✗ | ✗ | ✗ | ✗ |
| 15 - dimensions | ✔ | ✗ | ✔ | ✔ |
| SCORE: | 10/15 | 6/15 | 5/15 | 9/15 |
| Stars on GitHub: | 5K | 800 | 6K | 500 |
(You can create an issue or a pull request on gmetais/gmetais.github.io if I made a mistake, if the benchmark needs an update or if you’d like to see a script added.)