Step 6: Layout Shifts Fixed
The Solution
Using NgOptimizedImage directive with proper width and height attributes prevents layout shifts by reserving space for images before they load.
Benefits:
- No layout shifts during loading
- Automatic lazy loading
- Proper aspect ratio maintained
- Better Core Web Vitals scores
- Automatic image optimization
Fixed Code:
<div class="card">
<img
[ngSrc]="card.imageUrl"
width="1080"
height="720"
[alt]="card.title"
[priority]="card.id <= 4"
>
<h3> {{card.title }}</h3> </div>
Notice how the layout remains stable as images load. The space is reserved immediately, and images fade in smoothly. Priority images above the fold load first.