Cristina - web design         Cristina's®      Capt. Peter - web design

How to Reduce Download Time

This page explains the difference between display and download time as well as
suggests how to structure your page to give your visitors faster download.
It is part of the Website Design Handbook.

Site Goldaward - Pakistani Maritime  International Association of Webmasters and Designers
Site Gold Awards for Excellence on the Web in 2004
Classification: Maritime, Marine, and Boating

Last up-dated: Aug. 31, 2010

At the bottom of the page,
there is a link to a print ready version.
Speed is Important
Connection Speed
Download Time
Display Time
Measuring Download Time
Reduce Download Time
Get Faster Display
This page is best in any browser

Speed is Important

End of November 2009 Google announced the download speed is getting more important. Google's ranking algorithms are going to include the download speed as one factor for ranking websites. You can check Download speed for your own website, pictures are not included in this test. Beginning of April 2010 Google made a new announcement: speed is now included as one ranking factor.

In fact, it's not correct to talk about increasing download speed. The download speed is outside your control so you cannot increase it. What you can do, is to reduce download time. This you do by keeping as simple and short code as possible plus reducing file size for every necessary image. Naturally you wouldn't include any unnecessary pictures on your pages.

Because people are getting more and more "frenzied" when surfing on the net the surfers want everything immediately. We can therefore soon expect to see slow downloading webpages to slide down wards in the search engine results pages ( SERPs ) being replaced with faster downloading web pages. Recent research shows 8-10 seconds is a strong limit for the download time even with broadband.

Connection Speed

The speed is counted in bytes/sec. or KB/sec. (1 KB = 1024 bytes) and is specific for each computer and connection. Depending on the traffic volume at different Internet Service Providers ( ISP ) the speed is variable. It is higher or lower at certain times of the day/week. You can check the connection speed for any computer / connection at browserhawk.com/. With a broadband / DSL cable connection you can expect about 20 - 30 KB/sec. or even considerably more, while a modem + telephone line connection often is as low as about 2 KB/sec.

The connection speed you get is a theoretical one and is measured by sending a certain quantity of data over the connection you are using. Which way and via which intermediate servers / ISP's your connection goes each time your browser connects to an internet website is out of your control. The greater number of intermediaries the lower is the connection speed. You can use the connection time value to rank different computers / connections in your hometown.

To get the real total display time for a certain page you must, however, use a stopwatch.
The real total display time can be divided thus:
  1. The time needed for the browser to find the server requested ( i.e. the IP-number ).
  2. Time needed for the server to answer and your browser to ask for a certain page. When you want the browser to ask for "index" page first, add a slash (/) after domain name. The slash is short for "index.html" in Computerese [ or .htm or default.html or whatever the default page is called ].
  3. Actual time needed to download the code and text, including pictures. Note that each picture / external file requires a separate download request by the browser.
  4. Time required for the browser to process the code and to display the result.
See below how to measure total display time.
Facebook Buttons By ButtonsHut.com
Cristina's Website
Design and Promotion
Check Menu

Download Time

There can easily be much more than 100 customers at the same server at any one time, each one downloading from a different site.  To optimize the server's service, each page code is split up into packages delivered as a train with several wagons. One can imagine the process as follows.

If the file requested is large, the file itself can easily be split into several packages, as, for instance, "interlaced .gif" pictures, which are delivered by and by in several slices, very often 3 slices.

Each page code is sent in packages so that each customer gets a small package at his turn. Between each package coming to your computer there can then be a hundred or more customers receiving their small packages. That's why the download time gets long when the server is busy (= very many customers in line). The server is optimizing the total service time for all customers at each point in time.

The process at the server end
Diagram 1.
The arrows (in Diagram 1) starts at a point in time, and shows the flow of time as one imagines it. The request in the middle can be imagined as being sent to your computer.

The browser has to request each file, like external files (.css or .js), separately, same as with picture files. If the external file is your style sheet may be it comes in two packages and your text cannot be displayed before these files have been processed.

As the text is displayed first directly from the downloaded "main" code and the external files may be come later, it will have an effect of parts of the page like floating around and looking for their final resting place. While this goes on your visitor has to wait because he/she cannot start reading before the process is done.

The modern browsers do save the style sheet files in the cache, although Explorer 6 sometimes refuses to up-date a saved style sheet. So how to know what code to use and when? When choosing between CSS and HTML, ask yourself if you can get same or almost same display with simple HTML. If you can, then use HTML because the code is shorter and therefore the download time is also shorter.

It also explains why it is important to indicate to the browser the physical size of the pictures ( in pixels ). When that is specified your browser simply reserves a place for each picture and displays the text around it while still downloading the picture code.

When you arrange some text in the beginning of the your page as well as between the pictures, your visitor have something to occupy himself / herself with (= reading the text ) while the picture(s) are downloading.

Display Time

Once your browser has received a package, it starts processing the data and at the same time downloads the next package etc. To a human it seems like the browser is doing 2-3 different things at the same time, which is in fact exactly what the browser is doing.

The processes in the browser when downloading
Diagram 2.

The process of receiving your files could look like in Diagram 2 above.  "Text #" and "Pic #" are the separate requests received from among the middle of other customers. Text #1 can be imagined as being your request from Diagram 1 above.

Diagram 2 explains why external files (.css or .js) increases download time. The browser has to request each file separately, same as with picture files.  If the external files are your style sheets may be they come in two packages and your text cannot be displayed before these files have been processed.

Mixing JavaScript, external CSS, and HTML makes page elements like seeking their place on the page before the display is processed and the page settles down.

On average people wait only 8-10 seconds before leaving your page. In this time your background, your logo, and at least some of the first text should be displayed.

Measuring Download Time

To measure the real download time you need a stop watch.

First you type in the URL for the page you want. At the same time as you hit "enter" you start the stopwatch Then you look in the lower left corner of your screen. First you will see: "Downloading ...". By and by when more of the page is displayed you can scroll down. Once the screen (down in the corner) says "Done" it still takes a short while before the last is displayed

At same time as the last is displayed you stop your stopwatch and now you have the total display time of that page on your computer with the actual connection you are using. You can do the same test on some public computers with different connections in your hometown. When you check your own site/page this way, be prepared for some negative surprise.

When you check your own pages, try to use as many different browsers, browser versions, and connections you can find. Older browser versions usually finish the display after a longer time, compared with the latest versions.

 

Reduce Download Time

Google has suggested a few ways to reduce the download time ( increase "speed" ):
  1. Use IP numbers instead of domain names, especially for domains used once only on each page. This is common when you have some data collecting banners or scripts on each webpage. Each time you use the IP number cancels one http request for that domain and reduces the download time with a fraction.
    Get IP number address for a website.

    This doesn't work, for instance with Google analytics if your audience is global or from a few different world regions. Because Google have several data centres around the world, the script requests for some visitors could be re-directed to another datacenter closer to that visitor. Some data collecting service may be changes their system and therefore also changes an IP number and your link wouldn't work anymore.

    If you decide to try this, test on one page only before you do it on all pages. Keep a list of IP-numbers you have applied together with respective domain / sub-domain name in case you have later to revert to use the name again.

  2. If you have two or more, either CSS or JavaScript files on a page, try combine them so you get only one CSS file and/or only one JavaScript file to download. Files on other servers / domains you can of course not combine.

  3. You can try PageTest ( download - 544 KB ) on your own computer. However, I suggest you view the video how to use it first. Or you can use the online version at Webpage Test. I repeat my suggestion from above. If you decide to try some changes, test it with only one link on one page first until you are satisfied it works as intended.

  4. Generally, what takes the longest time to download are the pictures. If you want to really cut down on your download time, after optimizing them, reduce the file size even more for each and every picture.

Get Faster Display

The browsers do download through several threads at the same time, i.e. from several sources, for instance parallel download of pictures and text.

By browser standard manufacturing instructions the default download happens through two threads per host name in parallel. Can be the free server banner code and image parallel and at the same time your own website background and text through another tread.

You can use this fact to your advantage. What you need to do is, if it's possible for you, in addition to your own domain (www.my-site.com) you add a sub-domain, for instance http://extra.my-site.com. This second one would then by the browser be treated as a different host name.

This way you can cut total download and display time with up to about 40%. There will be some extra new time needed for the browser to separately contact the sub-domain.

Finally you move all datacollectors without any banner to the very end of the code. This doesn't change the display but lets the browser continue processing these after the display is already complete.

Sources for info to speed-up your pages:
- Firefox add-on speeding suggestions
- Yahoo's suggestions
- Check your Webpage performance
















Locations of visitors to this site
Home   -   Site Map

Free Backgrounds

Free Pictures

Webdesign Handbook

What's No-Index ?

Computer Viruses and Worms

Hide Your E-mail Address

How to Choose Website Colours

How to Change my Pictures and Photos

Reduce Picture Size

Reduce Picture File Size

Reduce Download Time

Increase Picture Size

How Protect my Pictures

Webpage Optimization

Find Best Keywords

SEO Check-List

Website Promotion

Search Engine Marketing

List of Search Engines

Return to TOP


Website Design and Promotion Search
Powered by Google

 
Related pages:
| "Advanced" Tables Code | Optimize your Webpage |
| Cascading Style Sheets - Pro and Con |
| Reduce Picture File Size |

Get version (3 pages small font, 4 pages normal).

© by Cristina and Peter Forsberg.
You are allowed to print out the text for your personal needs.
You are also allowed to copy and distribute the printout for educational purposes when free of charge,
as long as you give the source: www.donpedrowebdesign.com/download_time.html.

Last updated:
Aug. 31, 2010

Visitor counter
since March 09, 2004
according to: www.digits.com/

eXTReMe Tracker