How long should a page take to render after it has been received?

Question

Possible Duplicate:
What do most users consider acceptable load times on a website?

How long should a page take to render after it has been received? I'm talking about initialization javascript and css.

I know this should be considered with what an acceptable overall load time should be. And, I would like to see numbers on that too. I've heard 1-2 seconds, but would like links and reasoning.

What is considered acceptable load time? What is not, where is the breaking point. I know it will come up that it depends what is going on, some operations are expected to take longer. For arguments sake, lets say the amount of time it should take to render search results.

Thanks.

Answer 1

that is not a readily answerable question. there are too many factors in play. the individual Javascript rendering engine, the HTML rendering engine, the size of the document, the complexity of the document, the processor speed of the client machine, the memory on the client machine. 32 bit vs 64 bit, so on and so on.

You can baseline pages on the same system in the same browser with roughly the same amount of content, but that gives you comparisons and in that case you're testing to see if your page is outside of the norm.

Answer 2

It really depends. An efficient site with Zend Framework support could load in 4 seconds, while an inefficient website with no significant overhead can take 3 seconds. Comparing scenarios like this and their subsequent load times doesn't make sense.

Instead, check to see how efficiently your page is loading.

http://developer.yahoo.com/yslow/

YSlow is a Firebug plug-in that I use fairly often. It will see how requests are being handled on the server as well as the server configs and will tell you what you need to do in order to optimize.

Answer 3

The amount of time that a user is willing to wait for your website to load is inversely proportional to their need to be on your site in the first place.

In plain English this means that if the user has no other choice than to be on your site then they will wait for as long as it takes.

If they have a choice then they will bail when the amount of load time appears "painful" to them. This might be 1 second, it might be 5 seconds; that part is completely up to the individual.

Let's say you have a news site, of which there are hundreds or thousands of options. If your site takes 5 seconds to load a page you can be assured that users won't stick around. Conversely, let's say you are the IRS (the US tax collection agency). A user will keep trying on that site until they have done what they went to do no matter how long each page takes to load.

Answer 4

How long is a piece of string? There's no hard and fast answer to this question, just the common sense truism that people don't like to be kept waiting. Whether they actually will wait or not is dependant on how valuable they consider your content to be to them. You also need to keep in mind that load times aren't set in stone, a page that takes 4 seconds to load on a DSL/Cable laptop may take 20-30 seconds or more on a 3G phone web browser.

There are some best practice things you can do to improve page load/page rendering times and responsiveness though.

• Put external stylesheets as near the top of the document as possible. Ideally, right after the title tag, or any meta tags.
• Put external scripts as near the bottom of the document as possible. Ideally, right before the closing Body tag.
• Minimize the number of files being downloaded. A single file of 100K will take less overhead and download faster than 10 files of 10K each.
• Specify explicit widths and heights for things such as images and embedded video. This saves the browser from having to reflow text around images that it doesn't know the size for until they start downloading.
• The fastest javascript is the javascript you don't load and don't run. Only use javascript where it's necessary.
• If you've got javascript that needs to do a lot or initialization, put it off until it's actually needed. Doing the initialization on page load will leave the browser unresponsive for the duration of the setup, making the page load appear slower. Instead, place a stub event handler that runs the initialization and replaces itself with the real event handler when triggered. While the initialization will still render the browser unresponsive for the duration, it will be more tolerable because it is not happening as the same time as all the other page rendering chores. If you've got several things that need to do setup then it will also avoid them all running at once.
• Use CSS sprites (this is related to the earlier comment about reducing the number of files)
• Enable gzipping for text (HTML pages, CSS, XML, Javascript, etc).

Answer 5

There are really no hard rules on how fast a page should load. It depends on what you present on the page, if it is something simple, well, perhaps it should be less than a second, but if you are presenting several complicated charts and reports, that will take longer than a few seconds to load completely. Of course, you could preload the fairly static parts first, then animate some GIFs to inform the user that the charts are being rendered at the moment rather than having them staring at blank screen for 10 seconds.

For me, anything more than 4 seconds deserves a hard look, where you can use yslow plugin to figure out the bottleneck.

Some useful links you might be interested to read:-

• Effect of Website Speed on Users - Statistics Reveal Slow Loading Times Cost Sites Serious Money
• Average Page Load Time of Top Ranking Websites in Google

Answer 6

LONG ANSWER/TIPS: As a web developer I keep running into clients that think the page should appear and be functioning the instant the url is sent... I know that will never happen any time soon, so I try to do the next-best-thing:

1. I make sure that at least enough of the main content is displayed and functional within the first 1-5 seconds. Google has done some research into this and it seems than anything beyond 15 seconds and you lose a significant portion of your audience due to site abandonment. This increases almost geometrically until after about 1-2 minutes there is probably no one there...

2. Once the basic page is up and running, I then go back in using javascript and post-load any content that user's do not need to see immediately in order for the page to have "appeared" to be completely loaded, and which by the time they navigate to it should be loaded, or well on its way to being loaded.

3. I also tweak the .htaccess file (when possible) to increase the content expiration date so the page data is not removed from the cache too soon. That way, if they come back within a reasonable time-frame, it saves some http requests and therefore decreases my load times.

4. I also try to consolidate my javascript and css code into as few files as possible. It is not always practical to put everything in a single or even two files, but it is a worthy goal when possible.

5. I also try to make sure all of my images are saved at their final pixel dimensions and with no preview data so it makes the files much smaller. You can do this using the save for web command in photoshop CS.

6. I also try to make sure and load any loooong javascript code at the end of the page code so the page will load and appear without waiting on the javascript code. Most browsers will encounter a javascript include and wait until that is loaded before moving on to the next script/html/image load. Javascript includes are asynchronous: they still load javascript files one-at-a-time.

7. I ALWAYS use something to let the user know that content is being loaded or looked for. I have found that if people have something to let them know SOMETHING is happening, they are much more patient and less likely to have a negative experience.

Here is a link to the site that does all of the above: http://www.heritage-education.com/denverpharmacytechschool_1a.htm

There are other site-slowing issues that unfortunately, most of us do not get control over.

The biggest bottleneck I run into time and again is that the site is hosted on a webserver with a lot of other high-traffic sites and so gets bogged down trying to deliver content.

No matter how fast your site is, this can make it take eons... the link above is a case in point. This client has a slooooooow server and a slooooow connection that is being shared by 75 people! So, sometimes it loads well and other times it takes as long as 20 seconds to come up on their internal machines.

On my connection at work and home it comes up right away, but even then it sometimes takes 3-6 seconds to fully load.

I hope these observations help you. I had to learn all of this the hard way, but this forum has been invaluable for connecting with people who know far more than I do about just about everything to do with coding and web technology...

SHORT ANSWER: 1-3 seconds to become operation, or at lease to appear operational and be mostly responsive.

Cheers!