Angular-Performance-Optimierung
Alexander Thalhammer
Erfahrener Software-Entwickler und -Architekt mit 20 Jahren Erfahrung in Planung und Umsetzung Web-basierter Geschäftsanwendungen. Zertifizierter Fachtrainer gemäß ISO/IEC 17024, 9 Jahre Teaching Assistent an der Universität Graz.
Performance entscheidet, ob eine Angular-App schnell wirkt, gut konvertiert und im Alltag akzeptiert wird. In diesem Workshop analysieren wir die typischen Ursachen langsamer Angular-Anwendungen: große Bundles, ungünstige Ladepfade, teure Templates, unnötige Change Detection, Third-Party-Code und fehlende Messbarkeit.
Zu Beginn richten wir die Werkzeuge für agentisches Software Engineering im Angular-Performance-Kontext ein: Codex, Claude Code, IDE-Integration und andere Tools. Danach arbeiten wir mit einem professionellen Performance-Audit-Framework und denselben Tools, die der Trainer in Kundenprojekten einsetzt: Lighthouse, PageSpeed, WebPageTest, Chrome DevTools, Angular DevTools, Bundle-Analysen und Real User Monitoring.
Anschließend optimieren wir Ladezeit und Runtime-Performance mit aktuellen Angular-v22-Funktionen: @defer, NgOptimizedImage, SSR/SSG, Hybrid Rendering, Server Routes, Hydration, Event Replay, Incremental Hydration, Signals, OnPush und zoneless Change Detection. In Hands-on-Labs werden die Techniken praktisch geübt; bei Bedarf analysieren wir auch reale Projektprobleme der Teilnehmenden.
Nach dem Workshop kannst du:
- die Performance Deiner Angular-App mit einem professionellen Audit-Framework messen und Probleme priorisieren
- Ladezeit und Runtime-Performance mit aktuellen Angular-v22-Features gezielt optimieren
- agentische Workflows mit Codex und Claude Code für Performance-Audits und -Fixes einsetzen
Voraussetzungen:
- solide Angular-Grundkenntnisse und erste Projekterfahrung
- idealerweise ein eigenes Projekt oder konkrete Performance-Probleme aus dem Alltag
- hilfreich: Zugriff auf eine aktive Subscription für Anthropic oder OpenAI für die agentischen Übungen
Highlights
✅ Komplett online – keine Anreise erforderlich!
✅ Bewährte und neueste Best Practices für Angular
✅ Agentic Software Engineering mit Codex, Claude Code und Angular CLI MCP
✅ Interaktiv: Fragen stellen und an Diskussionen teilnehmen
✅ Live-Coding, zahlreiche Übungen & Pair-Programming mit dem Trainer
✅ Live-Audits: Performance-Analyse echter Projekte der Teilnehmenden
✅ Fallstudie, die als Blaupause für eigene Projekte verwendet werden kann
Agenda des Performance Workshops
Teil 1: Agentic Software Engineering Setup für Angular-Performance
- Projekt-Setup: Angular, Git, ESLint (inkl. Performance-Regeln)
- Highlight: Unsere Angular Best Practices Rules & Style Guide für KI und Teams: eigene Rules, basierend auf den offiziellen Angular Best Practices, erweitert um zusätzliche Verfeinerungen, Spezial-Regeln und Projekt-Guardrails für AI-Tools; inkl. eigener Agent Skills (für Performance-Checks und andere Themen)
- Codex: CLI, IDE-Extensions vs. App, verschiedene Modi, Git-Worktrees, Automations
- Claude Code: CLI, IDE-Extensions vs. App, Plan, Goal, Checkpoints und Diff-Review
- Best Practices für VS Code, JetBrains und andere IDEs, andere Apps/Tools & Modelle
- Agentische Workflows: Performance-Issue analysieren, Plan erstellen, Patch umsetzen, Builds/Tests ausführen, Review vorbereiten, Human-in-the-Loop
Teil 2: Professionelle Performance-Audits & Tools
- Performance-Audit-Framework und Core-Web-Vitals-Zielbild (LCP, INP, CLS)
- Google PageSpeed, Chrome Lighthouse und Performance-Budgets in CI
- WebPageTest.org, web-vitals-Library (inkl. Attribution) und Real User Monitoring
- Chrome DevTools Performance-Panel inkl. Angular-Profiling-Track
- Angular DevTools: Components, Profiler, Signal Graph, Route Visualization und Transfer State
- Source Map Explorer, Bundle Analyzer und ImportGraphVisualizer
- KI-gestütztes Audit: Messdaten zusammenfassen, Hypothesen priorisieren und Maßnahmenplan ableiten
Teil 3: Optimierung der Ladezeiten für Angular-Apps
- Klassische Web-Performance-Optimierungen: Fonts, Critical CSS und Resource Hints (preload, preconnect, fetchpriority)
- Optimierung von Bundle-Größe, Tree Shaking und Dependency-Grenzen
- Third-Party-Libs, CSS- und Component-Frameworks
- Lazy Loading, Preloading-Strategien und routerbasiertes Code Splitting
- Deferrable Views: mit @defer-Trigger, Prefetch und Viewport-Optionen
- NgOptimizedImage (ngSrc) Direktive: für Bilder
- Server-Side Rendering (SSR), Static Site Generation (SSG), Hybrid Rendering und Server Routes
- Hydration, Event Replay und Incremental Hydration (seit v22 Default)
- Prerendering: mit getPrerenderParams() und Deployment
Teil 4: Optimierung der Laufzeit-Performance von Angular
- Change Detection erklärt, OnPush und stabile Signal-APIs
- Zoneless Change Detection: Default für neue Apps
- OnPush-by-default (v22): Migration und explizit eager Change Detection
- CD-Optimierung, ChangeDetectorRef und exhaustive Checks
- High-Performance Reactive Rendering: mit signal, computed, linkedSignal, toSignal, resource und httpResource
- Angular-Templates: Pipes, Flags, @for track, Regex und Template-Literals
- CDK Virtual Scrolling: und UX-Verbesserungen für große Datenmengen
- INP-Optimierung: Long Tasks aufbrechen, scheduler.yield() und Main-Thread-Hygiene
- Memory-Profiling: Heap Snapshots, Detached DOM und typische Leak-Quellen (Subscriptions, Effects)
- RxJS Subscription Best Practices
Teil 5: Live-Audits, aktuelle Angular-Updates & weitere Optimierungen
- Live-Audits: gemeinsame Performance-Analyse der Projekte der Teilnehmenden
- Angular-Updates, Migrationen, Vitest, Angular ARIA und Material/CDK-Verbesserungen
- Angular-Resolver-Alternativen und Best Practices für API-Kommunikation
- Service Workers (PWA), Web Workers und Scheduling
- Nx, Vite, esbuild und Application Builder
- Fallstudie und Fazit
Aktuelle Termine
Rezensionen
Individuelle Firmenworkshops
Alle unsere Workshops & Seminare sind jederzeit auch Remote oder In-House verfügbar.
Kontaktieren Sie uns für eine Terminvereinbarung
FAQs zu unseren Workshops
Wie läuft eine Angular-Schulung bei euch ab?
Unsere Seminare sind eine Mischung aus Vortrag, Live-Coding und konkreten Übungen. Gemeinsam setzen wir das Erlernte während des Workshops direkt an einem Beispielprojekt um. Diese Mischung garantiert, dass der Kurs nie langweilig wird und statt grauer Theorie „Hands-On“ gefragt ist.
Für wen sind die Praxis Angular-Schulungen konzipiert?
Unsere Angular-Schulung Struktuiere Einführung richtet sich alle, die künftig Anwendungen mit Angular entwickeln wollen oder dies schon machen und nun die Hintergründe, Zusammenhänge und Building-Blocks des Frameworks besser verstehen wollen.
Die Teilnehmer sollten grundlegende Kenntnisse in der Web-Entwicklung haben (grundlegende Kenntnisse von HTML und JavaScript).
Für fortgeschrittene Angular-Entwickler*innen bieten wir Advanced Angular Seminare und Intensivkurse zu spezifischen Anwendungsfällen.
Wo finden die Praxis Angular-Schulungen statt?
Unsere Angular-Schulungen finden als öffentliche Workshops in Seminarräumen zentraler Hotels in Deutschland, Österreich und der Schweiz statt. In-House Schulungen finden bei euch im Büro oder Seminarraum statt.
Alle Kurse sind auch als Remote-Workshops möglich, wo wir uns online im Virtual Classroom treffen, und die Schulung via Videocalls, Screensharing und gemeinsamen Live-Coding abhalten.
Wer sind die Trainer?
Unsere Schulungen werden von erfahrenen Trainern und Software-Architekten durchgeführt. Wir haben in den letzten Jahren namhafte Firmen – u. a. bekannte Banken, Versicherungen, Industriekonzerne – in Sachen Angular betreut. Zu den Trainern gehören bekannte Konferenzsprecher, Autoren von Büchern und Fachartikeln, Blogger, Google Developer Experts und Hochschuldozenten.
Zu welchen Zeiten finden die Schulungen statt?
Gerade bei dezitierten Firmenschulungen richten wir uns gerne nach euch. Typische Zeiten sind 9:00Uhr bis 16:30/17:00Uhr.
Können wir auch Online-Schulungen buchen?
Auf jeden Fall. Seit der Pandemie ist das sogar unser Hauptgeschäftsmodell und wir haben sehr gute Erfahrungen damit gemacht. Wir nutzen eine Kombination aus Screen-Sharing, interaktiven Online-Whiteboards und verbinden uns auf Wunsch während der Übungen zur Unterstützung auch gerne auf Ihrem Rechner. Wie bei unseren On-Site-Schulungen setzen wir auch hier auf eine Kombination aus kurzen Präsentationen, Diskussionen, Live-Coding und Hands-On-Labs.
Da die Anreise wegfällt, sparen Sie auch Zeit und Geld. Außerdem können wir flexibler auf Ihre Terminwünsche reagieren.
Können wir die Schulung für unsere Zwecke anpassen?
Ja, sehr gerne. Genaugenommen ist das einer der Vorteile von dedizierten Unternehmensschulungen. Sie können gerne unsere Agada-Vorschläge gewichten, kürzen oder ergänzen. In der Regel findet auch ca. 2 Wochen vor der Schulung eine Abstimmung mit Ihrem Trainer durch. Auf Wunsch auch schon gerne früher.
Warum Angular?
Für Angular spricht unter anderem seine weite Verbreitung, aber auch die Tatsache, dass mit Google ein Internet-Gigant, der das Framework auch sehr intensiv nutzt, steht. Bei Google alleine existieren über 2600 darauf basierende Lösungen. Durch die weite Verbreitung existiert eine große Community und somit viel Know-How am Markt sowie (freie und kommerzielle) Produkte, die auf Angular abgestimmt sind. Außerdem bietet Angular vieles von dem, was Sie für große Anwendungen benötigen, ab Werk: Testautomatisierung, Formularverwaltung, Routing etc. Insofern erhalten Sie einen Stack, dessen Bestandteile aufeinander abgestimmt sind und langfristig zusammenspielen.
Wie kompensiert ihr unterschiedliches Vorwissen?
Die gute Nachricht vorweg: Teilnehmer mit unterschiedlichem Vorwissen sind in der Erwachenenbildung die Regel und nicht die Ausnahme. Deswegen finden Sie auf unseren Übungblättern optionale Hinweise zum Einblenden und Bonus-Übungen, für die, die etwas schneller sind. Natürlich unterstützen wir auch persönlich bei den Übungen.
Wie viele Teilnehmer sind empfehlenswert?
Falls Sie bei uns eine Firmenschulung buchen, überlassen wir diese Entscheidung prinzipiell Ihnen. Allerdings zeigt die Erfahrung, dass es nicht mehr als 15 Teilnehmer sein sollten, zumal ein Seminar sehr stark von Fragen, Diskussionen und praktischen Übungen lebt.
Welche Software benötigen wir?
Bitte installieren Sie die folgenden Software-Pakete auf Ihrem Rechner:
– NodeJS in aktueller Version (wir testen mit aktueller LTS-Version)
– Angular CLI (npm i -g @angular/cli)
– Git
– Visual Studio (frei) oder WebStorm/IntelliJ (kommerziell)
Ausgewählte zufriedene Kunden
