If I go to the homepage of a website on a computer with a fast connection, and after 5 seconds there are still large pieces of the page missing, something’s wrong. So in the interest of making the internet a better place for all, especially those without lightning-fast connections, I’ve compiled a few tips you can use to speed up the viewing process of your website.
1. Optimize Your Images
This is a big one. Usually if a web page is taking a long time to load, I find the biggest bandwidth eater is a collection of images that haven’t been compressed reasonably. When putting together your site’s images, use appropriate compression. If you’re using JPEG, which you usually should for photographs or other complex images, use the best compression (smallest file size) you can without making it look bad. A large featured graphic shouldn’t be more than about 75k, and of course less if possible. Other images (backgrounds, buttons, borders, etc) should be considerably smaller; they can add up quickly. Tile when possible – a simple gradient for example can usually be one pixel wide or one pixel tall, depending on the direction of the gradient. You should also choose the file type carefully. For simple graphics with only a few colors, like some buttons, GIF or PNG can be smaller than JPEG, plus they’re lossless with few enough colors, meaning you don’t get the blur that can happen on JPEGs. There are also two types of PNG. One uses a color palette of up to 256 colors, called 8-bit PNG, and one uses RGBA channels, called 24-bit PNG. 24-bit PNG is the best way to have graphics that have partial transparency, but if that’s not needed then 8-bit PNG is usually smaller. Photoshop has a great feature called “Save for Web and Devices” that lets you compare a bunch of file types side-by-side. Lastly, never ever ever use BMP files. They have no compression whatsoever and take up huge amounts of space. If you need a totally lossless image, use 24-bit PNG, but use it sparingly. Another graphic option is the SVG (Scalable Vector Graphics) format. It uses an XML-based text format to describe how the image should appear. After optimization, an SVG file can be 14 or 15 times smaller than a PNG.
2. Consolidate Your Files
A browser requesting data from a server uses the Hypertext Transfer Protocol (HTTP) Other protocols are in the works that may eventually largely replace HTTP, but as it is, data is sent to the server requesting each file, then information is sent back to the client about the file – file size, MIME type, etc, along with the file itself. The data sent back and forth in excess of the file itself is not a large amount, but it adds up if you’re requesting a bunch of files. Therefore, it is often a good idea to put multiple images into one file when possible. For example, a 120 pixel by 30 pixel button with a default image, a hover image, and an active (clicked) image – you can create a 120 pixel by 90 pixel image, place each button style on the image, arranged vertically, and use CSS to change the position of the image on the background. Since your button is 120×30, it will only show a third of the image at a time, and CSS can tell it which third to display. Turning three images in to one is nice, but consider this image from the popular jQuery JavaScript framework. If you’re using all (or many) of those icons on one page, you’re cutting down on a huge number of requests by putting them together. Plus, usually, putting images together in one file results in a smaller file size overall than separate images. Scripts and stylesheets can also be consolidated to reduce requests.
3. Cache Control
Setting long-term cache-control headings on files that aren’t likely to change can save some traffic for repeat visitors. Improved effect can be achieved with server caching, if you have a heavy load of server-generated content that doesn’t need to update frequently. In this case, you can use various methods to ensure that the content is only generated once in a while. Generally this means that every so often one visitor will have a slower loading experience. If you are able to set up a mechanism on your server that updates the content independently of web requests, you can eliminate that once-in-a-while problem as well.
4. Minimize Reliance on Plugins
The biggest one here is Flash. Although Flash can be optimized pretty well, it usually isn’t, and a whole website made in Flash is almost always tacky and difficult to navigate (back and forward buttons) anyway. Plus it can considerably slow down machines without good graphics or memory resources. Having Flash in some parts of your site is generally fine, although iPhone and iPad can’t see it so you might consider alternatives for them. Using HTML5 tags is a great way to use built-in browser functions instead of bulky plugins. Of course, not everyone has a browser that supports HTML5, so again alternatives are a good idea.
5. Control When Data is Loaded
This can be achieved in two basic, somewhat opposite, ways. Firstly, delayed-load. If you have a page with tons of contents that don’t display right away, say because they’re in an accordion layout, you can save initial load time by using AJAX to load the contents of each section only when it’s needed. The downside of this is that when you do need the data, it’s not immediate – it has to be downloaded. This technique can be used with the next one for great effect, however. The other method is preloading of content. If you have several sequential pages, having the client cache the next page (after the current one is completely loaded) can improve browsing speed. Simply use delayed AJAX to load up the following page, and it should stay in the user’s cache, so it’s already downloaded when they click “next.” The two techniques can be combined by having the page load only what’s displayed originally, then systematically import the rest in sequence or as it’s needed.
There are other things that can be done as well, notably using a server that supports sending GZip data, but most servers do this automatically, and if yours doesn’t you usually can’t do much to fix it besides change hosts. A faster server can help as well, but again, if someone else is hosting your site you’ll usually need to change providers or plans to get a better server.
