Loading
Find above the Fold Lazy Loaded Images

Find Above The Fold Lazy Loaded Images

List all images that have loading="lazy" or [data-src] (lazy loading via JS) above the fold

Snippet

// List all lazily loaded images above the fold
// https://webperf-snippets.nucliweb.net
function findATFLazyLoadedImages() {
  const lazy = document.querySelectorAll('[loading="lazy"], [data-src]');
  let lazyImages = [];
  lazy.forEach((tag) => {
    const position = parseInt(tag.getBoundingClientRect().top);
    if (position < window.innerHeight && position !== 0) {
      lazyImages = [...lazyImages, tag];
    }
  });
  return lazyImages.length > 0
    ? lazyImages
    : "Good job, the site does not have any lazily loaded images in the viewport.";
}
 
console.log(findATFLazyLoadedImages());