How to speed up a website

Last updated: January 14, 2010.

Okay, I'll let you into a secret: this isn't the fastest website in the world. It's a collection of detailed pages—long, hopefully helpful articles packed with text and images—so it's bound to load more slowly than a lot of other sites. At least, that's what I'd always figured. But when Google launched its recent "let's make the web faster" initiative, I discovered I had a lot to learn about website optimization. I'd put a lot of focus on things like the quality of my pages, ease-of-use, and accessibility, but in the process I'd neglected one of the cardinal rules of website design: users like pages that load quickly. Armed with a painful hint from Google Webmaster Tools that my site was among the slowest 20 percent of websites, I decided to set about doing what I could to improve speed without sacrificing quality. Here are a few simple things I did over the space of 2-3 weeks that improved the loading times of my pages by about 50 percent.

Photo: You website darts back and forth through ethernet cables like these. How can you make it travel faster?

1. Regularly check Google Webmaster Tools

I was slightly skeptical when Google announced its page speed monitoring tool: why would anyone want to focus on page speed rather than page quality? But assuming you've already focused on your content, it makes sense to speed things up as well. It's a win-win-win: everyone benefits from faster pages.

If you use Google Webmaster Tools, you'll find there's a regularly updated graph of your site's speed, currently tucked away in the (experimental) Labs section. One thing I've noted about these graphs is that they seem to lag behind any modifications I make by several weeks. In other words, any optimizations you make will take some time to show up. Relax and keep optimizing your site and things will come good in the end.

2. Use the Page Speed Firebug add-on

If you're a website developer, chances are you already use the excellent Firebug addon for Firefox. Add the Page Speed addon to Firebug and you can instantly get lots of very specific tips for optimizing the pages on your site. PageSpeed demonstrates some very easy bits of optimization completely automatically: it will shrink ("minify") CSS, images, and other bloated files so you can see just how many bytes you'll save.

3. Minimize the number of files per page and the total size of the page

If you judge by the size of the main HTML file alone, you might be surprised how big some of your pages are when they finally show up in a user's browser. You can find out by loading a typical page from your site then saving it as a "complete page" (a folder containing all its images, javascript, CSS, advertisements, widgets, and other files), then simply calculating the total size of the folder your browser creates. Prepare to be amazed as your little 35K HTML page bloats up to a total page load of 200-450K, as some of mine do!

Your mission is to reduce the number of files loaded by your pages (since more files mean more HTTP server requests) and the total size of those files (since bigger files take longer to travel over the Net from server to browser). Look through the files in the "complete page" folder and figure out a) which ones are biggest (if images make up 90 percent of your page size, that's really what you need to focus on) and b) which are most numerous (have you got dozens and dozens of small thumbnails or icons you could rationalize somehow to reduce the number of HTTP requests?).

4. Cut the size of common files

With the help of the Page Speed addon, try to reduce the size of any common files loaded by most or all your pages (things like your CSS files, your header graphics, social bookmarking icons and so on). Simply reducing your main CSS file by a few thousand bytes will bring an improvement, since that file may be loaded tens of thousands or even millions of times a day. Page Speed may also demonstrate that switching some graphics from GIF to PNG (or vice versa) will save you thousands of bytes with no perceptible loss of quality. Cutting your common files will give you a speed improvement and a bandwidth reduction too, so it can save you money.

5. Use CSS as much as you can

One key principle of speeding up your site is to throw workload from the server onto the browser. One way to do this is to use CSS for visual effects. For example, suppose you want black borders around all your JPG images. You could do that in a graphics package, but you'll make every single file bigger and slower loading in the process. Far better, you could add a border to some or all your images simply by styling an IMG in your CSS file. That way, you get the same effect but your files stay smaller and faster. The same goes for social networking icons. You may have a dozen or more little PNG icons loading on each page, one for Facebook, one for Twitter, and so on. But did you know that loading each one of those slows down your server? The recommended way to reproduce those icons is to use a single image containing all the icons and a bit of CSS called a sprite that lets the browser pull just the relevant bit out of the image in each case.

6. Use gzip/deflate compression for HTML

If your site is like mine and heavy on words, you might wonder what you can do to improve speed. After all, the words are the most important thing and there's no way to reduce them. True enough, but if you have large, wordy pages try to enable your server so it compresses HTML files while they're in transit (it's a bit like sticking your HTML into a ZIP file). One simple way to do this is to enable gzip or deflate compression, by modifying your htaccess file (assuming you're using an Apache server). This puts an extra load on your server so it may not be enabled by default by your hosting company; ask your tech support people for help if you can't make it work.

7. Compress images if you can

I routinely compress JPG images to about 75 percent, which I find gives an acceptable tradeoff between quality and file size. When I first set up my site, I decided to put drop shadows on all my JPGs, which I now realize adds little to the aesthetics of the site but makes all the images about 25 percent bigger than they need to be and costs me a lot of money in bandwidth. (I could probably do something very similar or even better than a drop shadow with CSS styling.) If I had time, I'd go back and take all those shadows off, but there are about three thousand of them!

In the meantime, I've noticed that quite a few of the more "decorative" photos can be compressed down to 70 percent with little loss of quality and a considerable reduction in size. I identified about 1000 images and decided to change their JPG compression from 75 to 70 percent. Sounds like an onerous job? It takes just a few minutes. First, make a backup copy of all your images in case something goes wrong. Then put all the images you want to compress into a new folder and load them into Google Picasa. Then select all the images and export them as a batch with a compression of 70 percent. It's automatic! Once you've done it, look through all the compressed images and make sure nothing is too blurred or fuzzy. If it is, simply ditch that image and go with your original version at 75 percent compression or higher.

While we're on images, remember to use the optimum file type for the image file you're using. Generally (but not always), JPG is best for photos and GIF or PNG is best for line art, but always check what comes out smallest. Sometimes JPG will blur writing or annotation on photos to an unacceptable degree, obliging you to use a bigger PNG file. Often PNG files comes out far bigger than GIF with little or no improvement in quality. Don't automatically use one file type or another without checking first which gives the best quality and smallest file size.

8. Watch those scripts!

If you've got lots of external scrips loading from your page (news plugins, advertisements, widgets, page trackers, and so on), you're obviously going to slow it down. Make sure all the stuff on your page is earning its keep. For example, if you've got an Amazon "deal of the day" advertisement widget on your page and no-one ever clicks on it, take it off right now. It's doing nothing for you, your users, or Amazon, and it's slowing your page down. No brainer!

9. Trim any hidden page fat

My site's A-Z index is simply a list of all my other pages. Each item on the list is a link to another page with a little colored dot (a PNG image) to indicate how easy or hard the page is for readers of different ages and abilities. But for each of those dot images, I'd also added an ALT tag that was about 5-6 words more wordy than it needed to be. Multiply 5-6 words by the several hundred list items on the page and you can see the HTML as a whole was about 40-50K bigger than it needed to be. With a few search and replaces, and no loss of page quality, I cut the size of that page (and its loading time) by about a third. What hidden comments, spaces, or unnecessary page flab can you trim?

10. Put your hosting near your traffic

I confess that this is something I've not done. My site is hosted in the UK, where I happen to live, but it's aimed at a worldwide audience and the vast majority of my traffic comes halfway round the world in the United States and Asia. It would make sense—and speed up my site a lot—to locate my hosting nearer to where the traffic is coming from. But obviously there are other considerations in choosing a good Web host such as reliability, convenience, and cost to chew over before you relocate.

Further reading

That's the end of my whistle-stop tour to speeding up your page, based on my own recent experiences. You'll find lots more tips on Andrew King's Website Optimization site and in his excellent Website Optimization book, published by O'Reilly.