Creating a new Angular project - Performance Optimization Steps

Performance: Creating a new Angular project

MEDIUM IMPACT

This affects the initial page load speed and bundle size of the Angular app.

Setting up a new Angular project for fast loading

Angular

ng new my-app --standalone --skip-install=true

Creates a minimal project without routing or extra styles, reducing bundle size and dependencies.

📈 Performance GainSaves 150kb+ in bundle size, improves LCP by 200-400ms

Setting up a new Angular project for fast loading

Angular

ng new my-app --routing --style=scss --strict=false --skip-install=false

Includes routing and SCSS by default, adds more dependencies and larger initial bundle size.

📉 Performance CostAdds 200kb+ to initial bundle, increases LCP by 300-500ms on slow networks

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Default Angular new project with routing and SCSS	Moderate DOM nodes	Multiple reflows during initial render	High paint cost due to styles and components	[X] Bad
Minimal Angular new project without routing or extra styles	Minimal DOM nodes	Single reflow on initial render	Lower paint cost with fewer styles	[OK] Good

Rendering Pipeline

Creating a new Angular project sets the base code and dependencies that affect how the browser loads, parses, and renders the app.

→Network

→Parse & Compile

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Parse & Compile stages due to large initial bundle size

Core Web Vital Affected

LCP

This affects the initial page load speed and bundle size of the Angular app.

Optimization Tips

1Start Angular projects with --standalone to reduce initial bundle size.

2Avoid adding routing or extra styles unless needed at start.

3Use DevTools Network and Performance panels to monitor load and render times.

Performance Quiz - 3 Questions

Which Angular new project option helps reduce initial bundle size?

A Including SCSS styles

B Using --standalone flag

C Adding routing by default

D Enabling strict mode

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, reload page and check bundle size and load time. Then use Performance tab to record page load and check scripting and rendering times.

What to look for: Look for large initial JS bundle sizes and long scripting times that delay LCP.