Back to glossary

Term

Lazy Loading

Lazy loading is a technique where images, iframes, or JavaScript modules load only when actually needed — usually when scrolled into the viewport.

Lazy Loading — explained in more detail

Instead of fetching every image of a long page on the initial request, lazy loading fetches only what’s actually needed in the visible area (above the fold). Everything below loads later, once the user scrolls to it. That saves initial bandwidth, accelerates LCP, and reduces data volume for users who never scroll to the bottom.

In HTML, the loading="lazy" attribute on <img> and <iframe> tags is enough today — all modern browsers support it natively. For JavaScript modules, dynamic import() plays the same role.

Example / practical use

A blog page with 30 inline images, equipped with loading="lazy", initially loads only the top 2–3 — the rest follows on scroll. LCP benefits noticeably, with no build-tool changes required.

Lazy loading delays loading; preload brings it forward — both help performance, but at opposite ends. Important: never lazy-load the LCP element itself, or you delay your headline metric.

Entdecke mehr