Declare the Size and the Page Stops Jumping
You open a page, start reading, go to tap a link, and everything moves down the screen a fraction of a second before your finger lands. You tap the wrong thing. That is layout shift, and it is one of the most irritating things a website can do to somebody.
Why it happens
Text arrives before images do. Text is small and comes with the page; an image is a separate request that finishes later.
If the browser has not been told how big an image will be, it cannot reserve space for it. So it lays the page out as though the image were not there, draws the text, and then, when the image finally arrives, has to push everything down to make room. The jump is the browser correcting an assumption it was forced to make.
The fix is to say the size up front
Every image on your site declares its width and height. The browser reserves exactly the right space before the image exists, draws the text into the layout it will actually keep, and drops the image into the hole when it arrives. Nothing moves.
It costs nothing, it is invisible when it works, and it is measurable. Layout shift is one of the metrics Google records for real visitors, so it affects how your site ranks as well as how it feels.
The equivalent problem with text is covered in how font loading keeps your layout still: a page painted first in a fallback typeface and then repainted in the real one will shift for the same reason unless the two are matched for width.
What else moves a page
Anything inserted above content that has already been drawn. A banner that appears after load, an embed that resizes itself, an advertisement. The general rule is that anything arriving late should be given its space in advance or placed where nothing is below it.
Related: faster page loads, design images on a delivery network and how video embeds affect your page speed.
All of it matters most on a phone, where the screen is small enough that a shift of a few lines moves the thing you were aiming at. Create a free actor website.
