# mgechev/angular-performance-checklist

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mgechev-angular-performance-checklist).**

4,134 stars · 456 forks · MIT

## Links

- GitHub: https://github.com/mgechev/angular-performance-checklist
- awesome-repositories: https://awesome-repositories.com/repository/mgechev-angular-performance-checklist.md

## Description

This project is a technical reference and guide for optimizing the performance of Angular applications. It provides a comprehensive checklist for improving speed and efficiency by focusing on bundle optimization, rendering best practices, and runtime execution.

The guide covers a wide array of differentiators including the implementation of progressive web app strategies through service workers and offline caching. It also details methods for improving perceived load times using server-side rendering and application shells.

The repository provides guidance on broader capability areas such as change detection tuning, the use of web workers for offloading heavy computation, and DOM management via virtual scrolling. It also covers bundle size reduction through tree-shaking, minification, and lazy-loading module splitting.

## Tags

### Web Development

- [Angular Performance Optimizers](https://awesome-repositories.com/f/web-development/performance-optimizations/angular-performance-optimizers.md) — Reducing the amount of data sent to the browser through tree-shaking, minification, and code splitting in Angular projects.
- [Bundle Optimizers](https://awesome-repositories.com/f/web-development/bundle-optimizers.md) — Reduces transferred data by bundling resources, splitting code, and removing unused code. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Code Splitting](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting.md) — Bundles code into smaller files and loads them lazily to avoid downloading unused features. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading.md) — Explains how to implement lazy-loading and module splitting to prevent oversized initial bundles.
- [Offline Web Caching](https://awesome-repositories.com/f/web-development/offline-web-caching.md) — Implements offline caching strategies using service workers to maintain application functionality without a network connection. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Initial Page Load Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations.md) — Combines server-side rendering and application shells to reduce time-to-interactive and improve initial load speed. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering.md) — Offers strategies for server-side rendering to improve SEO and eliminate the initial blank screen.
- [Server-Side Renderings](https://awesome-repositories.com/f/web-development/server-side-renderings.md) — Provides strategies for pre-rendering pages on the server to improve SEO and eliminate the initial blank screen. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ja-JP.md))
- [Service Worker Asset Caching](https://awesome-repositories.com/f/web-development/service-worker-asset-caching.md) — Guides the implementation of service workers to intercept requests and manage offline asset caching.
- [Progressive Web Apps](https://awesome-repositories.com/f/web-development/single-page-applications/angular-implementations/progressive-web-apps.md) — Setting up service workers and caching strategies in Angular to enable offline access and faster repeat visits.
- [Template Expression Optimizations](https://awesome-repositories.com/f/web-development/template-expression-optimizations.md) — Replaces expensive function calls in templates with pure pipes or cached values for smooth interactions. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ja-JP.md))
- [Code Minifiers](https://awesome-repositories.com/f/web-development/code-minifiers.md) — Decreases payload size by removing comments and whitespace and renaming variables to reduce bandwidth. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Main Thread Offloading](https://awesome-repositories.com/f/web-development/main-thread-offloading.md) — Details how to offload heavy computational logic to web workers to keep the main UI thread responsive.
- [Deferred Loading](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations/deferred-loading.md) — Provides strategies for delaying the loading of non-critical assets and modules until they are needed. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Resource Pre-fetching](https://awesome-repositories.com/f/web-development/resource-pre-fetching.md) — Downloads assets or data in the background before they are requested to improve user experience. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Resource Preloading](https://awesome-repositories.com/f/web-development/resource-preloading.md) — Loads assets, styles, or modules in the background before they are requested to improve experience. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))
- [Service Worker Caching Strategies](https://awesome-repositories.com/f/web-development/service-worker-caching-strategies.md) — Manages offline access and automates asset caching by using a local proxy to handle requests between the browser and server. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.zh-CN.md))
- [Template Output Optimization](https://awesome-repositories.com/f/web-development/template-output-optimization.md) — Removes unnecessary whitespace and unused directives from templates to decrease the bundle size. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.zh-CN.md))

### Development Tools & Productivity

- [Web Bundle Reductions](https://awesome-repositories.com/f/development-tools-productivity/xcode-project-file-management/bundle-size-optimization/web-bundle-reductions.md) — Minifies code and removes dead code and template whitespace to reduce network data transfer. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Asset Bundling](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-performance-optimization/build-optimization-tools/bundle-optimizers/asset-bundling.md) — Optimizes the bundling of application assets into fewer files to reduce the number of HTTP requests. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))
- [Dead Code Elimination](https://awesome-repositories.com/f/development-tools-productivity/dead-code-elimination.md) — Details how to remove unused functions and modules from the final production bundle to reduce payload size. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Module Bundling](https://awesome-repositories.com/f/development-tools-productivity/source-bundling/module-bundling.md) — Uses module bundling to merge multiple source files and dependencies into optimized output files. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Template Whitespace Control](https://awesome-repositories.com/f/development-tools-productivity/template-whitespace-control.md) — Decreases bundle size by stripping unnecessary whitespace from templates during the build process. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ja-JP.md))

### Programming Languages & Runtimes

- [Ahead-Of-Time Compilation](https://awesome-repositories.com/f/programming-languages-runtimes/ahead-of-time-compilation.md) — Provides guidance on implementing ahead-of-time compilation to reduce runtime overhead and improve tree-shaking.
- [Build-Time Precompilation](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/javascript-runtimes/javascript-build-engines/precompiled-template-execution/build-time-precompilation.md) — Transpiles templates into JavaScript during the build process to improve runtime rendering speed. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Lazy Loading](https://awesome-repositories.com/f/programming-languages-runtimes/dynamic-class-creation/class-loading-mechanisms/lazy-loading.md) — Describes deferring the loading of specific feature modules until they are requested to reduce the initial bundle size. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))
- [Tree-Shakeable Exports](https://awesome-repositories.com/f/programming-languages-runtimes/language-ecosystems-tooling/module-management/module-systems/synchronous-module-loaders/module-interface-exports/tree-shakeable-exports.md) — Provides guidance on structuring service providers to ensure they are excluded from the bundle when not actively used. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.pt-BR.md))

### Software Engineering & Architecture

- [Strategies](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/strategies.md) — Limits when a component tree is checked for updates by using a specific change strategy. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Zone-Based Detection](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/zone-based-detection.md) — Explains how to tune zone-based change detection and run logic outside the Angular zone for performance.
- [Zone Opt-Outs](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/zone-based-detection/zone-opt-outs.md) — Executes logic outside the primary asynchronous zone to prevent triggering global change detection cycles. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [JavaScript Bundle Tree-Shaking](https://awesome-repositories.com/f/software-engineering-architecture/binary-tree-shaking/javascript-bundle-tree-shaking.md) — Provides techniques for tree-shaking to remove unused code and services from production bundles.
- [Rendering Performance](https://awesome-repositories.com/f/software-engineering-architecture/coding-best-practices/engineering-best-practices/frontend-architecture-best-practices/rendering-performance.md) — A manual for improving UI performance using server-side rendering, virtual scrolling, and change detection strategies.
- [Dependency Injection Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-optimizations.md) — Excludes unused services from the final bundle by defining provider scope within the decorator. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ja-JP.md))
- [Tree-Shakeable Providers](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-providers/tree-shakeable-providers.md) — Configures services to be tree-shakeable to ensure unused services are excluded from the final bundle. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))
- [Framework Change Detection Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/reactive-change-detection/framework-change-detection-optimizations.md) — Improves runtime performance by skipping sub-tree checks or running code outside the tracking zone. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Zone-Based Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/reactive-change-detection/framework-change-detection-optimizations/zone-based-optimizations.md) — Reducing unnecessary browser re-renders by optimizing how Angular tracks state changes and executes logic outside of zones.
- [Route-Based Code Splitting](https://awesome-repositories.com/f/software-engineering-architecture/static-code-analyzers/dependency-based-code-splitting/route-based-code-splitting.md) — Divides the application into smaller chunks that load only when specific routes are accessed. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Execution Context Tuning](https://awesome-repositories.com/f/software-engineering-architecture/execution-context-tuning.md) — Guidance on running asynchronous tasks without triggering global change detection to prevent performance degradation. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.zh-CN.md))
- [Memoization Caches](https://awesome-repositories.com/f/software-engineering-architecture/memoization-caches.md) — Describes the use of pure pipes for memoizing template expressions to avoid redundant calculations.
- [Asset Prefetching Strategies](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/build-bundle-optimization/static-asset-optimization-pipelines/asset-prefetching-strategies.md) — Downloads images, styles, or modules in the background to improve the speed of subsequent navigation. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Resource Prefetching](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/page-navigation-prefetching/paging-library-data-loading/automatic-content-pre-fetching/resource-prefetching.md) — Loads assets, modules, or data in the background before they are requested to improve speed. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Memoized Transformation Pipes](https://awesome-repositories.com/f/software-engineering-architecture/stream-piping/memoized-transformation-pipes.md) — Caches the output of transformation pipes based on input values to avoid redundant recalculations. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.pt-BR.md))

### User Interface & Experience

- [Application Shells](https://awesome-repositories.com/f/user-interface-experience/application-shells.md) — Provides a blueprint for rendering a minimal UI skeleton immediately upon load to improve perceived performance. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/virtualized-list-rendering.md) — Improves DOM performance using tracking functions and virtual scrolling to limit rendered elements. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.md))
- [Resource Loading](https://awesome-repositories.com/f/user-interface-experience/links/resource-loading.md) — Loads critical assets early and delays non-essential modules to reduce the initial download size for the user. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ja-JP.md))
- [DOM Virtualization](https://awesome-repositories.com/f/user-interface-experience/dom-virtualization.md) — Demonstrates how to use virtual scrolling to minimize the number of active DOM elements in large lists.
- [List Item Reconciliation](https://awesome-repositories.com/f/user-interface-experience/list-item-reconciliation.md) — Uses unique keys to identify items in a list to prevent re-rendering the entire tree. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Virtual Scrolling](https://awesome-repositories.com/f/user-interface-experience/virtual-scrolling.md) — Reduces the number of rendered elements using virtual scrolling to speed up browser rendering. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.zh-CN.md))

### Data & Databases

- [Method Result Caches](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching-strategies/query-result-caching/method-result-caches.md) — Uses pure pipes to cache function return values and avoid redundant processing of template expressions. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))
- [Expression Memoization](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching/template-caches/expression-memoization.md) — Recommends using pure pipes and cached expressions to prevent expensive re-computations during UI updates. ([source](https://github.com/mgechev/angular-performance-checklist#readme))
- [Expensive Result Caches](https://awesome-repositories.com/f/data-databases/expensive-result-caches.md) — Implements result caching via pure pipes to avoid expensive re-computations during digest cycles. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))
- [Item-Specific State Tracking](https://awesome-repositories.com/f/data-databases/state-management-stores/list-state-hooks/item-specific-state-tracking.md) — Identifies unique objects in lists using a tracking function to prevent unnecessary DOM reconstructions. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.es-ES.md))

### Graphics & Multimedia

- [Node Count Reductions](https://awesome-repositories.com/f/graphics-multimedia/chart-geometry-renderers/svg-chart-renderers/node-count-reductions.md) — Reduces the number of elements rendered in the UI using virtual scrolling to improve speed. ([source](https://github.com/mgechev/angular-performance-checklist/blob/master/README.ru-RU.md))

### Mobile Development

- [Web-Worker Threading](https://awesome-repositories.com/f/mobile-development/background-task-managers/web-worker-threading.md) — Describes moving expensive computational logic into background web workers to maintain a high frame rate.

### Part of an Awesome List

- [Framework Performance Guides](https://awesome-repositories.com/f/awesome-lists/devtools/framework-performance-guides.md) — Comprehensive guide for improving Angular application performance.
- [Web Development](https://awesome-repositories.com/f/awesome-lists/devtools/web-development.md) — Performance optimization guide for Angular applications.