Web applications continue to grow more complex. They include large images, heavy JavaScript bundles, multiple modules, and dynamic pages. As the application grows, performance starts to suffer, especially during initial loading.
This is where Lazy Loading becomes a powerful optimization technique. It helps load resources only when needed, reducing the initial page size and improving user experience.
This article provides a detailed, practical, and beginner-friendly guide on how to improve web app performance using Lazy Loading, with examples in both Angular and ASP.NET Core.
Table of Contents
What Is Lazy Loading
Why Lazy Loading Improves Performance
Types of Lazy Loading (Modules, Images, APIs)
Lazy Loading in Angular – Full Walkthrough
Preloading Strategies in Angular
Lazy Loading Images in Angular
Lazy Loading in ASP.NET Core
Lazy Loading Large Objects in EF Core
Lazy Loading File Streams and Media
Real-World Best Practices
When Not to Use Lazy Loading
Conclusion
1. What Is Lazy Loading
Lazy Loading means loading only the required parts of an application when they are needed, instead of loading everything upfront.
Examples:
Loading a feature module only when the user navigates to it
Loading large images only when they appear in the viewport
Loading JavaScript bundles only on demand
Loading EF Core navigation properties only when accessed
Lazy Loading avoids unnecessary work and keeps the application fast.
2. Why Lazy Loading Improves Performance
Lazy Loading offers several performance benefits:
Faster initial load
The browser downloads fewer resources at startup.
Reduced bandwidth usage
Only required components are downloaded.
Better user experience
Users see the app faster, even if full features load later.
Efficient memory usage
Heavy modules remain unloaded until needed.
3. Types of Lazy Loading
There are different forms of Lazy Loading you can use in a web app:
3.1 Module Lazy Loading
Loading modules only when navigating to their routes.
3.2 Component Lazy Loading
Loading a component dynamically when required.
3.3 Image Lazy Loading
Using browser features to load images only when visible.
3.4 API Lazy Loading
Fetching data only when the user triggers an action.
3.5 EF Core Lazy Loading
Loading navigation properties only when accessed.
4. Lazy Loading in Angular – Full Walkthrough
Angular provides built-in support for Module Lazy Loading.
Step 1: Create a Feature Module
ng generate module admin --route admin --module app.module
Angular automatically configures the lazy-loaded route.
Generated route:
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module')
.then(m => m.AdminModule)
}
];
Step 2: Create Routes Inside the Lazy Module
const routes: Routes = [
{ path: '', component: AdminDashboardComponent }
];
Now the entire admin module is loaded only when the user navigates to /admin.
Step 3: Verify Bundle Splitting
Run:
ng build --prod
You will see individual chunks like:
main.js
polyfills.js
admin-admin-module.js
This confirms that the admin module is lazy-loaded.
5. Preloading Strategies in Angular
Angular supports preloading modules after initial load, which provides a balance between speed and user experience.
Enable Preloading
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
})
This makes lazy modules load in the background after the first load.
6. Lazy Loading Images in Angular
Modern browsers support native image lazy loading:
<img src="/assets/banner.jpg" loading="lazy" alt="Banner">
Using IntersectionObserver (Advanced)
@Directive({
selector: 'img[lazyLoad]'
})
export class LazyLoadImageDirective {
@Input() lazyLoad: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const img = this.el.nativeElement;
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = this.lazyLoad;
observer.unobserve(img);
}
});
});
observer.observe(img);
}
}
Use it like:
<img [lazyLoad]="'/assets/large-image.jpg'" />
7. Lazy Loading in ASP.NET Core
ASP.NET Core supports lazy loading at server-level for files, components, and data.
Example: Lazy Loading a Large File
Instead of loading the entire file into memory:
return File(System.IO.File.OpenRead("bigfile.zip"), "application/zip");
This streams the data on demand.
Example: Lazy Loading Middleware Services
Inject expensive services only when required using IServiceProvider.GetService().
8. Lazy Loading Large Objects in EF Core
EF Core supports lazy loading navigation properties.
Step 1: Install Package
Install-Package Microsoft.EntityFrameworkCore.Proxies
Step 2: Enable Lazy Loading
optionsBuilder.UseLazyLoadingProxies();
Step 3: Use Virtual Navigation Properties
public class Order
{
public int Id { get; set; }
public virtual Customer Customer { get; set; }
}
EF Core loads the Customer only when accessed.
9. Lazy Loading File Streams and Media in ASP.NET Core
For large videos, PDFs, or images:
public IActionResult Download()
{
var stream = System.IO.File.OpenRead("video.mp4");
return new FileStreamResult(stream, "video/mp4");
}
This avoids high memory usage and keeps the server responsive.
10. Real-World Best Practices
Use lazy loading for feature modules in Angular.
Lazy load large images using the loading="lazy" attribute.
Use preloading for frequently visited modules.
Don’t lazy load extremely small components; overhead may increase load time.
Use browser dev tools to identify largest JavaScript bundles.
Use NgOptimizedImage in Angular for better image performance.
Avoid unnecessary EF Core lazy loading in high-traffic APIs.
11. When Not to Use Lazy Loading
Avoid lazy loading when:
The feature is needed immediately at initial load
The module is too small to justify separate chunk creation
Lazy-loaded content causes visible delay
Using lazy loading on critical authentication modules
12. Conclusion
Lazy Loading is one of the most effective ways to boost web app performance. Whether you’re using Angular on the frontend or ASP.NET Core on the backend, lazy loading helps reduce initial load time, save bandwidth, and deliver smoother user experiences.
By applying the techniques explained in this article, you can significantly improve:
First Load Speed
Memory Usage
User Experience
Application Scalability