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 (opens in a new tab)

Attribution

This snippet code it's based in the script (opens in a new tab) shared by Harry Roberts (opens in a new tab).

Snippet

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",
  );
}

Find above the Fold Lazy Loaded Images Find Non Lazy Loaded Images Outside of the Viewport