diff --git a/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx new file mode 100644 index 0000000..ec66d93 --- /dev/null +++ b/pages/Loading/Find-Images-With-Lazy-and-Fetchpriority.mdx @@ -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](https://twitter.com/csswizardry/status/1714697877245632832) shared by [Harry Roberts](https://csswizardry.com/). + +#### 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') +} + + +``` 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