Skip to content

Performance

How to lazy-load images correctly

Every image fetched immediately, including the ones far below the fold, competes for bandwidth with the content someone is actually looking at. One attribute per image fixes it. Leave it off the hero image — lazy-loading the largest visible element makes it slower, not faster.

What 13x checks

This is rule performance.lazy-loading in the public registry: Below-the-fold images are lazy-loaded. It runs on every audit, against the pages we actually fetched, and its result is derived from the response rather than estimated.

Surface
Performance
Score weight
4 of the readiness score
Scope
Reported as skipped when the page renders only with JavaScript
Applies
Only where the market or the page shape makes it relevant

Registry version 2026-07-30. Every rule is published, and the audit is deterministic — the same page produces the same finding every time.

The fix

The same text the audit hands you when this check fails on your own site.

None of the images use lazy loading. Add it to everything below the fold:

html code
<img src="/below-fold.webp" loading="lazy" decoding="async"
     width="800" height="600" alt="…" />

Leave it off the hero image. Lazy-loading the largest visible element delays it, which makes LCP worse — the opposite of what you want. Mark that one fetchpriority="high" instead.

Support is universal and there is no JavaScript involved.

Does your site have this problem?

13x checks this and 112 others against your live URL in about 30 seconds. No account, and every finding comes with the fix for your framework.

No signup. Results in 30 seconds.

More performance checks