From 002cbc6dcec541b6e60a9127a3264b534a4a0f3f Mon Sep 17 00:00:00 2001 From: Josh Appel Date: Thu, 5 Oct 2023 23:17:01 -0500 Subject: [PATCH] update imgs to lazy load script with easier to see output in console --- README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d3e66c2..b4f80d1 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8
Table of Contents +- [Add snippet to Chrome DevTools](#add-snippet-to-chrome-devtools) +- [Video](#video) - [Core Web Vitals](#core-web-vitals) - [Largest Contentful Paint (LCP)](#largest-contentful-paint-lcp) - [Largest Contentful Paint Sub-Parts (LCP)](#largest-contentful-paint-sub-parts-lcp) @@ -47,7 +49,7 @@ https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8 - [First And Third Party Script Info](#first-and-third-party-script-info) - [First And Third Party Script Timings](#first-and-third-party-script-timings) - [Inline Script Info and Size](#inline-script-info-and-size) - - [Inline Script Info and Size Including `__NEXT_DATA__`](#inline-script-info-and-size-including-__next_data__) + - [Inline Script Info and Size Including ```__NEXT_DATA__```](#inline-script-info-and-size-including-__next_data__) - [Inline CSS Info and Size](#inline-css-info-and-size) - [Get your `` in order](#get-your-head-in-order) - [e.g. web.dev](#eg-webdev) @@ -340,11 +342,14 @@ console.log(findATFLazyLoadedImages()); 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. ```js + // Execute it after the page has loaded without any user interaction (Scroll, click, etc) -function findImgCanidatesForLazyLoading() { +function findImgCandidatesForLazyLoading() { let notLazyImages = document.querySelectorAll( 'img:not([data-src]):not([loading="lazy"])' ); + + return Array.from(notLazyImages).filter((tag) => !isInViewport(tag)); } @@ -358,10 +363,10 @@ function isInViewport(tag) { ); } -console.log( - "Consider lazyloading the following images: ", - findImgCanidatesForLazyLoading() -); +// easier to view important data using console.table. use array to define what to show in console output. + +console.table(findImgCandidatesForLazyLoadingidatesForLazyLoading(), ["src", "alt", "loading", "fetchPriority", "decoding"]) + ``` ### Find render-blocking resources