Optimising web page download time - tips and tools

Fast loading pages improve user experiences, it is widely accepted. But along with the proliferation of faster internet connections, web designers/developers put less attention on page file sizes. It presents a serious threat to user experiences and customer satisfaction. Fast page loading time is not only a crucial factor to keep users happy, but also a key factor to elevate your search engine rankings.

Here are a few tips to make your web sites/pages running quickly and smoothly.

1. Ensure there are no broken path and images on page - they would dramatically increase loading time.
2. Host files locally.
3. For images, always specify image dimensions - height and width, most browsers would recognise an image's dimension, leave it to be loaded last if it's heavy, and load the rest of page first.
4. Make Javascript and CSS external, because they are cached by the browser, but inline JS and CSS get downloaded every time the HTML page is requested.
5. Combine Javascript files - as a general rule, downloading a batch of JS files is slower than download one big JS file even though the combined file size of the batch equals to the big one or even smaller.
6. In the same principle, combine multiple images into a single one, the overall size is about the same but reduce the number of HTTP requests.
7. When designing Flash, rather than designing one big Flash (swf) file, make each flash scene as a separate swf file, and call respective file from the frame swf, depending on user action. In this way, those user uninterested content would not be loaded.
8. Try use vector graphic as much as possible, and reduce the usage of imported jpg, wmv and other raster graphics. Vector shapes are extremely light weight while raster graphics tend to cluster Flash movies in size.
9. Preload components. You can take advantage when browser is idle, a simple example, preload an image for a mouse over state. A more advanced usage could be, before you launch a new redesign, users browsers are stuck with caches from your old design. So before the redesign has been launched, some code can be written in your old page, when the browser is idle, the code can request images/scripts which will be used for new page. Otherwise when the new site is launched, all components would be loaded afresh.
10. Optimise images - use suitable image formats (jpg, png, gif) for different design elements, designers should be crystal clear on this.

There are some really useful tools in optimising page download time. To list a few:

• Use a page analyser, for example http://www.websiteoptimization.com/services/analyze/
• Using Firebug as FireFox plugin, it will analyse all aspects of a given web page. http://getfirebug.com/releases/index.html
• Pingdom - Cool little tool to check loading time of all page components.
• CSS and Javascript file size shrinker - http://www.cleancss.com/ and http://dean.edwards.name/packer/, used to clean up CSS and JS.