Running and serving an Angular app - Performance & Optimization

Performance: Running and serving an Angular app

HIGH IMPACT

This affects how quickly the Angular app loads and becomes interactive for users.

Serving an Angular app for users to load quickly

Angular

ng build --configuration production && npx http-server ./dist/app-name

Builds optimized, minified bundles and serves static files for fast loading.

📈 Performance GainReduces bundle size by 50-70%, speeds up LCP by seconds

Serving an Angular app for users to load quickly

Angular

ng serve --open

This runs a development server with unoptimized code and no bundling or minification.

📉 Performance CostBlocks rendering longer due to large unminified bundles; slower LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
ng serve (dev mode)	Low (simple DOM initially)	Multiple reflows during app bootstrap	High paint cost due to large scripts	[X] Bad
ng build production + static server	Low (same DOM)	Single reflow after bootstrap	Lower paint cost due to smaller bundles	[OK] Good

Rendering Pipeline

The Angular app code is bundled and optimized during build, then served as static files. The browser downloads, parses, and executes the scripts, then renders the app UI.

→Network

→Parse & Compile

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Parse & Compile stages due to large unoptimized bundles

Core Web Vital Affected

LCP

This affects how quickly the Angular app loads and becomes interactive for users.

Optimization Tips

1Always use 'ng build --configuration production' for serving Angular apps in production.

2Avoid using 'ng serve' for production as it serves unoptimized code.

3Serve the built files via a static file server or CDN to improve load speed.

Performance Quiz - 3 Questions

What is the main performance drawback of using 'ng serve' to run an Angular app in production?

A It serves unoptimized, large bundles that slow down loading.

B It minifies code too aggressively causing errors.

C It disables browser caching completely.

D It automatically reloads the page too often.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load while serving app, then analyze Main thread and Network waterfall.

What to look for: Look for long scripting tasks and large network payloads indicating unoptimized bundles slowing LCP.