What Angular @defer blocks achieve for LCP optimization, including triggers and complete syntax example?

@defer blocks lazy-load template sections (components/pipes/directives) via JS chunk splitting, reducing initial bundle 50-70% for superior LCP vs route lazy-loading critical content renders instantly. Triggers include on viewport/interaction/timer/idle/when condition; prefetch warms cache early. Supports @placeholder/@loading/@error states preventing layout shift; nested defer possible. v17+ feature, SSR-safe, boosts Lighthouse scores dramatically.​

Code Example:-

Code

@defer (on viewport; prefetch on idle) {
  <heavy-chart [data]="analytics"></heavy-chart>
} @placeholder (minimum 400ms) {
  <div class="skeleton h-64 bg-gray-200"></div>
} @loading (after 200ms; minimum 1s) {
  <div class="flex items-center">
    <spinner class="mr-2"></spinner> Loading chart...
  </div>
} @error {
  <div class="text-red-500">Chart failed to load 
    <button (click)="refetchChart()">Retry</button>
  </div>
}