Preloading strategies in Angular - Performance & Optimization

Performance: Preloading strategies

MEDIUM IMPACT

Preloading strategies affect how quickly lazy-loaded modules become available, impacting page load speed and interaction readiness.

Loading lazy modules in an Angular app

Angular

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

Modules preload in the background after initial load, reducing wait time on navigation.

📈 Performance GainImproves LCP by loading modules early without blocking initial render.

Loading lazy modules in an Angular app

Angular

RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })

Modules load only when requested, causing delays on first navigation and slower user interaction.

📉 Performance CostIncreases LCP and delays interaction readiness due to network fetch on demand.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
NoPreloading	Minimal until navigation	1 reflow per lazy load	Paint delayed on navigation	[X] Bad
PreloadAllModules	Minimal upfront	Single reflow after preload	Faster paint on navigation	[!] OK
CustomPreloadingStrategy	Minimal and selective	Single reflow for critical modules	Balanced paint timing	[OK] Good

Rendering Pipeline

Preloading strategies influence when module code is fetched and parsed, affecting the critical rendering path and interaction readiness.

→Network

→Script Parsing

→Execution

→Layout

⚠️ BottleneckNetwork latency and script execution delay

Core Web Vital Affected

LCP

Preloading strategies affect how quickly lazy-loaded modules become available, impacting page load speed and interaction readiness.

Optimization Tips

1Preload critical modules to improve navigation speed without blocking initial render.

2Avoid preloading all modules on slow networks to prevent bandwidth saturation.

3Use custom preloading strategies to balance performance and resource use.

Performance Quiz - 3 Questions

What is the main benefit of using PreloadAllModules in Angular routing?

A Modules load only when user clicks, saving bandwidth

B Modules load in background after initial render, improving navigation speed

C Modules are bundled into one large file to reduce requests

D Modules are never loaded to save CPU

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, filter by JS files to see when lazy modules load; use Performance tab to record page load and check script execution timing.

What to look for: Look for module files loading after initial HTML and CSS; verify no blocking scripts delay first paint; check interaction readiness timing.

Practice

1. What is the main purpose of preloading strategies in Angular?

easy

A. To load lazy modules in the background to improve navigation speed

B. To prevent any modules from loading until explicitly requested

C. To compile all modules at build time for faster startup

D. To automatically update Angular to the latest version

Solution

1. Step 1: Understand lazy loading in Angular

   Lazy loading delays loading modules until needed, which can slow navigation initially.

2. Step 2: Role of preloading strategies

   Preloading strategies load lazy modules in the background after app startup to speed up future navigation.

3. Final Answer:

   To load lazy modules in the background to improve navigation speed -> Option A

4. Quick Check:

   Preloading = background loading for faster navigation [OK]

Hint: Preloading means loading modules quietly before needed [OK]

Common Mistakes:

• Confusing preloading with eager loading
• Thinking preloading disables lazy loading
• Assuming preloading updates Angular versions

2. Which of the following is the correct way to enable preloading of all lazy modules in Angular routing?

easy

A. RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

B. RouterModule.forRoot(routes, { preload: true })

C. RouterModule.forRoot(routes, { lazyLoad: true })

D. RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })

Solution

1. Step 1: Identify Angular's preloading strategy option

   Angular uses the preloadingStrategy property in router config to set preloading behavior.

2. Step 2: Recognize the correct strategy for all modules

   PreloadAllModules is the built-in strategy to preload all lazy modules after app loads.

3. Final Answer:

   RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) -> Option A

4. Quick Check:

   PreloadAllModules = preload all lazy modules [OK]

Hint: Use preloadingStrategy: PreloadAllModules to preload all [OK]

Common Mistakes:

• Using 'preload: true' which is invalid
• Confusing NoPreloading with preloading all
• Using lazyLoad option which doesn't exist

3. Given this Angular routing setup:

const routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

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

What happens after the app loads?

medium

A. Only 'home' module loads eagerly, 'admin' loads on demand

B. 'admin' module preloads, 'home' module does not

C. Neither module preloads; both load on demand

D. Both 'home' and 'admin' modules preload in the background

Solution

1. Step 1: Analyze the preloading strategy used

   The routing uses PreloadAllModules, which preloads all lazy modules after app startup.

2. Step 2: Identify lazy loaded modules

   Both 'home' and 'admin' modules are lazy loaded via loadChildren.

3. Final Answer:

   Both 'home' and 'admin' modules preload in the background -> Option D

4. Quick Check:

   PreloadAllModules preloads all lazy modules [OK]

Hint: PreloadAllModules preloads every lazy module automatically [OK]

Common Mistakes:

• Assuming only first lazy module preloads
• Thinking modules load only on demand with PreloadAllModules
• Confusing eager loading with preloading

4. Identify the error in this Angular routing configuration:

const routes = [
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
];

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

medium

A. Missing 'pathMatch' property in route

B. Using string syntax for loadChildren is deprecated; should use dynamic import

C. Preloading strategy must be NoPreloading when using lazy loading

D. RouterModule.forRoot should not have a second argument

Solution

1. Step 1: Check loadChildren syntax

   The string syntax ('./dashboard/dashboard.module#DashboardModule') is deprecated in Angular; dynamic import is required.

2. Step 2: Confirm preloading strategy and other options

   Preloading strategy can be used with lazy loading; no error there. 'pathMatch' is optional here.

3. Final Answer:

   Using string syntax for loadChildren is deprecated; should use dynamic import -> Option B

4. Quick Check:

   Use dynamic import() for loadChildren [OK]

Hint: Use dynamic import() syntax for loadChildren [OK]

Common Mistakes:

• Using old string syntax for loadChildren
• Thinking preloading strategy conflicts with lazy loading
• Assuming pathMatch is mandatory for all routes

5. You want to preload only the 'admin' module but not the 'user' module in your Angular app. Which approach correctly implements this custom preloading strategy?

hard

A. Set preloadingStrategy to NoPreloading and preload 'admin' module eagerly

B. Use PreloadAllModules and then lazy load 'user' module manually

C. Create a class implementing PreloadingStrategy that preloads only routes with data.preload = true

D. Mark 'admin' module as eager loaded and 'user' as lazy loaded without preloading

Solution

1. Step 1: Understand custom preloading strategy

   Angular allows creating a class implementing PreloadingStrategy to control which modules preload.

2. Step 2: Use route data property to select modules

   By checking data.preload flag in routes, the strategy can preload only selected modules like 'admin'.

3. Final Answer:

   Create a class implementing PreloadingStrategy that preloads only routes with data.preload = true -> Option C

4. Quick Check:

   Custom strategy uses data.preload flag [OK]

Hint: Use data.preload flag with custom PreloadingStrategy [OK]

Common Mistakes:

• Using PreloadAllModules when selective preload is needed
• Trying to preload modules eagerly without strategy
• Confusing eager loading with preloading