Glossary · Web Development

Lazy Loading

Lazy loading delays loading images, scripts or other resources until they are needed, often just before scrolling into view, to speed up first load.

Updated October 6, 2026

Lazy loading is a performance technique that defers fetching non-critical resources until the user needs them, such as images below the fold or code for a route that has not been opened yet.

Why it matters

Loading less up front means faster initial rendering and lower data use. Browsers support it natively for images and iframes through an HTML attribute. Used wrongly it hurts: lazy loading the main hero image delays the largest contentful paint, and layout shifts occur if image dimensions are missing.

Example

<img src="hero.jpg" width="1200" height="600" alt="Hero">
<img src="gallery-1.jpg" width="400" height="300" alt="" loading="lazy">

The hero loads immediately; the gallery image loads only when the visitor scrolls near it.

Common mistakes

  • Lazy loading the first visible image.
  • Omitting width and height, causing the page to jump as images appear.
  • Hiding content that must be indexed or found by in-page search behind scroll-triggered scripts.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Glossary · Web DevelopmentResponsive ImagesResponsive images are images delivered in multiple sizes or formats so the browser picks the best file for the screen width, density and format support.Glossary · SEO & MarketingCore Web VitalsCore Web Vitals are Google's page experience metrics, LCP, INP and CLS, that measure loading speed, responsiveness and visual stability for real users.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.