Front-end Optimization from the Get-go, Part 1
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
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:
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.
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.
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.