Skip to content

Commit

Permalink
docs: update defer guide to use Deferrable View language (#52457)
Browse files Browse the repository at this point in the history
This updates the defer guide to use the recommended language of
Deferrable Views.

PR Close #52457
  • Loading branch information
thePunderWoman authored and alxhub committed Oct 31, 2023
1 parent 34a5996 commit af46256
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 6 deletions.
10 changes: 5 additions & 5 deletions aio/content/guide/defer.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Deferred Loading
# Deferrable Views

## Overview

Deferred loading is a feature that can be used in component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a `@defer` block which specifies the loading conditions.
Deferrable views can be used in component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a `@defer` block which specifies the loading conditions.

The `@defer` block supports a series of [triggers](guide/defer#triggers), [prefeching](guide/defer#prefetching), and several sub blocks used for [placeholder](guide/defer#placeholder), [loading](guide/defer#loading), and [error](guide/defer#error) state management. You can also create custom conditions with [`when`](guide/defer#when) and [`prefetch when`](guide/defer#prefetching).
Deferrable views support a series of [triggers](guide/defer#triggers), [prefeching](guide/defer#prefetching), and several sub blocks used for [placeholder](guide/defer#placeholder), [loading](guide/defer#loading), and [error](guide/defer#error) state management. You can also create custom conditions with [`when`](guide/defer#when) and [`prefetch when`](guide/defer#prefetching).

```html
@defer {
<large-component />
}
```

## Why use `@defer`?
## Why use Deferrable Views?

`@defer` is a powerful tool that can be used to reduce the initial bundle size of your application or defer heavy components that may not ever be loaded until a later time. This should result in a faster initial load and an improvement in your Core Web Vitals (CWV) results. Deferring some of your components until later should specifically improve Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
Deferrable views, also known as `@defer` blocks, are a powerful tool that can be used to reduce the initial bundle size of your application or defer heavy components that may not ever be loaded until a later time. This should result in a faster initial load and an improvement in your Core Web Vitals (CWV) results. Deferring some of your components until later should specifically improve Largest Contentful Paint (LCP) and Time to First Byte (TTFB).

Note: It is highly recommended that any defer loaded component that might result in layout shift once the dependencies have loaded be below the fold or otherwise not yet visible to the user.

Expand Down
2 changes: 1 addition & 1 deletion aio/content/navigation.json
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@
},
{
"url": "guide/defer",
"title": "Deferred Loading",
"title": "Deferrable views",
"tooltip": "How to defer load components, directives, and pipes."
},
{
Expand Down

0 comments on commit af46256

Please sign in to comment.