Unlocking Angular: Performance Optimization
1h 31mAdvanced2025-06-25
Authors

Derek Peruo
Angular.js Architect
Course details
In today’s fast-paced digital world, even milliseconds can make the difference between user engagement and abandonment. This course is designed for senior engineers tasked with delivering blazing-fast, highly scalable applications under relentless pressure. Here, Derek Peruo—a senior technical lead for large-scale Angular and Ionic projects—dives deep into Angular’s internals, unveiling advanced techniques like optimizing change detection, isolating injectors, and leveraging Angular Refs to eliminate performance bottlenecks. If you're looking to gain a competitive edge by maximizing every aspect of your Angular app’s performance, this course is your roadmap to significantly leveling up your efficiency. Don't just meet user expectations—exceed them.
Learning objectives
Implement performance optimizations in Angular by configuring and fine-tuning key internals such as change detection, view encapsulation, and injection tokens.
Identify and apply techniques for isolating injectors, managing component hierarchies, and avoiding long tasks to keep the main thread clear.
Leverage Angular Refs, such as ElementRef, TemplateRef, and ViewRef, to maximize performance and manage component references efficiently.
Learning objectives
Implement performance optimizations in Angular by configuring and fine-tuning key internals such as change detection, view encapsulation, and injection tokens.
Identify and apply techniques for isolating injectors, managing component hierarchies, and avoiding long tasks to keep the main thread clear.
Leverage Angular Refs, such as ElementRef, TemplateRef, and ViewRef, to maximize performance and manage component references efficiently.
Skills covered
AngularAdvancedFront-End Web DevelopmentCloud ServicesWeb DevelopmentCloud ComputingOpen Source
Concepts
0. Introduction
- 01 - Users want fast applications
- 02 - What you should know
- 03 - Using the example code and Codespaces
- 04 - Application overview
1. Performance Metrics and Tools
- 05 - Common performance metrics
- 06 - Lighthouse overview
- 07 - Angular DevTools overview
2. Performance Optimizations
- 08 - Common configuration tweaks
- 09 - Component view encapsulation
- 10 - Skipping change detection on component subtrees
- 11 - Fine-tuning state management
- 12 - Optimizing slow computations
- 13 - Defer loading with defer blocks
- 14 - Detecting and preventing memory leaks
- 15 - Enhancing router performance
- 16 - Optimizing forms and reactive forms
- 17 - Optimizing images
- 18 - Avoiding zone pollution
- 19 - Angular without Zone.js (Zoneless)
- 20 - Boost UX with the app shell pattern
- 21 - Coding challenge
- 22 - Solution
3. Code Architecture Patterns
- 23 - Reduce bundle size with tree-shakable providers
- 24 - Isolating injectors within hierarchies
- 25 - Keeping the main thread clear with web workers
- 26 - Achieving offline-first with service workers
- 27 - Get data instantly with client-side caching
- 28 - Balancing security with performance
- 29 - Gain more control with Angular refs
- 30 - Coding challenge
- 31 - Solution
Conclusion
- 32 - A deeper look at Angular
Related courses
- Unlocking Authentic Communication in a Culturally-Diverse Workplace
- Unlocking Hidden Mentors in Your Company
- Unlocking the Power of People Operations
- Unlocking Team Candor, Creativity, and Innovation as a Leader
- Unlocking Your Potential
- Google Workspace Hacks: Unlocking Digital Productivity
- Team Engagement: Unlocking Commitment
- Microsoft 365 Copilot: Unlocking AI for Enhanced Productivity
Related learn paths
- Vector Databases Professional Certificate
- Improve Your Time Management Skills
- Leadership Effectiveness in Global Organizations
- Communication Skills for New Managers
- DEI Awareness for Managers
- Working Globally as an Individual Contributor
- Strategic Execution and Business Impact for People Managers
- DEI Awareness for Individual Contributors