Top Rated Top Rated

Angular Performance

An in-depth workshop that equips participants with the tools and knowledge to perform app performance auditing and apply strategies for performance optimization.

Angular Logo
Google Chrome icon - Logo
Duration.3 days

Are you tired of performance bottlenecks holding back your Angular apps?

Want to create a lightning-fast user experience that keeps your users engaged? Look no further! Our intensive hands-on workshop is designed to help you master Angular performance optimization and refining your app's performance in every way.

You will gain a deep understanding of running performance tests effectively and utilizing performance metrics to optimize your Angular application.

Learn about Angular performance optimization with in-depth sessions on optimizing JavaScript code, native rendering performance, and much more. Get ready to supercharge your Angular applications with our engaging and interactive workshop!


  • Google Chrome icon - Logo

    The browser render pipeline

    • Understand how the browser processes the code you write

    • Runtime performance of scripting, rendering, and painting

    • Minimize the work the browser needs to do

  • Google Chrome icon - Logo

    (Core) Web Vitals

    • What is the performance score?

    • LCP, INP and CLS as well as all other important metrics

    • How to measure and improve web vitals?


    Understand the RAIL-model

    • Get to know the underlying model behind modern performance metrics

  • DevTools Logo


    • How to read, record and analyze flame charts

    • Performance Tab

    • Performance Insights Tab

    • Performance Monitor

    • Network Tab

    • Chrome & MS Edge DevTools

    • Lighthouse

    • Userflow

    • Memlab

    • Angular's DevTools & change detection profiling

  • JavaScript

    The JavaScript event loop

    • Understand how the JavaScript vm executes code

    • Learn the difference between macrotasks & microtasks

    • Gain in-depth knowledge about scheduling techniques

    • Control the event loop by prioritizing work

    • Master the single thread - main thread scheduling

  • Google Chrome icon - Logo

    Leveraging browser native features for better performance

    • Project Aurora

    • Resource hints

    • Priority hints

    • ResizeObserver & IntersectionObserver

  • CSS

    CSS and DOM performance best practices

    • Forced reflow, layout thrashing

    • CSS containment & content visibility

    • Next generation CSS features

    • ResizeObserver & IntersectionObserver

  • DevTools Logo

    Analyzing memory usage and detect memory leaks

    • Understand how JavaScript applications consume memory

    • How to inspect the memory heap

    • How to identify memory leaks

    • Strategic approaches how to fix memory leaks

  • DevTools Logo

    Ship less and more efficient

    • Network analysis and improvement strategies

    • Bundle size analysis & shipping as less code as possible

    • Resource hints

    • Priority hints

  • JavaScript

    JavaScript & TypeScript language best practices

    • Choose the right data structure

    • Looping performance

  • DevTools Logo

    Auditing, monitoring & measurement

    • How to conduct a performance audit?

    • What and how to measure?

  • Google Chrome icon - Logo

    Performance code review checklist

  • Angular Logo - Performance

    Change detection in-depth

    • zone.js & NgZone

    • Local change detection strategy

    • Go step-by-step zone-less without a big bang refactoring

    • Signals: master Angular's new reactive primitive

  • Angular Logo - Templates

    Fast Angular components

    • Learn best practices to build high performance angular components

    • How to leverage Angulars API most efficiently

  • Angular Logo - Performance


    • Improve LCP with native angular tools

    • How to save bandwidth for mobile users with optimized image handling

  • Angular Logo - Universal

    Server Side Rendering (SSR)

    • Hydration

    • Edge computing


The web has never been more exciting! But it has also never been as demanding to our devices and infrastructure as it is today. Our browsers ship new features and languages get updates only to squeeze out the last bit of performance we can get.

Performance is a crucial part to deliver an application which users love to use! Learning about the Core Web Vitals and the RAIL model will equip us with guidelines on how to evaluate an application’s performance. These metrics are crucial to develop outstanding user experience related to performance aspects.

The problem here, there are no real resources out there that show us how to apply those optimization techniques in practice. This is especially true when it comes to framework-specific questions.

This workshop will go way beyond the basics to boost your knowledge and skills. If you really want to learn about improving the performance of your Angular application, you need to be aware of and comfortable with way more than the async pipe, ChangeDetectionStrategy.OnPush & trackBy.

Building applications, especially larger ones, with Angular on the frontend, you risk running into performance bottlenecks. Therefore, to still be able to deliver a fast user experience, you must know what techniques to use to identify and remove the problems that are causing poor performance.

In this workshop, we will take a deep dive into how Angular performance optimization works and push its change detection mechanisms to the limit. Furthermore, we will have in-depth sessions on generally optimizing JavaScript code and native rendering performance.

You will go home with lots of exercises to guide you and a wealth of insights to work with, impressed by how much faster your application can get.


  • Best practices for application performance auditing

  • Web Vitals – what they are and how to measure them

  • You will understand the RAIL-model

  • Angular DevTools and Chrome DevTools

  • Eliminating performance and scripting bottlenecks

  • Network analysis for performance optimization

  • Deep understanding of zone.js and how Angular's change detection works

  • In-depth change detection optimization techniques

  • Improving performance with leveraging Angular Signals

  • Analyzing memory usage and handling memory leaks

  • Understanding & drastically improving runtime performance

  • Strategies for better architecture and code quality

Your trainers for this workshop