Understanding layout shifts

Ever clicked on something and it suddenly moved just before your cursor landed? That frustrating jump is called a layout shift — and it’s more than just annoying. It affects your site’s performance score and user trust. Let’s break down what causes layout shifts and how to prevent them.

1. What is a layout shift?

A layout shift happens when visible elements on the page move unexpectedly — usually while the page is still loading.

Tip: You can measure this using the CLS (Cumulative Layout Shift) metric in tools like Lighthouse or PageSpeed Insights.

2. Common causes: images without dimensions

If you don’t set width and height on images, the browser doesn’t know how much space to reserve — causing things to jump when the image loads.

Tip: Always include width and height attributes (or use CSS aspect ratios) for images and videos.

3. Fonts loading late

Web fonts that load slowly can cause text to shift when they’re applied — especially if the fallback font has a different size or spacing.

Tip: Use font-display: swap to reduce delays, and test how your fallback font compares to the custom one.

4. Injecting content above the fold

Popups, banners, or ads that appear at the top of the page can push everything down suddenly.

Tip: Reserve space for dynamic content, or load it in a way that doesn’t shift the main layout.

5. Lazy-loading without placeholders

Lazy-loading is great for performance — but if you don’t include placeholders, it can cause unexpected shifts as elements load in.

Tip: Use skeletons or reserved space to keep the layout stable while content loads.

Final thoughts

Layout shifts break flow, reduce trust, and hurt performance scores. The good news? Most of the time, they’re easy to fix with a bit of planning. Build with stability in mind — your users will notice.