Speeding up your web pages

Though the speed of internet connections has improved drastically in recent years, it is still a good idea to ensure your web pages are properly optimized to download quickly. This results in at least a slight improvement in responsiveness for users with fast connections, and a large improvement for users still on dial-up connections.

Number of HTTP requests

Cutting down on the number of HTTP requests will have a significant effect on downloading time. This can be achieved by grouping images into image maps, or creating one image from several others and referencing the image position and segment from your CSS, or including the image directly into your HTML document (though of course this will also increase the size of the HTML document). In general, splitting content into several files that could be served from one will increase HTTP requests. For example, if you have two JavaScript files you may want to think about combining them into one file (though this decision might also be influenced by application architecture and other considerations).

Images

Where text could be used instead, images should be avoided, as they are much larger. For example, the header of a page should be simple text fashioned by CSS. Images are appropriate where a logo or specific font not available on the browser is required. It can also be tempting to use lots of images to make a page prettier, but if this leads to a slow site, it probably isn't worth it. Getting the balance right is important.

Images should also be optimized by image editing software before being used for a web page. This makes the size of the image smaller but usually not noticeably lower in quality.

Java Applets/Flash

Using a Java applet for something like a fancy menu is probably a bad idea as the Java Virtual Machine takes quite a bit to load. Delays can also be seen with Flash, though they seem to be less severe (I've seen a few Flash menus that loaded acceptably quickly). Both of these technologies do have their place of course, but for things like fancy menus, JavaScript will often do the job quicker.

HTML tables

HTML tables shouldn't be overused to set the layout of a site (some would say they shouldn't be used for layout at all). For example, using nested tables just to position a paragraph is going to require a lot more HTML than a paragraph tag with some CSS to control it's margins.

Clean HTML design

Following on from the above point, if the same visual appearance can be obtained with less HTML, then some effort should go into achieving that. Often it is useful to check the HTML code generated by WYSIWYG editors to make sure they have not inserted garbage HTML into your source.

Referencing external content

If you have some JavaScript or CSS that is identical for every page, then it is best to include it in a separate file and reference it from the HTML page, rather than to include it directly in every page. This way, the browser downloads the code once and uses it across all your pages. Also, for pages where, say, a JavaScript function is not used, it is more efficient that it isn't included in the source HTML.

Caching

If your pages are dynamically generated but remain unchanged for a certain period of time, it is a good idea to cache the output of the script and feed that to the client as static content. So for example, if a site publishes an article that is likely to remain unchanged, it can be cached and a mechanism used to check for newer versions before regenerating it, rather than have the script grab the article content from the database on every visit. Some CMSs will generate a static HTML page that does not require a database interaction when serving the page to browsers.

Content Delivery Networks

If you serve lots of large files, such as Flash videos (YouTube style), then it is a good idea to use a Content Delivery Network (CDN). CDNs will host your static content and choose the appropriate server to send the data to your users based on geographic proximity and other criteria that determine which server will serve the content fastest.

Programming language and platform

Some platforms and technologies are faster than others, and in some cases it depends on how the application will be designed what platform will suit it best. The now dated Common Gateway Interface (CGI) technology was slower than modern platforms because a new process had to be spawned for every request. With newer platforms, the main engine or virtual machine stays running on the server between requests, creating new threads per request. With some platforms, you may find that the first incantation of a script or page is slow, as the code is compiled, but subsequent requests are faster. For example, this may make Java Server Pages (JSP) slower than Java servlets when first run, though they should have similar speeds thereafter. The debate over which language is fastest for serving web pages is a heated one, with plenty of information available on the web.

Compression

Most modern browsers accept data that has been compressed with the Gzip algorithm, so where possible, it makes sense to configure your server to deliver compressed items. However, images should not be compressed as they are already compressed in the formats used for the web (JPEG, GIF, PNG, etc).

Asynchronous tasks - Ajax

Ajax provides ways for a page to communicate with the server and receive information without having to reload the entire page, and for allowing this process to happen while other tasks are being carried out. It's a good idea to use Ajax (or some other HTML trick, perhaps in combination with output buffering on the server) to present to the user a useful page whilst a script on the server is still attempting to put together all the information needed, and send it to the client. For example, if a hotel website needs to search a large number of hotels in a city for rates and availability, using Ajax the first results can be displayed whilst the others are still being obtained. In cases like this, were it not for Ajax, the user might get fed up of waiting for the results to load and leave the site.

Conclusion

The list of points presented here is by no means exhaustive, and a search will yield many more sources of information. However, hopefully the points in this article will be enough to get you on your way to creating faster web sites!