Deferred Loading with @defer

The at-defer block lazily loads part of a template and its dependencies, improving initial load performance. The deferred content is split into a separate chunk.

Wrap content in an at-defer block. By default it loads when the browser is idle.

Deferring heavy or below-the-fold components keeps the initial bundle small and the first paint fast. The component loads only when actually needed.

An at-placeholder block shows content before the deferred block is triggered.

An at-loading block shows while the deferred chunk is being fetched.

An at-error block renders if loading the deferred dependencies fails.

You control when loading starts with triggers in an on clause, such as on idle, on viewport, on interaction, on hover, or on timer.

The on viewport trigger loads the content when it scrolls into view, perfect for below-the-fold sections.

on interaction loads when the user clicks or focuses the placeholder; on hover loads when the pointer hovers over it.

You can also trigger on a boolean expression using when, loading once the expression becomes true.

You can prefetch the deferred chunk separately from rendering, for example prefetch on idle, so it is ready before the render trigger fires.

Triggering deferred content.

You learned the at-defer block for lazy loading, with at-placeholder, at-loading, and at-error blocks, and triggers like on idle, on viewport, on interaction, on hover, on timer, and when, plus prefetching. You have completed the Built-in Control Flow course.