Angular Performance Optimization Techniques

Course details

This course equips you with the skills you need to analyze and improve the performance of your Angular applications. Learn how to identify common performance issues, implement optimizations for change detection, and ensure your applications run smoothly and efficiently by leveraging key techniques such as code splitting, lazy loading, data management, and server-side rendering. By the end of this course, you’ll be equipped with practical strategies to enhance user experience and responsiveness in real-world Angular projects.

Learning objectives
Identify performance issues in Angular applications.
Fix performance issues in Angular applications.
Avoid common pitfalls that can negatively impact performance during development.

Concepts

0. Introduction

01 - Optimize Angular performance

1. Performance and Angular

02 - Why performance matters
03 - How modern web applications work
04 - The Angular build process

2. Tools for Performance Assessment

05 - Lighthouse - Get feedback and action items to improve
06 - The Chrome dev tools profiler
07 - The Angular dev tools profiler
08 - Dependency analysis
09 - Build budgets
10 - Linting your code for common mistakes
11 - Performance tools recap

3. Improving Performance by Removing Code

12 - Removing unused dependencies and imports
13 - Be critical about dependencies
14 - Standalone components instead of NgModules
15 - It's not just code - Images, CSS, fonts, and other assets
16 - The NgOptimizedImage directive

4. Improving Performance with Lazy-Loading

17 - How lazy-loading works
18 - Lazy-loading with modules
19 - Lazy-loading with standalone components
20 - The @defer block - Introduction
21 - @defer block configuration and options

5. Angular-Specific Techniques for Performance

22 - How Angular change detection works
23 - Container and presentation components
24 - Using Signals to improve change detection
25 - Caching data with services
26 - Caching data with Angular service-worker

6. Server-Side Rendering

27 - What is server-side rendering (SSR)
28 - Server-side rendering in action
29 - Static-site generation (SSG)
30 - Measuring improvements with SSR and SSG
31 - Pros and cons of SSR and SSG

Conclusion

32 - Next steps in your Angular journey