The mistake: images with no width and height

The mistake: images with no width and height

This is the number-one cause of CLS — Cumulative Layout Shift, which measures how much your content jumps as it loads. When an <img> has no dimensions, the browser doesn't know how much space to save. So text loads, then the image pops in and shoves everything down.

Think of it like reserving a parking spot before a car arrives, so nobody else parks there by accident.

How to fix it:
— Open your image tags and add real pixel values: width="800" height="450".
— Use the image's actual dimensions, not guesses.
— In your CSS, keep height: auto so it still scales responsively.

The browser reserves the right space, and nothing jumps.

Try this: pick one image, add width and height, reload, and watch the page settle calmly into place.