Angular Performance Optimization Techniques
1h 54mIntermediate2025-05-01
Authors
Alain R. Chautard
Google Developer Expert in web technologies and Angular
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.
Learning objectives
Identify performance issues in Angular applications.
Fix performance issues in Angular applications.
Avoid common pitfalls that can negatively impact performance during development.
Skills covered
AngularFront-End Web DevelopmentCloud ServicesWeb DevelopmentCloud ComputingOpen SourceOne-Off
Concepts
Introduction
- Optimize Angular performance
Performance and Angular
- Why performance matters
- How modern web applications work
- The Angular build process
Tools for Performance Assessment
- Lighthouse - Get feedback and action items to improve
- The Chrome dev tools profiler
- The Angular dev tools profiler
- Dependency analysis
- Build budgets
- Linting your code for common mistakes
- Performance tools recap
Improving Performance by Removing Code
- Removing unused dependencies and imports
- Be critical about dependencies
- Standalone components instead of NgModules
- It's not just code - Images, CSS, fonts, and other assets
- The NgOptimizedImage directive
Improving Performance with Lazy-Loading
- How lazy-loading works
- Lazy-loading with modules
- Lazy-loading with standalone components
- The @defer block - Introduction
- @defer block configuration and options
Angular-Specific Techniques for Performance
- How Angular change detection works
- Container and presentation components
- Using Signals to improve change detection
- Caching data with services
- Caching data with Angular service-worker
Server-Side Rendering
- What is server-side rendering (SSR)
- Server-side rendering in action
- Static-site generation (SSG)
- Measuring improvements with SSR and SSG
- Pros and cons of SSR and SSG
Conclusion
- Next steps in your Angular journey