Why do website pages "jump" up or stay in place when refreshed?

Question

css

Greetings
I didn’t notice before, and if I did, I didn’t attach any importance to it. There are two types of pages - "evenly standing" and "jumping" (that's what I called them). If the page is scrolled to the bottom and updated using the F5 button, then the "jumping" pages during the update scroll to the top and then fall to their original position at the time of its update (noticeable visually and on the browser scrollbar), and "equally standing", how and how much do not update them remain in the same place when updating.
An example in GIF (on the first tab "equal" site, and on the second "jumping"):

I checked about a hundred different sites from bookmarks in Chrome and Opera browsers. Approximately 10–15%, according to subjective memories (did not count), remain in place when the page is updated, while the rest jump mercilessly. I did not follow any pattern, and here and there there are simple sites with a bunch of scripts, almost identical templates and other coincidences. A vivid example of an "equal" page is https://github.com/blog/2496-commit-together-with-... Updated 100 times, it doesn't jump, it stays rooted to the spot.
Please tell us the reasons for this behavior and how to achieve it (so that the page does not twitch).

Answer 1

This is how it will jump:

<p><img src=picture.jpg></p>
<p>Текст, текст, текст, текст, текст</p>

But it won't be like this:

<p><img src=picture2.jpg width=300 height=200></p>
<p>Текст, текст, текст, текст, текст</p>

The reason is simple. The browser will always show a paragraph with text, without waiting for the picture to load. So that the user can pass the time while reading the text.
But here the browser has a question:
- And how much free space should be left for the image?
If we immediately specify the dimensions in html (300 * 200), the browser will use our hint and leave 200 pixels in the height of the empty space in order to display the loaded image there later.
But if we do not specify the dimensions of the image in html, the browser will not have this information. The size of the required free space for the image will be taken at random. The text following the picture will be drawn on the screen immediately afterwards "at random".
Later, when the user has time to read half of the text, and the browser downloads the picture, the size of the space needed for the picture will be recalculated. In this case, the text will have to move down.
This is the content "jumping" when the page loads.
PS The same applies to any dynamic content that is loaded by scripts after the page is loaded. The sizes of containers for dynamic content must be specified immediately.