nucliweb
diff --git a/‎pages/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.mdx
Copy file name to clipboard
+16-8Lines changed: 16 additions & 8 deletions b/‎pages/Loading/Find-Above-The-Fold-Lazy-Loaded-Images.mdx
Copy file name to clipboard
+16-8Lines changed: 16 additions & 8 deletions
diff --git a/‎pages/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.mdx
Copy file name to clipboardExpand all lines: pages/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.mdx
+22-11Lines changed: 22 additions & 11 deletions b/‎pages/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.mdx
Copy file name to clipboardExpand all lines: pages/Loading/Find-non-Lazy-Loaded-Images-outside-of-the-viewport.mdx
+22-11Lines changed: 22 additions & 11 deletions
@@ -1,25 +1,33 @@
 # Find Above The Fold Lazy Loaded Images
 
-List all images that have `loading="lazy"` or `[data-src]` _(lazy loading via JS)_ above the fold
+List all images that have `loading="lazy"` or `[data-src]` _(lazy loading via JS)_ above the fold and off canvas.
 
 #### Snippet
 
 ```js copy
 // List all lazily loaded images above the fold
 // https://webperf-snippets.nucliweb.net
-function findATFLazyLoadedImages() {
-  const lazy = document.querySelectorAll('[loading="lazy"], [data-src]');
+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 (position < window.innerHeight && position !== 0) {
+
+    if(x < window.innerWidth && y < window.innerHeight && x !== 0 && y !== 0) {
       lazyImages = [...lazyImages, tag];
+      console.log(tag);
     }
   });
-  return lazyImages.length > 0
-    ? lazyImages
-    : "Good job, the site does not have any lazily loaded images in the viewport.";
+
+  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",
+    );
+  }
 }
 
-console.log(findATFLazyLoadedImages());
+findAboveTheFoldLazyLoadedImages();
 ```
@@ -6,13 +6,6 @@ List all images that don't have `loading="lazy"` or `[data-src]` _(lazy loading
 
 ```js copy
 // Execute it after the page has loaded without any user interaction (Scroll, click, etc)
-function findImgCanidatesForLazyLoading() {
-  let notLazyImages = document.querySelectorAll(
-    'img:not([data-src]):not([loading="lazy"])',
-  );
-  return Array.from(notLazyImages).filter((tag) => !isInViewport(tag));
-}
-
 function isInViewport(tag) {
   let rect = tag.getBoundingClientRect();
   return (
@@ -23,8 +16,26 @@ function isInViewport(tag) {
   );
 }
 
-console.log(
-  "Consider lazyloading the following images: ",
-  findImgCanidatesForLazyLoading(),
-);
+function findImgCanidatesForLazyLoading() {
+  let notLazyImages = document.querySelectorAll(
+    'img:not([data-src]):not([loading="lazy"])'
+  );
+  const notLazyImagesOutOfViewport = Array.from(notLazyImages).filter((tag) => !isInViewport(tag));
+
+  if( notLazyImagesOutOfViewport.length === 0 ) {
+    console.log(
+      `%c Good job, the site has al the images out of the viewport with lazyloading.`,
+      "background: #222; color: lightgreen; padding: 0.5ch",
+    );
+  } else {
+    console.log(
+      `%c Consider lazyloading the following images`,
+      "background: #222; color: lightcoral; padding: 0.5ch; margin-top: 1em",
+    );
+    notLazyImagesOutOfViewport.forEach((img) => console.log(img));
+  }
+  
+}
+
+findImgCanidatesForLazyLoading();
 ```