How would you use Angular's built in deferred loading, the at defer block, to improve performance further?

The at defer block lets you delay loading and rendering a piece of a template until a specific trigger happens, such as the element becoming visible on screen, the user interacting with a nearby element, or after the browser becomes idle, reducing the amount of work done during the initial page load.

@Component({
  selector: 'app-product-page',
  template: `
    <app-product-details [product]="product" />
    @defer (on viewport) {
      <app-related-products />
    } @placeholder {
      <p>Loading recommendations</p>
    }
  `
})
export class ProductPageComponent {}