Fix High Cumulative Layout Shift (CLS)

High Cumulative Layout Shift (CLS)

Problem: Elements on the page jump around unexpectedly as content loads.
Why it fails: Images/ads/iframes without dimensions, dynamically added content pushing existing content down, font loading causing text reflow.
How to Fix "fix Cumulative Layout Shift":
- Add Dimensions to Media: Always include width and height attributes on <img> and <video> tags. (See Image Optimization). For responsive images, use aspect-ratio in CSS.
```
<img src="image.jpg" width="1200" height="800" style="aspect-ratio: 1200 / 800; width: 100%; height: auto;" alt="...">
```
```
/* Or using CSS aspect-ratio property */
.responsive-image {
  aspect-ratio: 16 / 9; /* Example aspect ratio */
  width: 100%;
  height: auto;
}
```
- Reserve Space for Ads/Embeds: If you know the size of an ad slot or iframe, reserve the space using CSS (min-height) before it loads.
- Avoid Inserting Content Above Existing Content: If adding content dynamically (e.g., banners, forms), insert it below existing content or use transforms that don't affect layout.
- Optimize Font Loading: Use font-display: swap; or preload fonts to minimize layout shifts caused by font swapping (FOIT/FOUT).