Find Above The Fold Lazy Loaded Images
List all images that have loading="lazy"
or [data-src]
(lazy loading via JS) above the fold and off canvas.
Snippet
// List all lazily loaded images above the fold
// https://webperf-snippets.nucliweb.net
function findAboveTheFoldLazyLoadedImages() {
const lazy = document.querySelectorAll('[loading="lazy"]');
let lazyImages = [];
lazy.forEach((tag) => {
const {x, y} = tag.getBoundingClientRect();
const position = parseInt(tag.getBoundingClientRect().top);
if(x < window.innerWidth && y < window.innerHeight && x !== 0 && y !== 0) {
lazyImages = [...lazyImages, tag];
console.log(tag);
}
});
if( lazyImages.length === 0 ) {
console.log(
`%c Good job, the site does not have any lazily loaded images in the viewport.`,
"background: #222; color: lightgreen; padding: 0.5ch",
);
}
}
findAboveTheFoldLazyLoadedImages();