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.

Eye candy in corporate design environment

Recently read a quite inspiring article by Stephen Anderson “In Defence of Eye Candy”. The concept are nothing new, Stephen presented it in a quite refreshing way. He talked about the concept of aesthetics and how aesthetics affects cognition and emotions.

Back in 10 years time or so, there was quite a web design mania purely for sake of eye candy. Rising from the primeval stage of web content presentation, designers demonstrated their talent and aesthetic opinion by exploring the potential of newly formulated mark-up language and Flash as emerging multimedia platform.

Along with the advance of internet technology, web has been increasingly became a very important business and social media platform. Aesthetics was still important but it was all giving way to pragmatism. No matter how visually unappealing was your site, as long as it made money as an e-business site, as long as it reached its targeted hit number as an information providing site, it was considered as a good site. The same logic has been lasting until these days. Have a look at useit.com website and think of how many usability trainings the Nielson Norman Group conducts each year around the globe, you know what I’m saying.

In most corporate environment, the real dollar return becomes the only ruler of judging whether the company’s website is good or not. Bosses are focusing only on selling figures, while the pressure is taken by solution builders, information architects, developers as well as designers. In some situations there are even no dedicated visual designers – their position is replaced by lower cost web editors, whose work is no much more complicated than data entry. The visual design skill has almost become a luxury in the web team of most e-business companies. The actual visual design work is pretty much outsourced to creative agencies. However the concern is, do those design agencies really understand your business? Can their design integrate well into your web solution and you be benefited in long term?

I’ve been in such environment for quite a few years and I’ve seen it happen again and again. Some really talented visual designers can never stay in the web team of a large corporation for long. Their creativities have been limited by rigid corporate design guidelines and critical quality assurance people. Meanwhile, the outsourced design is mainly focus on short-term return, or a reflection of the requestors’ personal preferences.

It’s very common that the term eye-candy has been always associated with negative connotation. Mentioning eye-candy, to most people it almost becomes the synonym of standard violation and bad user experiences.

Are there any people defending eye candy in large e-business environment? There are! (Web) marketing people are usually die-hard fans of eye candy designs. However they are judging a design with their untrained eyes. Quite often marketing people’s design preference is contradicting with UE principles. So problems happen when they raise design requests to external design agencies.

Same as lacking design skills, profound usability skill is also a luxury in most web teams. In most situations it relies on web developer, editor and QAs’ awareness of UE knowledge. If a company has corporate design guideline, it pretty much rules both design and UE.

There has always been a debate on design and UE which one should be ruling. Now look at the reality, lacking both design and UE power makes the debate virtually meaningless. If you don’t have sound design skill in your web team and you rely on your developers build up everything, without any study or user testing, you should already know what your site will end up with.

So between Design and UE, who rules? This shouldn’t be a question at all. Usability should never become the enemy of good design, and a good design should always keep user experiences in consideration in business environment. The organic integration of the two makes your website shines.