Fast Web Page Download
 |
|
The effect of cache
When the browser downloads the page, it stores the page elements in the cache of the user\'s hard drive. The advantage with this is, that if the user moves to another page on your site, and this page uses some of the same graphics or plug-in objects as the first page, the browser doesn't have to fetch these resources from your server but can use the cached versions - thereby speeding up download. Of course cache will be no help if the user has never visited your site before and these are the users that you most need to impress.
The importance of the opening pageIf a user is visiting your site for the first time then the opening page is the first thing they will see and they must be sufficiently impressed to be encouraged to view other parts of the site or visit again. Obviously the opening page must contain content relevant to what they seek and it must look good enough to impress them. But these factors won\'t matter if they never actually see the page and this will be the case if the user doesn\'t see something appearing in their browser within a few seconds. If a user does wait for the opening page to download and is impressed enough to move to another page, then the download time of this other page is less critical. This is partly because of the effects of cache and partly because you\'ve won them over and they\'re likely to have a little more patience than with the opening page. |
How to make a page download fast
If all users had broadband then the file sizes of pages wouldn\'t be so much of a worry. However, most users are connecting via a 56K modem therefore this is the case that must be catered for. An easy way to ensure fast download is to make page documents small and have them text only. Unfortunately, text only pages look dull and uninteresting and won\'t stack up well against your competitors. Therefore given that you need graphics and plug-ins to impress, then the best bet is to use these objects sparingly and keep their file sizes small.Another feature that can help greatly is the use of Cascading Style Sheets (CSS). The CSS standard separates the content of a document from the style and this allows not only for smaller documents but also text effects, such as drop shadows and mouse-over effects, which were only possible using graphic images previously. These style effects can be as good as graphic effects but take a fraction of the download time.
The liquid style approach
This is the name given to a feature of CSS that allows the page designer to do two significant things. The first is, that by using absolute positioning with the <div> tag, it allows areas of content to be positioned on the page using x and y pixel coordinates instead of using more conventional table definitions - and this can make for a faster download. Another feature of using the <div> tag is that because the content within this tag is positioned according to pixel coordinates and not where the declaration appears in the document, it means the declaration can appear anywhere within the document.The significance of this is that since the browser downloads and presents content in the order that it finds it within the document, then the content that you wish to appear first can be at the start of the document - even though this content does not appear at the top of the page. So for example, if your page has a logo image with a slow download followed by text content, then the text content can be arranged to download first followed by the slower downloading logo. This gives the user the outline of a page with text within a few seconds and subjectively a very fast page download. Overall the complete download time will be the same but the user\'s perception is what matters.
This approach can be taken further. For example, since the <div> tag allows elements to be positioned on top of each other, a fast loading graphic or block of text can be loaded into the document inside the <div> tag. A second <div> tag can be placed at the end of the document, containing for example a Flash movie, set to overwrite the position of the first. This Flash movie won\'t slow the rest of the page download but will appear if the user stays in the page long enough - and if they don\'t, they won\'t have missed any essential content. For broadband users the movie should be available almost immediately.
An example
The opening page of this site is an example of using the <div> tag to space out download time. The page text content is the first to download, so this should appear first in the browser. Next the site navigation on the left appears. The header at the top of the page containing the logo etc follows this.© 2000-2008 smallbizonline website design Tel: 01501 771106 Privacy Policy Terms & Conditions
