L

Lazy Loading

Performance 3 min read Entry 35 of 78
Definition

Lazy loading delays downloading images and videos until the visitor is about to scroll them into view.

In plain English

A long page might contain forty images, but a visitor sees three when they arrive. Without lazy loading, the browser fetches all forty before the page settles.

With it, the browser loads what’s visible and quietly fetches the rest as you scroll. The page appears sooner and uses less data.

Why it matters

It’s one of the highest-return performance changes available, and modern WordPress does most of it for you automatically.

It directly improves how quickly a page becomes usable, which is what visitors feel, and what Core Web Vitals measure.

How it works

  1. Off-screen images get loading=’lazy’WordPress adds this attribute for you.
  2. The browser skips them at firstOnly the visible area is fetched.
  3. The rest load in as you scrollUsually just before they’d become visible.
  4. Reserve the spaceWidth and height attributes stop the layout jumping as images arrive.

Never lazy load your hero image

It’s visible immediately, so delaying it makes your most important content arrive last, and wrecks your Largest Contentful Paint score.