---
title: "Performance, bundles, rendering, and Core Web Vitals"
chapter: "16"
---

# 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.