Colm Delaney Web Design & Development

Page with layout shift

Example 1 of 2 from blog post Shifting layouts, and how to deal with them

This illustrates how a slow-loading image can cause the page content to move around while you're interacting with it.

There are multiple paragraphs, one of which has a link you're interested in. But there's an image above that, and when it loads it moves below it downwards.

Try it out

Reload the page, hover your mouse over the link in the second paragraph, and wait a few seconds. See how that link jumps downwards when the image appears?

This container will stretch to fit the image it contains …

First paragraph

The first paragraph, containing a link you're not interested in, followed by more text.

Second paragraph

The second paragraph, containing the link you are interested in, followed by some more text.

The fix

The solution is to reserve a suitably-sized container for the image. See it in action.