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

  1. Each testing site is a static HTML with 2000 random images.
  2. All images are cache busted and loaded from the same domain.
  3. Tests was executed on webpagetest.org for consitency.
  4. "Custom JS" is a super simple script added for comparison.

Results

NameLargest Contentful PaintTotal Blocking Time
Native2614 ms208 ms
Native + polyfill2928 ms1059 ms
lazysizes.js2269 ms266 ms
vanilla-lazyload.js2269 ms266 ms
yall.js2269 ms266 ms
Custom JS2269 ms266 ms