Step 5: Layout Shift Issues
The Problem
When images load without specified dimensions, they cause layout shifts as the browser doesn't know how much space to reserve. This affects the Cumulative Layout Shift (CLS) metric.
Issues:
- Content jumps as images load
- Poor user experience
- High CLS score (bad for Core Web Vitals)
- No image optimization
Problematic Code:
<div class="card">
<img
[src]="card.imageUrl"
[alt]="card.title"
>
<h3>{{ card.title }}</h3>
</div>
Watch how the layout shifts as images load. Try scrolling while images are loading to experience the poor user experience. Open DevTools Performance tab and look for layout shifts.