Jonathan Weiß

The first impression of a web application is the time it takes to load. There are a few steps to make this first impression the best impression, so let's get started.

Step 1: Preloading data

For nearly every application you need to login with your username and password. While the user tries to remember his password, we get a few extra seconds to load data. Be sure to do this unobtrusively, because some users wait until the loading bar disappears before they start working with a web application.

Step 2: Reduce requests

One of the biggest bottlenecks in modern browsers is the amount of active HTTP connections at the same time:

»A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.« RFC 2616

So much for the RFC, but how does it look like in real life?

Maximal amount of simultaneous connections to the same server	Firefox 2	Opera 9	Safari 3	IE 7
HTTP 1.1 connections	8	8	2	2
Persistent HTTP 1.1 connections	2	8	2	2
Values changeable?	yes prefs.js	yes Opera6.ini	no	yes Registry

To keep the amount of connections low, combine all CSS/JS files to one. While it is easy to put together all CSS and JavaScript files, we still have plenty of images which have to be loaded separately.

Instead of loading many small image files and applying them by using the src attribute, we will use a large single image file containing all images which are used on the web application. Each image will use this file as a background image with own background-position values. This technique is called CSS sprites. There is a CSS sprites generator which will not even generate an image containing all uploaded images, but also generate the CSS settings for it.

An optimal page would look like this:

• one HTML file
• one JS file
• one CSS file
• one or two CSS sprites images

The last point depends on whether you have transparent images in your application or not. If you have, you can use one transparent PNG8 file or GIF file with a transparent background and one JPEG file for all images with more than 256 colors.

Step 3: Build HTML on the server side

Experiments have shown that a web page loads faster if its content is build from static HTML than from dynamically generated HTML objects which are applied to the document object. This is especially useful if you have complex structures or a many HTML elements.

Step 4: Compress your data

Compression is an old but powerful way to reduce the load time. If your user's browser is supporting HTTP 1.1, you can enable HTTP compression. Besides, all ASCII documents such as HTML, JavaScript and style sheet files can be compressed by removing all whitespace characters.

Without words:

Update:
I did not expect that the disadvantages of plain text e-mails ca not be seen at a glance. However, here the points you can detect from the images:

• you can not tell which part of the e-mail is the signature (often filled with its bland legal texts) and which is the important part
• the e-mail takes nearly twice the space of an HTML e-mail and still does not fit into that window
• there are no clickable links for URLs, Skype addresses etc.
• the company logo is missing

Still, there are much more disadvantages which I do not want to mention here. The worst situation is when you are having a long conversation with sombody using HTML e-mails and then someone joins with his plain text e-mail client and destroys your e-mail. All that remains is a fragmented text with lots of unnecessary white spaces and line brakes, e-mail body and signature mixed up and in most cases all your umlauts (ä, ü, ö) or other characters are replaced by some strange ASCII characters.

Todays hint is: append newly created HTML element objecs to the document object first when all modifications to them are done. This can lead to great performance boots, because style or behavior changes (during the creation process) do not have to be applied by the browser.

So to improve this code snippet

var blockElement = document.createElement('div');
var paragraphElement = document.createElement('p');
var boldElement = document.createElement('b');
 
document.body.appendChild(blockElement);
 
blockElement.appendChild(paragraphElement);
blockElement.firstChild.appendChild(boldElement);
blockElement.firstChild.firstChild.innerHTML = 'test paragraph';
blockElement.className = 'myClass';

apply the newly created element at the end.

var blockElement = document.createElement('div');
var paragraphElement = document.createElement('p');
var boldElement = document.createElement('b');
 
blockElement.appendChild(paragraphElement);
blockElement.firstChild.appendChild(boldElement);
blockElement.firstChild.firstChild.innerHTML = 'test paragraph';
blockElement.className = 'myClass';
 
document.body.appendChild(blockElement);

If the style settings described in myClass are applied to blockElement's child nodes, they have to be rendered again — even if they were just added to the document.