Deferred off-screen images

Silktide checks whether your page downloads images the visitor can't see yet - images further down the page, below the first screen. Loading those up front delays the content the visitor is actually looking at.

The remedy is lazy loading: the browser fetches each image just before it scrolls into view, instead of downloading every image on the page immediately.

Why this matters

When a page loads, the browser has limited bandwidth to spend, and every image it downloads competes with everything else. Spending that bandwidth on images three screens down means the headline image, text, and buttons the visitor is waiting for arrive later.

On long, image-heavy pages the waste is large: a visitor who reads the first screen and leaves may have paid - in time and mobile data - for dozens of images they never saw.

How to fix it

1. Add loading="lazy" to images below the first screen. Browsers support this natively, with no scripts required:

<!-- Far down the page: don't load until the visitor nears it -->
<img src="team-photo.jpg" alt="Our team" loading="lazy" width="800" height="600">

2. Do not lazy-load images at the top of the page, especially the largest one - that delays what visitors see first and hurts more than it helps.
3. Many CMSs and frameworks now lazy-load images automatically; if yours does not, check for a setting or plug-in before editing templates.
4. Keep explicit dimensions on lazy-loaded images so the page doesn't jump when they arrive - see Explicit image sizes.

How Silktide tests this

1. Load the page in a real browser, using the device type, connection speed, and test location configured for your speed tests.
2. Identify images that are downloaded during the initial load but positioned entirely below the visible screen, and are not already deferred.
3. Report each off-screen image with the download size that could be deferred.
4. Grade the page by the total deferrable size: around 30 KB graded down, 100 KB or more graded as poor.

Troubleshooting

The image is visible on my screen

What is "off-screen" depends on the screen. Silktide tests with the device configured for your speed tests, so an image beside your desktop fold can sit below the first screen of a smaller viewport. Lazy loading is still safe: the image loads as soon as the visitor nears it.

We already lazy-load with a script

Older script-based approaches sometimes still trigger downloads too early, or the script may not cover images added by other plug-ins. The reported images show exactly what was downloaded while off-screen; native loading="lazy" is the simplest reliable fix.

Learn more

• Lazy loading images (web.dev)
• Browser-level image lazy loading (web.dev)
• Explicit image sizes
• Web Vitals