@@ -30,6 +30,8 @@ https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8
30
30
<details >
31
31
<summary>Table of Contents</summary>
32
32
33
+ - [ Add snippet to Chrome DevTools] ( #add-snippet-to-chrome-devtools )
34
+ - [ Video] ( #video )
33
35
- [ Core Web Vitals] ( #core-web-vitals )
34
36
- [ Largest Contentful Paint (LCP)] ( #largest-contentful-paint-lcp )
35
37
- [ 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
47
49
- [ First And Third Party Script Info] ( #first-and-third-party-script-info )
48
50
- [ First And Third Party Script Timings] ( #first-and-third-party-script-timings )
49
51
- [ Inline Script Info and Size] ( #inline-script-info-and-size )
50
- - [ Inline Script Info and Size Including ` __NEXT_DATA__ ` ] ( #inline-script-info-and-size-including-__next_data__ )
52
+ - [ Inline Script Info and Size Including ``` __NEXT_DATA__ `` `] ( #inline-script-info-and-size-including-__next_data__ )
51
53
- [ Inline CSS Info and Size] ( #inline-css-info-and-size )
52
54
- [ Get your ` <head> ` in order] ( #get-your-head-in-order )
53
55
- [ e.g. web.dev] ( #eg-webdev )
@@ -340,11 +342,14 @@ console.log(findATFLazyLoadedImages());
340
342
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.
341
343
342
344
` ` ` js
345
+
343
346
// Execute it after the page has loaded without any user interaction (Scroll, click, etc)
344
- function findImgCanidatesForLazyLoading () {
347
+ function findImgCandidatesForLazyLoading () {
345
348
let notLazyImages = document .querySelectorAll (
346
349
' img:not([data-src]):not([loading="lazy"])'
347
350
);
351
+
352
+
348
353
return Array .from (notLazyImages).filter ((tag ) => ! isInViewport (tag));
349
354
}
350
355
@@ -358,10 +363,10 @@ function isInViewport(tag) {
358
363
);
359
364
}
360
365
361
- console .log (
362
- " Consider lazyloading the following images: " ,
363
- findImgCanidatesForLazyLoading ( )
364
- );
366
+ // easier to view important data using console.table. use array to define what to show in console output.
367
+
368
+ console . table ( findImgCandidatesForLazyLoadingidatesForLazyLoading (), [ " src " , " alt " , " loading " , " fetchPriority " , " decoding " ] )
369
+
365
370
` ` `
366
371
367
372
### Find render-blocking resources
0 commit comments