michaelsy There is an attribute loading="lazy" in the IMG tag. Sounds like that has something to do with it. But I don't know what it is all about.
I did some research, played around a bit and took a closer look at the page of a DokuWiki that is still based on Greebo (without lazy
attribute) and in which images are also embedded.
My conclusion is the following:
My idea that this might have something to do with loading="lazy"
was not confirmed, quite the opposite.
It seems that several unfavorable conditions come together here, which reinforce each other. One is the fact that the height of the images is not already specified in the IMG tag, so that the browser can position everything correctly without any effort before loading the images. Then the rendering would already succeed in the first attempt and it would not come to the layout shifts.
Secondly, the fact that some browsers do not handle this as optimally as it is apparently possible, as the Firefox engine proves.
The third point I already mentioned above: The HTML structure of the page in question is very unfavorable and highlights this problems still further. As I said, you could fix that with CSS. That would be the means of choice for me.
You could also try turning the speed screw. But speed can hardly be guaranteed in all circumstances. It is better to ensure that speed does not play an unnecessarily large role.
- Michael Sy.