Lazy loading: how much of the page defers its load

What this count measures

This rule counts how much of a page defers loading, across both images and iframes. It is a summary, not a per-image verdict: images/offscreen-lazy is the rule that decides whether a particular image should have the attribute.

Iframes are the part worth noticing. An embedded video or map is a whole document with its own scripts, and loading="lazy" on the <iframe> keeps all of it out of the initial load until the visitor scrolls near it.

What squirrel checks

The rule runs on every crawled page. It counts every <img> by its loading attribute and every <iframe> with loading="lazy". It emits up to two checks:

• Skipped when the page has no images. Message: No images found. Iframes are not considered in this branch.
• lazy-loading passes when any image or iframe is lazy. Message: 9 element(s) use lazy loading, counting both kinds together.
• lazy-loading-missing reports info alongside that pass, counting every image whose loading value is neither exactly lazy nor exactly eager. That includes an absent attribute, an empty one, a misspelling and a different capitalisation. Message: 4 image(s) without loading attribute, with Consider adding loading='lazy' for below-fold images as the value.
• lazy-loading reports info when nothing is lazy and the page has more than three images. Message: 12 images without lazy loading, with Add loading='lazy' to below-fold images as the value.
• lazy-loading reports info when nothing is lazy and there are three images or fewer. Message: 2 image(s) found, no lazy loading detected.

Severity info, weight 3. Images explicitly marked eager are counted as neither lazy nor missing.

Elements inside <noscript> are skipped: a browser with scripting enabled reads <noscript> content as plain text, so nothing in it loads or renders. See content inside noscript.

How to fix it

<iframe src="https://www.youtube.com/embed/…" loading="lazy" title="…"></iframe>

Add loading="lazy" to embeds and to images the visitor has to scroll to. Leave the first screen alone, and see images/offscreen-lazy for which images those are.

Enable / disable

Disable this rule

[rules]
disable = ["images/lazy-loading"]

Disable all Images rules

[rules]
disable = ["images/*"]

Enable only this rule

[rules]
enable = ["images/lazy-loading"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• images/offscreen-lazy: the per-image decision about which ones should be lazy.
• perf/lazy-above-fold: images lazy-loaded that should not be.
• perf/render-blocking: the other resources delaying the first render.
• images/image-file-size: the weight deferring is meant to postpone.

Images findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Browser-level image lazy loading, web.dev
• The img element, MDN

Check your site

Run squirrel audit https://example.com and open the Images section of the report. Each page is reported with its lazy and non-lazy element counts. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.