angular-performance

Image optimization in Angular uses NgOptimizedImage to enforce width/height attributes, lazy-load images, and prioritize LCP candidates. This prevents layout shift and reduces initial load time by deferring off-screen images until needed.

@defer blocks load expensive components on viewport visibility or user interaction, displaying placeholders while loading. This reduces initial bundle size and improves time-to-interactive for route-based apps.

SSR pre-renders content on the server for faster first paint and SEO; CSR renders in the browser. Choose SSR for content-heavy or SEO-critical pages; configure hydration to avoid rerendering after initial load.

Yes. Lazy routes split code by feature, and NgOptimizedImage optimizes images within each route. Combined, they reduce initial payload and defer loading of route-specific assets until navigation.

Optimize expensive calculations with memoization, pure pipes, and derived signals. These techniques prevent unnecessary recomputation during change detection and improve rendering performance.

NgOptimizedImage and @defer are built into modern Angular; @defer requires Angular 17+. No external dependencies needed—both are part of the framework's core APIs.