Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 002cbc6

Browse filesBrowse files
author
Josh Appel
committed
update imgs to lazy load script with easier to see output in console
1 parent e3f3e4b commit 002cbc6
Copy full SHA for 002cbc6

File tree

1 file changed

+11
-6
lines changed
Filter options

1 file changed

+11
-6
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+11-6Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ https://github.com/nucliweb/webperf-snippets/assets/1307927/2987a2ca-3eef-4b73-8
3030
<details>
3131
<summary>Table of Contents</summary>
3232

33+
- [Add snippet to Chrome DevTools](#add-snippet-to-chrome-devtools)
34+
- [Video](#video)
3335
- [Core Web Vitals](#core-web-vitals)
3436
- [Largest Contentful Paint (LCP)](#largest-contentful-paint-lcp)
3537
- [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
4749
- [First And Third Party Script Info](#first-and-third-party-script-info)
4850
- [First And Third Party Script Timings](#first-and-third-party-script-timings)
4951
- [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__)
5153
- [Inline CSS Info and Size](#inline-css-info-and-size)
5254
- [Get your `<head>` in order](#get-your-head-in-order)
5355
- [e.g. web.dev](#eg-webdev)
@@ -340,11 +342,14 @@ console.log(findATFLazyLoadedImages());
340342
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.
341343
342344
```js
345+
343346
// Execute it after the page has loaded without any user interaction (Scroll, click, etc)
344-
function findImgCanidatesForLazyLoading() {
347+
function findImgCandidatesForLazyLoading() {
345348
let notLazyImages = document.querySelectorAll(
346349
'img:not([data-src]):not([loading="lazy"])'
347350
);
351+
352+
348353
return Array.from(notLazyImages).filter((tag) => !isInViewport(tag));
349354
}
350355

@@ -358,10 +363,10 @@ function isInViewport(tag) {
358363
);
359364
}
360365

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+
365370
```
366371
367372
### Find render-blocking resources

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.