In other words, lazy loading is a technique for waiting to load certain parts of a webpage — especially images — until they are needed. Instead of loading everything all at once, known as "eager" loading, the browser does not request certain resources until the user interacts in such a way that the resources are needed. When implemented properly, lazy loading can speed up page load times while, at the same time, improving overall user experience.
For instance, a blog post might have an image at the top of the page and a diagram near the bottom. Someone reading the blog post might not reach the bottom of the text for several minutes, so the browser waits to load the diagram until the reader scrolls to that section. This way, the page loads more quickly at first, because the browser is loading one image instead of two.
What The Lazy Loading Process Entails
Talking about the lazy loading process, the overall website content is initially loaded only for what is visible in the browser's viewport (the area the user sees). Other resources are placed in a placeholder or "on hold" until the user scrolls to their location on the page.
User navigation typically is what triggers lazy-loading images. In particular, when a user scrolls down on a page, that tells the browser to load the images that appear there. When the user scrolls, the browser identifies the new content that has entered the viewport and loads those specific resources on demand.
When a webpage loads, the part that a user sees is called "above the fold," while the part that the user does not see yet is called "below the fold."* Images that are above the fold need to load right away, or else the user experience will be impacted. But the user does not see images below the fold until they scroll down. Thus, images below the fold can use lazy loading.
"Above the fold" and "below the fold" originated from newspaper layouts. Newspapers typically come folded in half horizontally, and the front half — the area above the fold — is what the reader sees first. When the term is applied to a web layout, the "fold" is the bottom of the user's screen.
Why Lazy Loading Matters — Optimizing Websites For Speed
Web performance is a catch-all term for the measurable and perceived quality of a website’s user experience, with a particular emphasis on the page’s speed and reliability. Developers and website owners can take several steps to improve their website’s performance. These steps include optimizing web design factors like image sizes, code formatting, and external script usage, along with choosing good providers for hosting, content caching, and load balancing.
Lazy Loading matters because it significantly improves website performance by speeding up initial page load times, reducing bandwidth usage, and creating a smoother user experience. It works by delaying the loading of non-critical resources like images, videos, and JavaScript until they are needed, such as when a user scrolls down the page. This approach is particularly beneficial for modern websites with large amounts of content and for users on slower connections or mobile devices. Thus, it's essential to mention the topmost benefits.
They include:
- Faster initial load times: By only loading content that is immediately visible, the initial page load is much faster, which reduces user frustration and bounce rates.
- Reduced bandwidth usage: Users download only the resources they actively need, which is especially important for those with limited data plans or slow mobile connections.
- Improved user experience: A faster initial load and smoother scrolling, without content shifting unexpectedly as it loads, create a more responsive and engaging experience.
- Better performance metrics: Lazy loading can improve key metrics like Largest Contentful Paint (LCP) and Interaction to Next Paint (INP), which are used by search engines to evaluate user experience.
- Lower server load: By reducing the number of resources the server needs to deliver at once, it helps lower server strain.
In other words, when webpages load faster and more reliably, they not only offer a better user experience but also tend to rank higher in organic search results, are more visible to potential visitors, and often see higher conversion rates. One way to speed up the webpage's load performance is by utilizing the lazy loading elements inside the core website code.
The Lazy Loading Implementation Process For Images
Images and videos take up most of the page-load time on most websites. To make your website load faster and improve user experience and engagement, be sure to reduce the file size of images without hurting quality. Likewise, advancements in image- and video-compression techniques have resulted in new formats like WebP and JPEG 2000, which deliver superior quality with a smaller file size.
One way to implement lazy loading is to use the HTML attribute loading in an image tag. Adding loading="lazy", as in the example below, tells the browser to wait to load the image until the user scrolls close to it:
<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">Web developers can also use programming frameworks to implement more sophisticated lazy loading. Angular is commonly used for this purpose. The JavaScript library React also supports lazy loading.
Content Delivery Networks, Frameworks Plus Libraries
Cloudflare Mirage is another way to implement lazy loading. In addition to automatically resizing images, Mirage acts as a lazy loader, only loading images on demand. The Cloudflare Mirage feature is available to Cloudflare customers on the Pro and Business self-serve plans, as well as Enterprise customers. Still, the other easy way to implement lazy loading is through the use of frameworks and libraries. Below are the three most common ones.
A. React
A popular JS library often used for creating user interfaces, React enables you to build reusable components that are rendered for websites and web apps. Among those components are tools for applying lazy loading and delivering the best possible experience for users. The React framework includes two components for lazy loading:
- React.Suspense, with which you can specify when to render the lower-level components. Use it to wrap lazy components and to define when to trigger event loads.
- React.lazy, with which you can dynamically load content by splitting code between components and granularly defining which parts of a component to load first.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Code language: JavaScript (javascript)The article Lazy-Load React and Boost Page Performance for Your Apps describes React components, including the ones that support lazy loading, and the procedures for putting them into practice and for boosting page performance with Cloudinary.
B. JavaScript
JS, long the default language for building websites and applications, is universally supported and relatively easy to master due to its many built-in capabilities. Among those capabilities is support for lazy loading.
You can implement lazy loading in JavaScript (JS) with the native Intersection Observer API or with lazy-loading libraries, such as Lozad and Yall. It’s also worth noting that the Intersection Observer API in JavaScript offers a powerful way to implement lazy loading.
This API allows for asynchronous monitoring of how page elements intersect with each other or with the user’s viewport, acting as a trigger for content loading. This approach is particularly useful for dynamic and responsive websites where content visibility changes based on user interaction and screen size.
Lozad.js
Lozad.js, an open-source library based on Intersection Observer, can lazy-load media with both dynamic and static elements. You can easily add the library to your JS files with no dependencies.
Yall.js
Yall.js, another open-source library based on Intersection Observer, can lazy-load media, CSS background images, and <noscript> elements. Additionally, with this library, you can monitor changes to the Document Object Model (DOM) for dynamically added elements along with Mutation Observer.
Eventually, with the Interaction Observer API, you can asynchronously monitor how page elements intersect with the other elements or the user’s viewport, leveraging those events as triggers to load elements. For example, you can lazy-load as the user scrolls down your page, collect metrics on user experience or ad visibility, enforce “infinite scrolling,” and withhold resources until the user requests them.
The article Lazy-Loading JavaScript for High-Speed Webpage Performance explains why developers like to use JS libraries, what lazy loading is, how JS supports lazy loading, how to simplify implementation with Intersection Observer, and how to lazy-load with Cloudinary.
C. Angular
The Angular framework offers built-in support for lazy loading with the --route flag, which you add to your modules and define with loadChildren your loading preference. See this example:
const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
}
];
Code language: JavaScript (javascript)Angular also supports several packages for lazy loading, including these two:ngx-loadable, an open-source package with an API for loading indicators, which contains the ngx-loadable component, with which you wrap modules; and the LoadableService service, with which you load them as desired.
- ngx-loadable, an open-source package with an API for loading indicators, contains the ngx-loadable component, with which you wrap modules; and the LoadableService service, with which you load them as desired.
- hero-loader, an open-source package for lazy-loading modules according to triggers like route changes, clicks, or mouseovers. This package extends the capabilities of the native loadChildren method.
As one of the most popular frameworks for building web apps, Angular can significantly speed up development and make many useful features accessible, including lazy loading. The article How to Get Killer Page Performance With Angular Lazy Loading defines lazy loading and explains why it’s important, how to implement it in Angular, and with ngx-loadable, and how to lazy-load with Cloudinary.
Progressive Web Apps And Other Webpage Resources
Progressive Web Apps (PWAs) are lightweight, native-like apps that offer better user experiences and enable advanced interactivity. You can, for example, enable offline access for users through PWAs without having to create a standalone app.
The article Progressive Web Apps: Architecture and Examples defines PWAs and chronicles their architecture, the elements they need, and user expectations. Also explored are best practices for developing PWAs and ways in which to optimize PWAs’ visual content through Cloudinary.
Utilizing lazy loading for the other webpage resources is an approach through which you can prioritize content, delaying loads for less relevant or visible content. Consequently, your apps or websites load faster, delivering an enhanced user experience.
A simple yet effective way to implement lazy loading is by using the HTML loading attribute in image tags. For example: <img src=”image.png” loading=”lazy” alt=”…” width=”200″ height=”200″>. This method is supported in most modern browsers and allows images to load only when they are about to enter the viewport, contributing to quicker page load times.
Typically, you enable lazy loading by programming content to load only when it’s being viewed or when it’s soon to appear as the user scrolls down. If the user does not scroll down or the content never approaches the viewport, ensure that no loading occurs. Be that as it may, there are still other webpage resources that can utilize the Lazy Loading technique.
They include:
- JavaScript: JavaScript is what is known as a render-blocking resource — meaning a browser cannot render the page until JavaScript code loads. JavaScript code can be divided into smaller modules that are loaded when needed, reducing the load time for pages that need to execute JavaScript (learn more).
- CSS: CSS is also a render-blocking resource. Splitting a CSS file into multiple files that only load when necessary can help reduce the amount of time that a browser is blocked from rendering the rest of the page. Non-blocking CSS files should have their own link with a media property added to tell the browser when to load them (learn more).
- iframes: iframes are used to embed content from an external source into a webpage. iframe tags can include the same HTML loading attribute described above for images.
The Main Advantages
- Faster page load: All else being equal, webpages with smaller file sizes load faster. With lazy loading, a webpage starts off smaller than its full size and thus loads faster. Speedy web performance has numerous benefits, including better SEO, higher conversion rates, and an improved user experience.
- No unnecessary content: Suppose a page loads multiple (below-the-fold) images, but the user exits the page before scrolling down. In such a case, the bandwidth used to deliver the images and the browser's time spent requesting and rendering the images were essentially wasted. In contrast, lazy loading ensures that these images only load when necessary. This saves time and processing power, and it may save money for the website owner because less bandwidth is used.
- Performance improvement: With lazy loading, you use only the resources for the relevant content, eliminating unnecessary content requests, reducing the processing power for content rendering, and loading your site faster.
- Cost reduction: Since content is delivered only when needed, you save bandwidth, and your content server spends less time processing requests. Concurrently, you reduce resource costs, particularly if you pay on a per-use basis.
The Notable Drawbacks:
- Users may request resources faster than expected: For instance, if a user scrolls quickly down a page, they might have to wait for the images to load. This could negatively impact user experience.
- Additional communication with server: Instead of requesting all the page content at once, the browser might have to send multiple requests to the website's servers for content as the user interacts with the page. The use of a content delivery network (CDN) minimizes this potential drawback because the images are cached by the CDN, and the browser does not have to send a request all the way to the origin server to fetch them.
- Additional code for the browser to process: If a developer adds several lines of JavaScript to a webpage to tell the browser how to lazy load page resources, this adds to the amount of code that the browser has to load and process. If done inefficiently, this slight additional loading and processing time might outweigh the time saved by lazy loading.
When implementing lazy loading, you may consider adopting a few tips and best practices to sidestep trigger delays and content shifting, also to avoid abusing lazy-loading capabilities.
Add Buffer Time for Image Loads
If users scroll too quickly through your page or the connection is throttled, your lazy content might not load before the placeholders hit the viewport. That means that users end up waiting for content to load or never see it.
To avoid that scenario, consider triggering loads slightly before content is requested, e.g., when it comes within 500 pixels of the viewport. Such a setup would allow a little extra time for the content to load before the user sees it without significantly impacting performance.
Add buffer time with Intersection Observer by increasing the size of your bounding box, which is defined by the root and rootMargin parameters. You can also set your event listener to trigger if the difference between your element and the viewport edge exceeds zero.
Avoid Content Shifting With Lazy Loading
If your website contains responsive or dynamic content and the size of your element placeholders differs from that of your loaded elements, your content might shift and, while the elements are loading, bump the content users are viewing, decimating the user experience. If loading is delayed or if it fails, content shifts can also negatively affect site appearance.
The best way to avoid content shifts is to define your element container with the loaded component’s height and width, ensuring that when your page initially renders, all the elements are in their final position as they load.
Do Not Lazy-Load All the Images
For all that it’s tempting to lazy-load all your images, that’s a bad idea since no images load until your JS code executes. The result? Loading of the images at the top of your page might be delayed or might fail entirely.
A good strategy is to automatically load the content that users see when they first visit your page. Be sure to account for the differences between standard screen sizes when determining which elements to automatically load, since the relevant ones might change.
Also, do not lazy-load elements that are right next to the viewport edge to avoid issues that might surface during scrolling. In fact, if you have five or fewer media elements on your page, it might not be worth the time and effort to implement lazy loading. In those cases, any savings in load time might be offset by the coding effort.
Consider Lazy Loading With Cloudinary
Cloudinary (get started for free) is a cloud-based service that simplifies and automates the process of manipulating, optimizing, and delivering images and videos, optimized for all devices at all bandwidths. With Cloudinary’s SDKs, which you can seamlessly integrate with your app, you can efficiently transform, optimize, and deliver media, largely through automation. Now that lazy loading works in all modern browsers, it’d be a smart move to lazy-load resources with the Cloudinary SDK’s image tag.
What Does The Eager Loading Process Entail?
It's also worth noting that, besides lazy loading, there is also the eager loading process. It's a loading process for all webpage resources at the same time, or as soon as possible. Some applications that use eager loading may display a "Loading" screen. Complex, code-heavy web applications, such as online games, may prefer to use eager loading.
In other words, this is a strategy for fetching data from a database where you query for a main entity and all its related entities in a single query, typically using a JOIN. The method avoids multiple subsequent queries, making it efficient when you know you will use the related data, and is a contrast to lazy loading, which fetches related data only when it's explicitly accessed.
When you are certain you'll need the related data, you can use eager loading when your application logic consistently requires both the main and associated entities. To avoid the N+1 problem: This is a common performance issue where you perform one query for the parent objects, and then N additional queries for each parent's child objects. Eager loading solves this by performing one or a few joins instead of N+1 queries.
Note that, when the related data isn't too large, it can be less efficient if the related data sets are extremely large, as the initial query will be larger and use more memory. One simple example is fetching a user and all their blog posts in a single query, instead of first getting the user and then running a separate query for their posts. When displaying a list of products, fetch each product's category information in the same query.
Summary Thoughts:
In today’s digital-first age, online site performance is critical for ensuring business continuity, attracting repeat sales, and gaining a competitive advantage. Lazy loading accelerates performance for websites and apps. Many implementation techniques are available; however, choose wisely. In particular, become familiar with the universal practices and the language- and framework-specific approaches.
Simply put, lazy loading is a technique that delays loading certain parts of a webpage, such as images and other resources, until they are needed. This approach isn’t limited to web development but is a common strategy in programming, contributing significantly to efficiency and resource management.