Reserve image space on your landing page so the button does not jump: a layout shift check

You open a landing page on your phone, start to tap "Get started", and the button jumps down because an image above it finished loading. That is a layout shift, and the usual cause on a marketing page is an image with no reserved space.

What the sources say

web.dev's guidance on optimizing Cumulative Layout Shift says to always include width and height size attributes on image and video elements. The alternative is to reserve the space with CSS aspect-ratio or something similar. That lets the browser allocate the right amount of space while the image is still loading.

web.dev also gives the target: a good CLS score is 0.1 or less, measured at the 75th percentile of page loads, and anything above 0.25 is poor. A shift score is the share of the viewport that moved multiplied by how far it moved, so a hero image pushing the whole page down counts a lot.

The check

1. Find the images above the fold: hero, logo strip, screenshots.
2. Make sure each <img> has width and height set to the file's real pixel size, for example <img src="hero.png" alt="..." width="1200" height="800">.
3. Keep your CSS responsive with img { max-width: 100%; height: auto; }. The attributes give the browser the ratio, and CSS still controls the display size.
4. For embeds and video, use aspect-ratio: 16 / 9 on the container so the space exists before the content does.
5. Throttle the network in browser dev tools, reload, and watch whether any text or button moves while images arrive.

What this does not cover

Missing image sizes are one cause of layout shift. Web fonts swapping, banners injected late, and ads can also move content. This is a quick check, not a full performance audit, and your real score depends on your own pages and visitors.

Source: web.dev, Optimize Cumulative Layout Shift and web.dev, Cumulative Layout Shift