Lazy loading is a technique that delays the loading of webpage resources until the moment they are needed. Often called asynchronous loading, it helps websites load faster by only requesting images, videos, or code as they enter the user's viewport. Using this strategy keeps initial page sizes small and improves the experience for visitors on slower connections.
What is Lazy Loading?
Lazy loading identifies resources as "non-critical" and blocks them from loading during the initial page render. Instead of the browser fetching every asset at once, it "procrastinates" until a user action, such as scrolling, triggers a request. [Average desktop image sizes increased from about 250KB to 900KB between 2011 and 2019] (MDN), making this deferral essential for modern performance.
The opposite of this method is eager loading. In an eager scenario, the browser takes care of everything immediately, fetching every image and script regardless of whether the user will ever see them. While eager loading is useful for critical "above the fold" content, lazy loading is more efficient for everything else.
Why Lazy Loading matters
Implementing this technique directly impacts how users and search engines perceive your site.
- Reduces initial load time: By shrinking the page weight, the browser can complete the critical rendering path faster.
- Improves SEO and retention: [Implementing lazy loading can improve user retention and search engine optimization by reducing page load delays] (WordStream).
- Conserves bandwidth: Data is only delivered if requested, saving money for site owners and data for users on mobile plans.
- Reduces system resource usage: Both the server and the visitor's device use less processing power because they handle fewer images and less JavaScript at startup.
[Median resource weight grew from approximately 100KB to 400KB for desktop and 50KB to 350KB for mobile between 2011 and 2019] (MDN). Lazy loading helps combat this "page bloat" by focusing on what the user needs immediately.
How Lazy Loading works
The process generally relies on the user's interaction with the page to trigger resource fetching.
- Request: The browser requests the HTML of the page.
- Identify: The browser identifies which resources are "below the fold," meaning they are not visible in the initial screen area.
- Placeholders: For images or videos, the browser may display a lightweight placeholder instead of the full file.
- Monitor: Tools like the Intersection Observer API monitor the user's scroll position.
- Fetch: When the user scrolls near a placeholder, the browser fetches the actual resource and replaces the placeholder.
Types of Lazy Loading
Different webpage elements require different strategies for deferral.
| Resource Type | Method | Strategy |
|---|---|---|
| Images/Iframes | Native Attribute | Use loading="lazy" in the HTML tag. |
| JavaScript | Code Splitting | Split code into chunks and load on demand via dynamic imports. |
| CSS | Media Queries | Mark non-critical CSS with media types like print to unblock rendering. |
| Fonts | Font Loading API | Override default font delays using preload or font-display. |
Best practices
Only target "below the fold" content. Never lazy load images at the top of the page. If a resource is needed for the initial render, lazy loading it will actually slow down the perceived performance.
Use the native loading attribute. Modern browsers support loading="lazy" for images and iframes. This is the simplest implementation and requires no custom JavaScript.
Provide a noscript fallback. If a user has JavaScript disabled and you are using a JS-based lazy loader, they may see nothing. Wrap your original image in a <noscript> tag to ensure visibility.
Asynchronously decode images. Use the JavaScript decode() method before inserting large images into the DOM. This prevents the browser from freezing while it processes the new high-resolution data.
Set height and width attributes. Always define the dimensions of placeholders. This prevents "layout shift," where the page content jumps around as images suddenly pop into place.
Common mistakes
Mistake: Lazy loading images that are already in the viewport. Fix: Ensure only assets outside the initial "fold" are deferred.
Mistake: Forgetting to handle loading errors. Fix: Set up error handlers to display an alternative image if the lazy-loaded resource fails to fetch.
Mistake: Overloading a page with too much JavaScript to handle the "lazy" part. Fix: Use native browser support first. Only use libraries like blazy.js if you need advanced features or support for very old browsers.
Mistake: Neglecting the "fold" on different devices. Fix: Test on mobile and desktop. What is "below the fold" on a laptop might be "above the fold" on a large monitor.
Lazy Loading vs Eager Loading
| Feature | Lazy Loading | Eager Loading |
|---|---|---|
| Goal | Speed up initial render | Ensure all assets are ready immediately |
| When to use | Below the fold content, large images | Hero images, critical scripts, online games |
| Key Inputs | User scroll, interaction | Initial page request |
| Risks | Content may not load fast enough on scroll | Increased bounce rates due to slow startup |
FAQ
What is the difference between lazy loading and a CDN? Lazy loading avoids unnecessary downloads by waiting until a user needs an asset. A Content Delivery Network (CDN) speeds up the delivery of those assets by storing them on servers closer to the user. These techniques work best together: use a CDN to host your images so that when the lazy load is triggered, the file arrives as fast as possible.
How does lazy loading affecting SEO? If implemented correctly, it improves SEO by making your page load faster, which is a ranking factor for engines like Google. However, if the implementation hides content from search crawlers, it could be harmful. Using standard native loading attributes helps search engines understand that the content exists even if it is not loaded immediately.
Can I lazy load video?
Yes. For videos that do not autoplay, you can use the preload attribute with a value of none. For autoplaying videos, Chrome often handles lazy loading automatically, but you can also use loading="lazy" or Intersection Observers to trigger the load.
When should I use eager loading instead? Use eager loading for anything critical to the page's identity or functionality. This includes your logo, main navigation scripts, and the primary "hero" image. Online games and complex web applications often use eager loading with a "loading screen" to ensure the experience is not interrupted later.
Common ways to implement this in code? Beyond the native HTML attribute, developers use four patterns: 1. Lazy initialization (setting objects to null until called). 2. Virtual proxies (loading the real object only when a proxy is accessed). 3. Ghosts (loading an object in a partial state first). 4. Value holders (using a generic object to stand in for data fields).
