Performance, bundles, rendering, and Core Web Vitals

Performance is a user outcome under real devices, networks, data, and load.

Budgets

Set Angular build budgets for initial, route, and component-style output. Track compressed transfer and parse/execute cost, not only raw artifact size.

Code delivery

Lazy-load feature routes. Use @defer for heavy below-the-fold or interaction- driven content. Avoid importing large libraries through shared barrels that pull them into the initial graph.

Rendering

Use stable track identity, immutable state, signals, OnPush-compatible components, virtual scrolling for large lists, and pagination for truly large data. A fast diff still cannot render 50,000 useful DOM nodes.

Images and fonts

Size media explicitly, use responsive sources, modern formats, priority only for real LCP assets, and subset/self-host fonts according to policy. Prevent layout shift.

Tailwind and Flowbite

Verify generated CSS source detection and minimize unused integration surfaces. Initialize only the interactive components needed. Avoid duplicate icon, datepicker, and JavaScript bundles.

Measure

Use Core Web Vitals, browser performance traces, Angular DevTools, bundle analysis, network waterfalls, user timing, and real-user monitoring. Compare p50 and p75/p95, not a single fast laptop run.

Feynman check

The initial bundle is a suitcase the user must download, unpack, and inspect before interaction. Name what you can leave for the next route or next click.