Why Browsers load Websites gradually?

Question

When I visit a website, even on a high-bandwidth internet connection, the page will load bits at a time, such that I get to watch the page be constructed before my eyes.

Even though this happens quickly, it's kind of jarring to watch elements move around. But perhaps I'm mis judging my own preferences, and it would be even more offputting if I had to wait longer for any sign that the page was loading.

Are there any studies or general UX principles that indicate why users might prefer the status quo? Is there a reason why browsers won't receive the whole page, then display it to the user for high-bandwidth connections?

Answer 1

Technically this is caused by the fact that images and other assets are generally hosted separately, and the browser only knows to go fetch them when the document uses them.

It would be technically possible to delay displaying anything to the user until all the assets were ready (a lot of old-school Flash sites did this for instance, with a loading screen shown while all the various assets downloaded), but that has some pretty profound negative impacts on the user’s perception of the site’s speed, as described by Jakob Nielsen in his article Website Response Times:

A snappy user experience beats a glamorous one, for the simple reason that people engage more with a site when they can move freely and focus on the content instead of on their endless wait.

In a recent study for our work on Brand as Experience, we asked users what they thought about various websites they had used in the past. So, their responses were based not on immediate use (as in normal usability studies), but on whatever past experiences were strong enough to form memories. Under these conditions, it was striking to hear users complain about the slowness of certain sites. Slowness (or speed) makes such an impact that it can become one of the brand values customers associate with a site. (Obviously, "sluggish" is not a brand value that any marketing VP would actively aim for, but the actual experience of using a site is more important than slogans or advertising in forming customer impressions of a brand.)

In his earlier article The Need for Speed, he makes the point even more explicitly:

The most important issue in response time is when the user gets to see a screenful of useful information. It matters less if it takes longer to load the full page and all its illustrations if the user can start acting on some information fast.

Aoife Johnston (UX Experience Designer at Australian careers site Seek) wrote an interesting blog article on the topic too, describing the effect of the “spinner of death”:

Instead of displaying a loading spinner until all elements of the page had loaded (which was taking up to 5 seconds), we implemented staggered loading of content on site load. This meant we progressively displayed visual elements of the site sooner for users to focus on while loading was processing in the background—the blurb on what you could do on this page, and the search boxes you could use to do so. This provided distraction and prompted them with a task to cognitively prepare for, so loading didn’t feel so long to them.

Answer 2

If I'm understanding correctly, I think the question should be "Why sites loads websites gradually?" .

See to answer your strict question, browsers do whatever you (where you is the developer, site owner, etc) tell them to do. There's no magic, if you tell the browser "do A, then B, then C" that's exactly what the browser will do.

However, if the question is "Why sites loads websites gradually?", then there are many reasons.

As explained before, the browser will follow instructions, and also the order of these instructions. This allows the developer to control how a site loads, and also causes a lot of problems to people who doesn't know the caveats of site rendering.

Just think of this: a browser loads resources: scripts, images, text, connects to a DB, loads external resources, and so on. Generally, you measure this in milliseconds, with most professional sites loading under 2 seconds.

If properly done, you should never see what you say. These load times are smaller than most people can perceive, so a professional site should load "completely" before you notice.

However, there are situations where this doesn't happen, including (but not limited to):

• slow user's connection
• slow server
• render blocking scripts
• external resources

For the first item, there's no much to be done, but the other 3 can be easily fixed by the developer or site owner. Whether they're fixed or not is a whole different story.

OK, but I have a mega site, what should I do?

There's an obvious case where sites will load slowly: sites with lots and lots of content. This was specially true in sites with Flash , and now you can see it in some sites loading videos or heavy files. In this case, some sites with no optimization (or optimized to the limit, and yet slow), choose to show a loader page (or in some cases, a static splash page).

Quite honestly, in modern development this is rarely needed. And if so, there's a chance the problem comes from another reason (such as poor UX, unneeded content, bloated external resources and such). They're basically yelling at you: "hey, I have no idea how to optimize my site, but wait all this time because my stuff is so amazingly amazing it will blow your socks off, promise!" and then a loader that might (or might not) end some time. Hopefully, it will end before the user runs away. Hopefully. And here comes something you might have seen many times before: the dreaded never ending loader which is in place because the page is very slow. And the page is very slow because... a script is blocking everything. Fixing that would make that loader unnecessary!

In short

• Assuming you mean sites rather than browsers: mostly poor decisions or lack of ability
• Assuming you really mean browsers: because that's how browsers work, they have to load things in some way after all!

Answer 3

An additional point that may well be worth noting is that if the user is using a text only browser or possibly a mobile browser with very limited bandwidth they may well get the link that they need to click, especially if the author has been consistent on using the alt= on images that are also links, to go to the actual final page that they are looking for before the current page is finished loading.

Personally I used to hate the sites that loaded a huge flash movie with nothing other than hype before allowing me to move on to what I am looking for and, wherever possible, if I find such a site I go looking for another company that does not use this.

Answer 4

A blank screen drives users away most quickly

The plan for building a website a few years ago was to download the necessary assets and display the page when it was ready. That has been found to be poor UX.

It’s widely known these days that users hate to wait and leave slow web sites after very short delays. But users especially hate to wait while the screen is blank. That is because a blank page means uncertainty about when and whether the page will ever load.

When something is happening on a website, even if it’s not pretty, users can see the progress, and are more likely to wait for it to finish.

Google rewards speed

Google rewards sites that get to the first meaningful paint fast. Roughly speaking, they rewards sites that most quickly display the “above the fold” content in a usable way.

The Google Pagespeed Test is not a simple test to pass, and implementers have to break a lot of rules that were once considered best practices. Chasing speed like this can have side effects, like a flash of un-styled content. These things don’t need to happen, but for a large site, getting maximum speed without any odd artifacts appearing during page load is not trivial.

Answer 5

Browsers take a very simple approach to loading web pages; they start at the top of the html document and they work their way down to the bottom, that's it. The intention is to not make you wait for anything.

As soon as a browser has read the document it will try and display it, trying to provide the content of the document to you as fast as it possibly can and not wait for any linked assets to be downloaded first (as that would delay you getting the content). Assets are downloaded in the same way, top-down, because that's the way the document will be read.

Answer 6

I think a big problem is websites are trying for too much "active content" nowadays and instead of having the server generate the full webpage, it just creates a rough framework with little content in it.

instead of querying the database, sticking the data where it belongs and sending it to you, the server is like "here's the query string, once the data comes, put it where it belongs". I think the internet would be a whole lot faster if the beefy server would just send a fully generated webpage rather than just tell us where the content can be found.

Answer 7

Why Browsers load Websites gradually?

They all do. That's how web pages work.

it's kind of jarring to watch elements move around

It is, though completely typical, so people aren't shocked by it.

But if it bothers you, you can make sure all the placeholders in the HTML file are styled to the proper size even before the additional content loads.

and it would be even more offputting if I had to wait longer for any sign that the page was loading.

A lot of studies show just that. People are happier seeing something getting rendered on screen rather than having to wait for an entire page to load before they can fully interact with it.