Find Non Lazy Loaded Images Outside of the Viewport

Find non Lazy Loaded Images outside of the viewport

List all images that don't have loading="lazy" or [data-src] (lazy loading via JS) and are not in the viewport when the page loads. This script will help you find candidates for lazy loading.


// Execute it after the page has loaded without any user interaction (Scroll, click, etc)
function findImgCanidatesForLazyLoading() {
  let notLazyImages = document.querySelectorAll(
  return Array.from(notLazyImages).filter((tag) => !isInViewport(tag));
function isInViewport(tag) {
  let rect = tag.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  "Consider lazyloading the following images: ",