Images Lazy Loading Benchmark
Chances that your page don't need images lazyloading are close to zero.
This benchmark was created to pick the best option for implementing images lazyloading, with the goal of handling pages with big number of DOM nodes.
Testing methodology
- Each testing site is a static HTML with 2000 random images.
- All images are cache busted and loaded from the same domain.
- Tests was executed on webpagetest.org for consitency.
- "Custom JS" is a super simple script added for comparison.
Results
Name | Largest Contentful Paint | Total Blocking Time |
---|---|---|
Native | 2614 ms | 208 ms |
Native + polyfill | 2928 ms | 1059 ms |
lazysizes.js | 2269 ms | 266 ms |
vanilla-lazyload.js | 2269 ms | 266 ms |
yall.js | 2269 ms | 266 ms |
Custom JS | 2269 ms | 266 ms |