The page jumps around while it loads

When a page loads, elements like images, ads, banners, or fonts can appear and push other content down or sideways. The result is text that shifts under your finger just as you go to click, or a button that jumps out from under your cursor. This happens because the browser doesn't know how much space those elements need until they finish loading, so it rearranges the page as each one arrives.

Why it matters

Unexpected movement makes people click the wrong link, buy the wrong thing, or lose their place while reading — which feels broken and drives visitors away. Layout stability is also one of Google's Core Web Vitals, so persistent shifting can lower your search ranking.

How to fix it

The most common cause is images and embeds that don't declare their dimensions. Giving the browser the size up front lets it reserve the space before the content loads.

Images (any platform)

Always include width and height attributes so the browser can reserve the correct space:

<img src="photo.jpg" width="800" height="600" alt="Description">

WordPress

WordPress adds image dimensions automatically when you insert images through the editor or media library. If shifting persists:

• Re-insert images through the block editor rather than pasting raw URLs.
• Check any page-builder or slider plugins, which often output images without sizes — look in the plugin's settings for a "reserve space" or "aspect ratio" option.
• For ad slots, set a fixed height on the container.

Reserving space for ads and embeds (CSS)

Wrap ad or embed slots in a container with a fixed size so nothing collapses before they load:

.ad-slot {
  min-height: 250px;
}

For responsive video or iframe embeds, reserve the shape with aspect-ratio:

.embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Web fonts

A late-loading custom font can reflow text. Tell the browser to swap it in without shifting layout:

@font-face {
  font-family: "YourFont";
  src: url("yourfont.woff2") format("woff2");
  font-display: optional;
}

Nginx, Apache, and Cloudflare don't cause layout shift directly — it comes from your page's HTML and CSS — so the fixes above apply regardless of your server.

How to check it worked

Reload the page (a hard refresh clears the cache) and watch closely as it loads — nothing above the content you're reading should move once it has appeared.