HuntExams Academy
HTML/CSSIntermediate#css#performance#layout

How do you prevent Cumulative Layout Shift (CLS) caused by images and ads?

Always specify explicit width/height or aspect-ratio on images and embeds so the browser reserves space before the resource loads, preventing surrounding content from jumping once it arrives.

Example
<img src="banner.jpg" width="800" height="400" alt="Banner">
/* or */
.banner { aspect-ratio: 2 / 1; width: 100%; }

Related Questions

1
HTML/CSSBeginner#css#fundamentals

What is the difference between inline styles, internal <style>, and external stylesheets?

Open
2
HTML/CSSBeginner#css#selectors

What is the universal selector (*) and what are its performance implications?

Open
3
HTML/CSSIntermediate#css#forms

How do you style form validation states using CSS pseudo-classes?

Open