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());