/ˈleɪ.zi ˈloʊ.dɪŋ/
noun — “the art of making content appear only when you actually need it, like magic.”
Lazy Loading is a web performance technique where resources such as images, videos, or scripts are loaded only when they are required, typically when they enter the user’s viewport. Instead of fetching all content upfront, Lazy Loading defers the loading of non-critical assets to improve page speed, reduce bandwidth usage, and enhance overall Web Performance.
Lazy Loading can be implemented using native HTML attributes like loading="lazy" for images and iframes, or through JavaScript libraries that monitor the user’s scroll position and trigger resource loading dynamically. This technique is especially effective on mobile devices, where bandwidth is limited and performance is critical, tying closely into Mobile Optimization strategies.
Beyond images, Lazy Loading can apply to videos, large scripts, or even modules in single-page applications, often combined with CDN delivery and Browser Caching to maximize speed. By delaying non-essential downloads, it prioritizes content the user is actively engaging with, enhancing perceived load time and responsiveness.
Conceptually, Lazy Loading is like opening a menu at a restaurant: you only bring the dish to the table when it’s ordered, instead of filling the table with every possible option at once.
Lazy Loading is like having your browser procrastinate on the heavy lifting — it only works when it absolutely must.
See Web Performance, Mobile Optimization, CDN, Browser Caching, AMP.