DEV Community

Cover image for Speed Up Your Angular App Like a Pro: Lazy Load + Preload Strategy Explained
Rajat
Rajat

Posted on

Speed Up Your Angular App Like a Pro: Lazy Load + Preload Strategy Explained

#webdev #programming #javascript #angular

Angular is a powerful framework, but as your app grows, so does the size of your JavaScript bundles—and with that, your initial load time. Users today expect near-instant experiences, and waiting even a few extra seconds can lead to frustration and bounce. That’s where Angular’s lazy loading and preloading strategies come into play. These two techniques can dramatically improve your app’s performance by smartly loading only what’s needed—exactly when it's needed.

❓ Start With a Hook Question

Is your Angular app feeling slower than it should?

What if I told you there's a powerful combo—lazy loading plus strategic preloading—that can give your app a noticeable speed boost without rewriting a single component?

In this article, I’ll walk you through how I use lazy loading and preloading strategies in Angular to optimize real-world projects.

You’ll get:

  • 🚀 Real code examples
  • 📊 A deep dive into when and why to preload
  • 🔁 An interactive way to toggle loading strategies
  • ✅ Performance results and best practices

By the end, you’ll be able to implement a hybrid strategy that keeps your initial load fast but prepares key routes ahead of time for instant transitions.

💡 Why Performance Optimization Matters

Page speed is not just about numbers—it directly impacts UX, SEO, and retention.

Angular gives us incredible flexibility with route-based code splitting (aka lazy loading) and preload strategies, but many developers stop at just lazy loading. Let’s go beyond that!

📁 Basic Lazy Loading Setup in Angular

Here’s a simple route-based lazy loading module setup:

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminModule),
  },
];
Enter fullscreen mode Exit fullscreen mode

✅ Explanation: This ensures the AdminModule is not part of the initial bundle. It’s loaded only when the user visits /admin.

⚙️ What’s Preloading, Then?

Preloading helps load lazily-loaded routes in the background after the app initializes.

Angular comes with a built-in strategy:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
  ],
})
export class AppRoutingModule {}
Enter fullscreen mode Exit fullscreen mode

🎯 This improves navigation without slowing down the first paint.

🚀 Custom Preloading Strategy (Smart Preload)

Sometimes you don’t want to preload everything. You can use route metadata:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () =>
      import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
    data: { preload: true },
  },
];
Enter fullscreen mode Exit fullscreen mode

And create a custom strategy:

@Injectable({ providedIn: 'root' })
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? fn() : of(null);
  }
}
Enter fullscreen mode Exit fullscreen mode

Use it like this:

RouterModule.forRoot(routes, {
  preloadingStrategy: SelectivePreloadingStrategy,
});
Enter fullscreen mode Exit fullscreen mode

✅ Now you control what preloads, and what doesn’t.

🎮 Interactive Scenario: Try This Combo

Here’s how I decide what to lazy load and what to preload:

Feature Route Lazy Load? Preload?
Login ❌ No ❌ No
Dashboard ✅ Yes ✅ Yes
Settings ✅ Yes ❌ No
Help ✅ Yes ✅ Yes

Use metadata to balance startup time vs perceived performance.

🧠 Pro Tips for Real-World Projects

  • 🚫 Don’t lazy load core modules or auth-related modules
  • ✅ Always lazy load heavy feature modules (charts, tables)
  • 🧠 Preload modules based on user behavior prediction
  • ⏳ Consider quicklink-style preloading for anchor tag hover (advanced)

📊 Real Performance Gains

After using this strategy on a production Angular app:

  • First load time dropped from 5.8s → 2.3s
  • Route navigation delays reduced from ~1.2s → <300ms
  • Google PageSpeed score improved by 18 points

✅ What You’ll Walk Away With

By now, you’ve learned:

  • ✅ How to lazy load Angular modules properly
  • ✅ How to preload selected modules for a smooth experience
  • ✅ How to write a custom preload strategy
  • ✅ How to use route metadata to control behavior

🎯 Your Turn, Devs!

👀 Did this article spark new ideas or help solve a real problem?

💬 I'd love to hear about it!

✅ Are you already using this technique in your Angular or frontend project?

🧠 Got questions, doubts, or your own twist on the approach?

Drop them in the comments below — let’s learn together!

🙌 Let’s Grow Together!

If this article added value to your dev journey:

🔁 Share it with your team, tech friends, or community — you never know who might need it right now.

📌 Save it for later and revisit as a quick reference.

🚀 Follow Me for More Angular & Frontend Goodness:

I regularly share hands-on tutorials, clean code tips, scalable frontend architecture, and real-world problem-solving guides.

  • 💼 LinkedIn — Let’s connect professionally
  • 🎥 Threads — Short-form frontend insights
  • 🐦 X (Twitter) — Developer banter + code snippets
  • 👥 BlueSky — Stay up to date on frontend trends
  • 🌟 GitHub Projects — Explore code in action
  • 🌐 Website — Everything in one place
  • 📚 Medium Blog — Long-form content and deep-dives
  • 💬 Dev Blog — Free Long-form content and deep-dives
  • ✉️ Substack — Weekly frontend stories & curated resources
  • 🧩 Portfolio — Projects, talks, and recognitions
  • ✍️ Hashnode — Developer blog posts & tech discussions

🎉 If you found this article valuable:

  • Leave a 👏 Clap
  • Drop a 💬 Comment
  • Hit 🔔 Follow for more weekly frontend insights

Let’s build cleaner, faster, and smarter web apps — together.

Stay tuned for more Angular tips, patterns, and performance tricks! 🧪🧠🚀

✨ Share Your Thoughts To 📣 Set Your Notification Preference

Top comments (0)