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.