How to Lazy-Load Off-Screen Images

Defer images below the fold so they don't compete with the initial render.

Easy Medium Impact 10 min

Why It Matters

Loading every image up front — including ones far below the fold — wastes bandwidth and delays the content users actually see first. Native lazy-loading defers off-screen images until the user scrolls near them.

How to Fix

Add loading="lazy"

Add the attribute to images and iframes that start below the fold.

Never lazy-load the hero

Keep above-the-fold / LCP images eager (omit lazy) so they load immediately.

Code Fix

html

Before (broken)

<img src="gallery-12.jpg" width="800" height="600" alt="...">

After (fixed)

<img src="gallery-12.jpg" width="800" height="600" alt="..." loading="lazy" decoding="async">

Platform-Specific Instructions

WordPress

WordPress adds loading="lazy" automatically since 5.5; ensure a "Skip lazy load" rule covers your hero image.

Next.js

next/image lazy-loads by default; pass priority to the hero to opt out.

Check with our tool

Website Speed Test

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit