Angular Performance Tips

The Solution

Using deferrable views, we can load cards only when they're about to enter the viewport, significantly improving initial load time and memory usage.

Benefits:

Faster initial page load
Reduced memory usage
Better performance on mobile
Improved user experience

Available Triggers:

on viewport: Loads when element enters viewport
```
@defer (on viewport) { content }
```
on idle: Loads when browser is idle
```
@defer (on idle) { content }
```
on immediate: Loads as soon as possible
```
@defer (on immediate) { content }
```
on hover: Loads when user hovers over placeholder
```
@defer (on hover) { content }
```
on interaction: Loads on any user interaction with placeholder
```
@defer (on interaction) { content }
```
when: Loads when condition is true
```
@defer (when isReady) { content }
```

Best Practices:

Use placeholders to prevent layout shifts
Combine triggers for better user experience:
```
@defer (on viewport; on hover) { content }
```

Prefetch for critical content:

@defer (on viewport; prefetch on idle) { content }

Set minimum loading time to prevent flashing:
```
@defer (minimum 300ms) { content }
```
Use after blocks for sequential loading:
```
@defer (after hero-section) { content }
```

Fixed Code:


<div class="cards-container">
@for (card of cards; track card.id) {
@defer (on viewport; prefetch on idle) {
      <div class="card">
        <img [ngSrc]="card.imageUrl">
      </div>
    } @placeholder {
      <div class="card placeholder">
        <div class="placeholder-content"></div>
      </div>
    }
  }
</div>