Lazy Loading: Only Load What the Visitor Sees

Test #06 checks whether images and embedded content load only when the visitor scrolls to them. A massive performance gain, native in modern browsers.

Key Takeaways

Without lazy loading, the browser downloads ALL images on the page at load time — even invisible ones below the fold.
Orilyt measures coverage: ≥ 50% of images/iframes with loading="lazy" = score 100, 0% = score 30.
The loading="lazy" attribute is native HTML — no plugin needed, one line is enough.

An average WordPress page contains 10 to 40 images. Without lazy loading, the browser downloads all of them on page open — including those at the very bottom that the visitor may never see.

The result: megabytes of data transferred for nothing, a slower first render, and a degraded mobile experience. It's pure waste.

Orilyt test #06 detects this issue and measures lazy loading coverage. Let's see how it works and how to turn its results into a sales argument.

Illustration of test #06: deferred image loading (lazy loading)

Why Loading Invisible Images Is a Problem

On a blog post with 15 images, the visitor only sees 2 or 3 on the first screen. Without lazy loading, the browser downloads all 15 in parallel, consuming bandwidth and delaying visible content rendering.

The impact is severe on mobile: on a 4G connection, each non-deferred image adds hundreds of milliseconds to load time. Multiply by 15 images and you get a site that takes 5–10 seconds to fully load.

Google knows this: Largest Contentful Paint (LCP) and page weight are ranking factors. A site without lazy loading penalizes itself doubly — slowness AND excess data consumption.

On mobile, 70% of images on a long page will never be seen by the visitor. Without lazy loading, the browser downloads them anyway.

How Does Test #06 Work?

Orilyt analyzes the page's HTML and counts two things:

# The total number of images (<img>) and iframes (<iframe>) on the page.
L The number of those elements that use the loading="lazy" attribute.

The ratio gives the coverage rate. The score is calculated as follows:

100≥ 50% coverage → score 100/100

8020–49% → score 80/100

601–19% → score 60/100

300% (no lazy loading) → score 30/100

If no images or iframes are detected, the score is 50/100 (not measurable — the page has no candidates).

The detailed report shows the exact number of images, iframes, and coverage percentage. You instantly know if the problem is critical or minor.

loading="lazy": The Browser's Native Lazy Loading

Since 2020, all modern browsers support the HTML attribute loading="lazy". No JavaScript needed, no plugin — a simple modification to the <img> tag is enough:

Before (blocking)

<img src="photo.jpg" alt="Photo">

After (lazy loading)

<img src="photo.jpg" alt="Photo" loading="lazy">

The browser only downloads the image when the visitor approaches its position on the page. It's transparent, has no SEO impact (Google understands loading="lazy"), and works with iframes too (YouTube videos, Google Maps).

Note: images visible on the first screen (above the fold) should NOT use lazy loading. They must load immediately for a good LCP. WordPress 5.9+ automatically adds loading="lazy" to images, except the first one.

How to Use This Test in Your Proposals

Lazy loading is a powerful argument: the client can understand the problem in one sentence ("your site downloads 40 images on load when the visitor only sees 3").

Here's how to structure your recommendation using the FIA method:

Fact: "Your page contains X images, but only Y use deferred loading. The other Z are downloaded immediately, even when invisible."
Impact: "The browser downloads N MB of unnecessary data. Mobile load time is doubled. Google penalizes slow pages."
Action: "Add loading=\"lazy\" to all images below the fold. With WordPress, enable native lazy loading or use a plugin (WP Rocket, Perfmatters). Estimated time: 20 minutes."

The Orilyt report shows the exact image count, coverage rate, and a clear score — perfect for illustrating the problem in a proposal.

A 14-character attribute that reduces initial page weight by 60–80%. It's one of the best effort-to-impact ratios in the entire audit.

Integrating This Test Into Your Workflow

Test #06 fits naturally into a comprehensive performance diagnosis:

Run the Orilyt audit → the "Smart image loading" score appears in the Performance section.
If the score is red (30/100), open the details: you'll see how many images and iframes lack lazy loading.
After the fix, re-run the audit and use the before/after comparison to show the page weight reduction to the client.

Combined with page weight (#28), modern images (#05), and image dimensions (#20) tests, lazy loading is part of the complete media optimization strategy.

Conclusion

Lazy loading is one of the simplest and least known performance levers. A native HTML attribute, supported by all browsers, that can reduce initial page weight by 60–80%.

Orilyt test #06 gives you an instant diagnosis: image count, lazy loading coverage, clear score. It's a concrete argument for every client proposal.

Test a client site now — the ratio of total images to lazy-loaded images often holds surprises.

How Many Images Are Loaded Unnecessarily?

Run a free audit and discover any site's lazy loading coverage in 2 minutes.

Run a free audit

Performance Lazy loading Test #06 Pre-sales