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