Angular Performance Optimization Workshop

Name: I like the inclusion of hands-on coding exercises where we can verify our understanding of the presented concepts and techniques. I also appreciate the fact that we were granted access to the repo and resources used for the presentation.
Item: Modern Angular Testing: Vitest & Playwright
Rating: 5
Author: An attendee

The Performance Boost for Your Angular Applications!

Develop fast & successful Angular solutions

Duration

2 days

Next event

2024

Level

Basic knowledge of Angular required

Location

Remote & In-House

Language

English / German

Price from

€1.210

Request in-house event Book your ticket

Alexander Thalhammer

Experienced software developer and architect with 20 years of experience in planning and implementing web-based business applications. Certified professional trainer according to ISO/IEC 17024, 9 years teaching assistant at the University of Graz.

Performance determines whether an Angular app feels fast, converts well, and is accepted in day-to-day use. In this workshop, we analyze the typical causes of slow Angular applications: large bundles, inefficient loading paths, expensive templates, unnecessary change detection, third-party code, and missing measurement.

To start, we set up the tools for agentic software engineering in the Angular performance context: Codex, Claude Code, IDE integration, and other tools. Then we work with a professional performance audit framework and the same tools the trainer uses in customer projects: Lighthouse, PageSpeed, WebPageTest, Chrome DevTools, Angular DevTools, bundle analysis, and real user monitoring.

After that, we optimize load time and runtime performance with current Angular v22 features: @defer, NgOptimizedImage, SSR/SSG, hybrid rendering, server routes, hydration, event replay, incremental hydration, Signals, OnPush, and zoneless change detection. Hands-on labs help participants apply the techniques in practice; if needed, we also analyze real project problems from participants.

By the end of the workshop, you will be able to:

measure the performance of your Angular app with a professional audit framework and prioritize problems
optimize load time and runtime performance with current Angular v22 features
use agentic workflows with Codex and Claude Code for performance audits and fixes

Prerequisites:

solid Angular fundamentals and initial project experience
ideally your own project or concrete performance problems from your daily work
helpful: access to an active subscription for Anthropic or OpenAI for the agentic exercises

Highlights

✅ Fully online – no travel required!
✅ Proven and cutting-edge best practices for Angular
✅ Agentic Software Engineering with Codex, Claude Code, and Angular CLI MCP
✅ Interactive: Ask questions and engage in discussions
✅ Live coding, exercises & pair programming with the trainer
✅ Live audits: performance analysis of participants’ real projects
✅ Case study that serves as a blueprint for your own projects

Performance Workshop Agenda

Part 1: Agentic Software Engineering Setup for Angular Performance

Project setup: Angular, Git, ESLint (including performance rules)
Highlight: Our Angular Best Practices Rules & Style Guide for AI and teams: custom rules based on the official Angular best practices, extended with additional refinements, special rules, and project guardrails for AI tools; including custom Agent Skills for performance checks and other topics
Codex: CLI, IDE extensions vs app, different modes, Git worktrees, automations
Claude Code: CLI, IDE extensions vs app, Plan, Goal, checkpoints, and diff review
Best practices for VS Code, JetBrains, and other IDEs, other apps/tools & models
Agentic workflows: analyze a performance issue, create a plan, implement a patch, run builds/tests, prepare the review, human-in-the-loop

Part 2: Professional Performance Audits & Tools

Performance audit framework and Core Web Vitals target model (LCP, INP, CLS)
Google PageSpeed, Chrome Lighthouse, and performance budgets in CI
WebPageTest.org, the web-vitals library (including attribution), and Real User Monitoring
Chrome DevTools Performance panel including Angular Profiling Track
Angular DevTools: Components, Profiler, Signal Graph, Route Visualization, and Transfer State
Source Map Explorer, Bundle Analyzer, and ImportGraphVisualizer
AI-assisted audit: summarize measurement data, prioritize hypotheses, and derive an action plan

Part 3: Optimizing Load Times for Angular Apps

Classic web performance optimizations: fonts, critical CSS, and resource hints (preload, preconnect, fetchpriority)
Optimization of bundle size, tree shaking, and dependency boundaries
3rd-party libraries, CSS, and component frameworks
Lazy loading, preloading strategies, and router-based code splitting
Deferrable Views: with @defer triggers, prefetch, and viewport options
NgOptimizedImage (ngSrc) directive: for images
Server-side rendering (SSR), static site generation (SSG), hybrid rendering, and server routes
Hydration, event replay, and incremental hydration (default since v22)
Prerendering: with getPrerenderParams() and deployment

Part 4: Optimizing Angular Runtime Performance

Change Detection explained, OnPush, and stable Signals APIs
Zoneless change detection: default for new apps
OnPush-by-default (v22): migration and explicitly eager Change Detection
Change Detection optimization, ChangeDetectorRef, and exhaustive checks
High-performance reactive rendering: with signal, computed, linkedSignal, toSignal, resource, and httpResource
Angular templates: pipes, flags, @for track, regex, and template literals
CDK virtual scrolling: and UX improvements for large data sets
INP optimization: breaking up long tasks, scheduler.yield(), and main-thread hygiene
Memory profiling: heap snapshots, detached DOM, and typical leak sources (subscriptions, effects)
RxJS subscription best practices

Part 5: Live Audits, Current Angular Updates & Further Optimizations

Live audits: joint performance analysis of participants’ projects
Angular updates, migrations, Vitest, Angular ARIA, and Material/CDK improvements
Angular resolver alternatives and best practices for API communication
Service workers (PWA), web workers, and scheduling
Nx, Vite, esbuild, and Application Builder
Case study and conclusion

Upcoming events

Individual in-house company workshops

All of our seminars are always available remotely or in-house. Contact us to make an appointment

Inquire now

No upcoming events found

Reviews

I like the inclusion of hands-on coding exercises where we can verify our understanding of the presented concepts and techniques. I also appreciate...

I like the inclusion of hands-on coding exercises where we can verify our understanding of the presented concepts and techniques. I also appreciate the fact that we were granted access to the repo and resources used for the presentation.

Modern Angular Testing: Vitest & Playwright

Every session brought important insights. A lot of useful information about best practices and about the best tooling and libraries to use, including...

Every session brought important insights. A lot of useful information about best practices and about the best tooling and libraries to use, including the latest advancements like component testing in Cypress. I thought the structure going from e2e to unit to integration tests worked surprisingly well.

Professional Angular Testing: Cypress Edition

I liked that the workshop support was on a high level, it had a lot of information and it had exercises that covered...

I liked that the workshop support was on a high level, it had a lot of information and it had exercises that covered pretty well the theoretical part.The presenter was fluent, well prepared, so the course was captivating.

Micro Frontends with Angular

I had never used Storybook and only fiddled around with Figma and Cypress on my own before. As a novice on the design...

I had never used Storybook and only fiddled around with Figma and Cypress on my own before. As a novice on the design field this course described the roles and purposes of these three tools well. I now have better knowledge to pitch the idea of implementing the most suitable parts to our development cycle.

Scalable Design Systems with Storybook and Angular

Manfred is very approachable, patient, respectful, and easy to understand, even when attendees ask repetitive questions - this is impressive. Explanation of the...

Manfred is very approachable, patient, respectful, and easy to understand, even when attendees ask repetitive questions - this is impressive. Explanation of the labs was very good. Explanations focused on the mental model behind the code, which is most important to registering conceptual relationships in the framework/ddd.

Advanced Angular: AI-Ready Architectures with Signals

Most of the topics that were covered in this workshop will help us for future decisions for our app architecture. Even if the...

Most of the topics that were covered in this workshop will help us for future decisions for our app architecture. Even if the team would decide to not use what was shown in the workshop, it's still very useful to get an overview of how an app architecture could be, so that we can find the best solution for our problems. I really liked that we had some time on the last day to go into specific problems of our app and to hear about what could be changed and what we could work on

Advanced Angular: AI-Ready Architectures with Signals

Kinda everything .. Philipp is a very good trainer.

Angular Security Workshop

Being new to Angular and with very little experience using NX this gave me a great introduction to many of the concepts and...

Being new to Angular and with very little experience using NX this gave me a great introduction to many of the concepts and pointers on best practices for structuring the code base. I will feel more confident working on our company code base now.
I also appreciated the concrete examples of how to implement DDD in folder and files structures.

Angular Migration Workshop

Individual In-House Company Workshops

All of our workshops are also available remotely or in-house at any time.
Contact us for an appointment

Inquire now

FAQs on our workshops

How do your workshops and courses work?

Our seminars around Angular are a mixture of lecture, live coding and actual exercises. Together we implement what we have learned during the workshop directly on a example project. This mixture guarantees that the course never gets boring and “hands-on” is required instead of gray theory.

Who is the Angular hands-on training designed for?

Our Angular hands-on workshop is aimed at anyone who wants to develop applications with Angular in the future or is already doing so and now wants to better understand the background, context and building blocks of the framework.

Participants should have basic knowledge of web development (basic knowledge of HTML and JavaScript).

For advanced Angular developers we offer advanced seminars and intensive trainings on specific use cases.

Where do the Angular workshops take place?

Our trainings take place as public workshops in seminar rooms at central hotels in Germany, Austria and Switzerland. In-House company workshops take place at your office or conference room.

All courses are also available as remote workshops, where we meet online in a virtual classroom and do the training via video calls, screen sharing and live coding.

Who are the trainers?

Our workshops are held by experienced trainers and software architects. In recent years, we have provided Angular training to well-known companies – including well-known banks, insurance companies, industrial groups. Trainers include well-known conference speakers, authors of books and professional articles, bloggers, Google Developer Experts and university lecturers.

At what times are the training sessions held?

Especially for dedicated company trainings, we are happy to accommodate you. Typical times are 9:00AM to 4:30PM / 5:00PM. Some of our English-language workshops are timed so that you can also attend at US friendly times.

Can we also book online training courses?

Absolutely. In fact, since the pandemic, this has been our main business model and we have had very good experience with it. We use a combination of screen sharing, interactive online whiteboards, and are happy to connect to your computer for support during the exercises if you wish. As with our on-site training, we use a combination of short presentations, discussions, live coding and hands-on labs.

Since there is no travel involved, you also save time and money. We can also respond more flexibly to your scheduling needs.

Can we adapt the training for our purposes?

Yes, very much so. In fact, that’s one of the benefits of dedicated corporate training. You are welcome to weight, shorten or add to our agenda proposals. As a rule, we also coordinate with your trainer about 2 weeks before the training. If you wish, we can also arrange it earlier.

Why Angular?

Among other things, Angular’s wide distribution speaks for itself, but also the fact that Google, an Internet giant that also uses the framework very intensively, is behind it. Google alone has over 2600 solutions based on it. Due to the wide distribution, there is a large community and thus a lot of know-how on the market as well as (free and commercial) products that are adapted to Angular. In addition, Angular provides much of what you need for large applications out of the box: test automation, form management, routing, etc. In this respect, you get a stack whose components are coordinated and work together in the long term.

How do you compensate for different prior knowledge?

The good news up front is that participants with different levels of prior knowledge are the rule, not the exception, in adult education. That’s why you’ll find optional fade-in hints and bonus exercises on our exercise sheets, for those who are a little faster. Of course, we also provide personal support for the exercises.

How many participants are recommended?

If you book a company training with us, we leave this decision to you in principle. However, experience shows that there should not be more than 15 participants, especially since a seminar lives very much from questions, discussions and practical exercises.

What software do we need?

Please install the following software packages on your computer:

– NodeJS in current version (we test with current LTS version).
– Angular CLI (npm i -g @angular/cli)
– Git
– Visual Studio (free) or WebStorm/IntelliJ (commercial)