Why does web content appear as “blocks and squares” before fully loading?
In: 2
Its the easiest way to set up a webpage, so before the actual content loads, youll see the framework.
Many of the elements of the page, especially photos, have tags in them that say how large they will be, either in pixels or percent of the width of the window or something. This lets your browser set aside the necessary regions of the window.
When you load a webpage, what you are getting is an HTML text document from a server somewhere. The HTML includes how to download any styling, functionality (scripts), pictures, or other assets. So what you are seeing is the HTML being rendered by your browser before it has enough information to know how it’s really going to look. The HTML will have things like “a picture goes here” so the browser draws a box.
Incidentally this is also why ads load last and move your screen right when you are about to press a button. All of the content on the page will be loaded by the server. The ads will have to make an extra trip. First it will download the script from the website’s server. That script will then make an additional call to download the ad, which can often be quite large.
The other replies aren’t necessarily incorrect, but if you mean something like [this](https://miro.medium.com/0*AQNAGRIwEIYD1UGp.png) – this is a deliberate design/UX decision. Placeholders are used so
1. the user gets faster feedback that “things are happening” even though the content itself hasn’t loaded yet
2. The user can already orient themselves in the page even before it fully loads. There are no surprises, everything pops precisely into the spots the placeholders indicate.
Latest Answers