Improve Performace of Angular application

 

Great one! 🚀 Improving the performance of an Angular application is crucial — especially as your app grows. Here’s a complete checklist to supercharge your Angular app’s speed, with practical steps 👇

---

🧠 1. Use OnPush Change Detection

What	Why
Use ChangeDetectionStrategy.OnPush in components	Reduces unnecessary checks and DOM updates

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

---

📦 2. Lazy Load Modules

What	Why
Split large app into modules & lazy load routes	Loads only what's needed, reduces initial bundle size

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

---

🧼 3. Use Pure Pipes

What	Why
Use custom pipes with pure logic (pure: true)	Angular skips recalculation if inputs don’t change

---

✂️ 4. Minimize Bundle Size

What	How
Remove unused code	Enable tree shaking
Use ng build --prod	Minifies, uglifies and removes dead code
Use source-map-explorer	Analyzes bundle contents

bash
ng build --configuration production
npx source-map-explorer dist/**/*.js

---

🕹 5. Optimize Images and Assets

Step	Tool
Compress images	TinyPNG, ImageMagick
Use lazy loading for images	<img loading="lazy" ...>
Serve responsive images	Use srcset and smaller dimensions

---

⚙️ 6. *Use TrackBy in ngFor

Why	Without trackBy, Angular re-renders the entire list

<tr *ngFor="let item of items; trackBy: trackByFn">

trackByFn(index: number, item: Item) {
  return item.id;
}

---

🗃 7. HTTP Optimization

What	How
Avoid duplicate HTTP calls	Cache results in services
Use interceptors	Add retry, auth tokens, or loading spinners
Use RxJS operators like shareReplay()	For caching observable responses

---

🧠 8. Use Web Workers (for heavy CPU tasks)

What	Why
Offload CPU-heavy work	Prevents UI from freezing

Angular supports Web Workers for long-running tasks like image processing, calculations, etc.

---

🔥 9. Enable SSR (Server-Side Rendering)

Tool	Why
Angular Universal	Improves first load time, good for SEO

ng add @nguniversal/express-engine

---

🧹 10. Clean Up Subscriptions

| Why | Prevent memory leaks & slowdowns |

Use takeUntil, AsyncPipe, or unsubscribe in ngOnDestroy.

---

🚀 11. Use Service Workers (for PWA)

• Angular’s service worker caches static content and speeds up subsequent loads.

bash
ng add @angular/pwa

---

🔍 12. Use Performance Monitoring Tools

Tool	Use
Lighthouse (Chrome DevTools)	Audit performance, accessibility
Angular DevTools	Profile components, detect unnecessary renders
Web Vitals	Track CLS, FID, LCP etc.

---

✅ Bonus Tips

• Avoid using any type (bad for optimization)

• Debounce search/filter operations

• Avoid deep nested loops and watchers

• Break large components into smaller, focused ones

• Prefer const & let over var

Read More