From 02f2975426f4809852215f2f17f2af0da4f3adff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20Leo=CC=81n?= Date: Thu, 19 Oct 2023 08:46:15 +0200 Subject: [PATCH 1/3] Add new snippet Lazy Fetchpriority --- ...Find-Images-With-Lazy-and-Fetchpriority.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md diff --git a/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md new file mode 100644 index 0000000..4b884de --- /dev/null +++ b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md @@ -0,0 +1,33 @@ +# Find Images With Loading Lazy and Fetchpriority + +List all images that have `loading="lazy"` and `fetchpriority=high`. + +> In reality you probably wouldn't really want `loading=lazy` and `fetchpriority=high` at the same time. That would mean don't load it initially, but when you start to load it, load it with high priority. Which is kind of contradictory! - [Barry Pollard](https://twitter.com/tunetheweb/status/1714750391890444582) + +### Attribution + +This snippet code it's based in the script shared by [Harry Roberts](https://twitter.com/csswizardry/status/1714697877245632832). + +#### Snippet + +```js copy +const MESSAGES = { + good: `The current rendered code, don't have elements with loading="lazy" fetchpriority="high"`, + bad: "In reality you probably wouldnt really want `loading=lazy` and `fetchpriority=high` at the same time. That would mean don't load it initially, but when you start to load it, load it with high priority. Which is kind of contradictory!" +} +const elementsLazyFetchpriority = document.querySelectorAll("[loading=lazy][fetchpriority=high]") +const numLazyFetchpriority = elementsLazyFetchpriority.length +const hasLazyFetchpriority = numLazyFetchpriority > 0 + + +if (hasLazyFetchpriority) { + console.log(`%c The page has ${numLazyFetchpriority} image(s) with loading="lazy" fetchpriority="high"`, 'background: #222; color: lightcoral; padding: 0.5ch; font-size: 1.28em') + elementsLazyFetchpriority.forEach((el) => console.log(el)) + + console.log(`%c ${MESSAGES.bad}`, 'background: #222; color: lightcoral; padding: 0.5ch; margin-top: 1em') +} else { + console.log(`%c ${MESSAGES.good}`, 'background: #222; color: lightgreen; padding: 0.5ch') +} + + +``` From 9e67ef67c70c420b634d580cbc6e7e6b81600b75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20Leo=CC=81n?= Date: Thu, 19 Oct 2023 17:28:28 +0200 Subject: [PATCH 2/3] Rename file to mdx --- ...tchpriority.md => Find-Images-With-Lazy-and-Fetchpriority.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename pages/Loading/{Find-Images-With-Lazy-and-Fetchpriority.md => Find-Images-With-Lazy-and-Fetchpriority.mdx} (100%) diff --git a/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx similarity index 100% rename from pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.md rename to pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx From 022faadd89a2baec175e76bed0244717f2eb8b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20Leo=CC=81n?= Date: Thu, 19 Oct 2023 17:40:49 +0200 Subject: [PATCH 3/3] Update attributtion links --- pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx | 2 +- pages/index.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx index 4b884de..ec66d93 100644 --- a/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx +++ b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx @@ -6,7 +6,7 @@ List all images that have `loading="lazy"` and `fetchpriority=high`. ### Attribution -This snippet code it's based in the script shared by [Harry Roberts](https://twitter.com/csswizardry/status/1714697877245632832). +This snippet code it's based in the [script](https://twitter.com/csswizardry/status/1714697877245632832) shared by [Harry Roberts](https://csswizardry.com/). #### Snippet diff --git a/pages/index.mdx b/pages/index.mdx index c0d2d65..e542378 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -8,7 +8,7 @@ A curated list of snippets to get Web Performance metrics to use in the browser