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