@defer is the easiest performance win Angular has shipped in years, and it has one sharp edge that cost me an afternoon.

The win

Wrapping a heavy component in @defer (on viewport) moves it into its own chunk and loads it when it is needed. On one page this removed 180KB from the initial bundle in about ten minutes of work.

The edge

I deferred two grid components that between them occupied several thousand pixels. The placeholder was small, so the document was suddenly 12,823px instead of 6,833px — and every anchor link in the header scrolled to the wrong place, because the browser computed the target position against a document that had not been filled in yet.

• Give the placeholder the height the real content will occupy. This is the same discipline as reserving space for an image.
• Pick the trigger deliberately: on viewport is right for something below the fold, on idle for something that must exist before the user interacts.
• Do not defer the LCP element. It seems obvious written down and it is easy to do by accident when the LCP element sits inside a larger block.