Pages Change Size As External Material Is Encorporated After Initial Display

[EPAIII]

I frequently use bulletin boards but this can apply to all web sites with clickable links in their pages. A page initially displays, probably after the HTML code is received and initially digested. But remote content is still absent. And that remote content takes a while (several seconds) to find and download. This delay allows the user to scroll down the initial page and find a link to be selected. And just about the time the user clicks the mouse, some remote content above that point in the page arrives and is inserted. So as the mouse is being clicked, the page EXPANDS downward and that mouse click is often on the WRONG link. And another page is now loading. So the user must go back to the original page and then WAIT for a longer time before clicking the desired link.

I would like to suggest that the Firefox determine the size of all remote content immediately upon encountering it in the links to that content. Then, a WHITE SPACE be substituted for that content BEFORE the page is initially displayed. That way there is no way for the pages to change size as the content arrives. These determinations of the space needed should proceed in the order that the remote content items appear on the page. 

Perhaps some mechanism to prevent mouse clicks on links where all the remote content above them has not been accounted for with space (white or otherwise) would be in order. This would prevent clicking on the incorrect link when a page suddenly changes size.

It wold be best if the HTML code itself could look up the size of that content as it is initially being posted in a web page. And that size would be stored in that HTML code on the hosting site. No lookup would be required when every user opens that page because it would already be there. That would require more work on the part of all internet developers. But it could be done.

I assume that Mozella has my contact information if that is needed. I will check back here later.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[dholbert]

Thanks for the suggestion. This is a well-known category of problem, actually -- you can search the web for "layout shift" and "scroll anchoring" to read more about the issue and mitigations.

The concrete suggestions that you made are already things that we do, to the extent that we can do them.  I'll reply to a few specific points:

> I would like to suggest that the Firefox determine the size of all remote content immediately upon encountering it in the links to that content.

We attempt to do this, but it takes measurable amounts of time to get the response back from the server with the part of the image data that tells us how big the image is (for example). The issues that you've run into are occurring **during that time**, while we're waiting for the answer.  Once we have enough of the image data to know how big it is, we relayout the page to account for its actual size (even if we don't enough image data to draw the image itself yet).

> Perhaps some mechanism to prevent mouse clicks on links where all the remote content above them has not been accounted for with space (white or otherwise) would be in order. This would prevent clicking on the incorrect link when a page suddenly changes size.

This is indeed one possible approach, but it'd be extremely-bad experience for cases where e.g. a site has an image that takes minutes to load, for example.  We wouldn't want to just block the user from interacting with the site (clicking links, etc) for that time.  Even for shorter periods e.g. seconds, a user might see and want to click on a link right away, while an image request happens to be in-flight; we don't necessarily want to block them from doing that.

> It wold be best if the HTML code itself could look up the size of that content as it is initially being posted in a web page. And that size would be stored in that HTML code on the hosting site. No lookup would be required when every user opens that page because it would already be there. That would require more work on the part of all internet developers. But it could be done.

In fact, that is the recommended best practice, essentially. Google actually uses layout shift i.e. "how much does stuff move around on your page" as a search-result ranking technique to incentivize sites to avoid this issue. You can read more about that at https://web.dev/cls/ .  Your specific suggestion (storing sizes for e.g. images) is mentioned at https://web.dev/optimize-cls/#images-without-dimensions