When it comes to making your website display blindingly quick, there are a number of steps you can take. These steps can be split into two categories: front-end and back-end optimization. Although important, back-end work tends to yield less noticeable results for the average site (with the exception, of course, of very large, high-traffic sites where every millisecond counts). In this post we’re going to go through the common issues that crop up in web performance; in subsequent posts we’ll focus on some simple steps that can make your site run observably faster.
The Nature of Requests
A web page will make many requests. The first is for the HTML of the page you’re viewing. From that, your browser will request more resources to display the page. A single request has two phases: your browser asks for a file–be it an image, a CSS file, or a JavaScript file–and waits to hear back; then it downloads what the browser sends. Therefore, there are two optimizations that can be made: by decreasing the number of requests, you reduce the amount of time the browser spends waiting to hear back from the server; and by limiting the file sizes of the objects being requested, your browser downloads less information to display a page.
Let’s say you have a web page with two style sheets, a jQuery library file, another JavaScript file with your scripts in it, and four images. That’s eight requests to display your content (in addition to the HTML). You might think that your browser is surely fast enough for you to avoid having to worry about it.
Wrong.
There are two factors here. First, there’s concurrency. Your browser can only make a limited number of requests at one time, so until a free slot is open, all the remaining objects in the download queue just have to wait. Internet Explorer and Firefox range from two to six concurrent connections (depending on network speed for IE and browser version for Firefox), and there are four concurrent connections for Safari, Chrome, and Opera.
Second, there’s latency. This, unfortunately, is the killer. It isn’t uncommon to have latency times of two or three hundred milliseconds (a third to a half a second or more, depending on the server), where the server idly waits before it starts to download anything.
What can we do to help this? Well, there are a few things we can try:
Reducing Requests
By lowering the number of items to download, the browser is able to render a page faster, so the page appears faster to the end user. The largest cause of numerous requests is multiple CSS files, JavaScript files, and images. Luckily enough, there are approaches and techniques to handle all three.
Concatenating CSS and JavaScript
By reducing the number of CSS and JavaScript files, we can make vast improvements. The easiest method is to concatenate them–that is, roll them into as few files as possible.
CSS is typically much easier to roll into one or two files, as it is usually served from the same location as your website. By moving the contents into a single file, significant waiting times are saved.
JavaScript usually will be a few files (assuming you’re using a library framework and some scripts). By concatenating the files where it makes sense, you speed up your page. (Personally, I consider it fine to have one or two library files, and one file for my code.) Serving advertisements, and using Google Maps tools and some JavaScript tools will add extra requests, and as JavaScript files typically aren’t served from your server, you’re unable to do much to them. I think it’s fine to accept the small speed hit in exchange for the benefit the file brings, such as displaying ads or maps.
Image Sprites
Image sprites evolved from the early computer games, where space–both in file size and memory–was limited. Essentially, sprites are multiple images combined into a single image.
On the Web, CSS controls which image in the sprite is to be displayed (the background CSS style). It’s a technique used widely, and some of the larger sites (Yahoo, Amazon, Google) go to great lengths to squeeze every millisecond of performance from it.
It’s commonplace to have a few sprites on your site, as not every image should be grouped together; backgrounds may require different layouts of sprites (images that are repeated vertically should be kept together, and the same for those repeated horizontally), while icons tend to be easiest to manage when they’re all arranged together.
Conclusion
In the next few posts, I’ll go through some techniques in depth on how to plan and work using code with optimization in mind. These steps are also handy for making established sites run faster, so it could be worth your while to check them out.
Mark CipollaMark Cipolla is a web guy at heart; front-end design and coding (with xhtml/html5/css with a touch of javascript) meets programming (Ruby on Rails and a touch of PHP).
