Stop layout shift on small business sites: give every image a width and height

Ever started reading a page, then the text jumps down because an image finally loaded? That's layout shift, and Google measures it as Cumulative Layout Shift (CLS), one of the Core Web Vitals.

On small business sites the usual cause is simple: images without dimensions.

The fix

Add width and height attributes that match the image's real aspect ratio:

<img src="team.webp" alt="Our team at the shop" width="1200" height="800">

Then keep it responsive in CSS:

img {
  max-width: 100%;
  height: auto;
}

Modern browsers use the two attributes to reserve the right amount of space before the file arrives, so nothing jumps.

Same idea for other late-loading things

• Embeds (maps, videos): wrap them in a box with aspect-ratio: 16 / 9;.
• Ads or banners: reserve a fixed min-height for the slot.
• Web fonts: use font-display: swap; and pick a fallback font with similar width.

How to check

Open Chrome DevTools, go to Lighthouse, run a mobile report, and look at "Avoid large layout shifts". It lists the exact elements that moved.

A two-minute fix that makes a site feel much more solid on phones.

NEXCOD builds fast, clean websites for small businesses: https://nexcod.vercel.app