Hello, my name is Pieter!

I build web applications and craft user interfaces.

Speeding up your website

People live in a hurry, so you'll probably lose some visitors (and possible customers) if your website takes a long time to load. For those who are in this situation and are willing to fix it, here's how.

1) Optimizing images

This is an absolute best practice and you should do it on every website you create. In Photoshop, it's pretty easy. You go to File > Save for Web and Devices and that's it. But what image format should you use? There are three main formats, JPEG (or JPG), GIF and PNG. Below is when you should use each format.

There are also some online tools like Image Optimizer, doing the same thing online.

For further reading, here are some links:

2) Cut your CSS

While developing your website, you often add a margin-left: 5px; or a font-style: italic; to your elements in order to fix some bugs or to spice the design up a little. But when the layout is fully coded, you should take a deep breath and take another good look at it. Are there double properties? Can you put multiple properties into one? p {
margin-top: 10px;
margin-bottom: 5px;
padding: 5px;
padding-left: 15px;
} Should be: p {
margin: 10px 0 5px;
padding: 5px 5px 5px 15px;
} Also, try to combine elements having the same properties. If you style blockquotes the same as your code blocks, it's unnecessary to have the following: code {
padding: 5px;
background: #eee;
border: 1px solid #999;
}

blockquote {
padding: 5px;
background: #eee;
border: 1px solid #999;
} Instead, you'd better use: code, blockquote {
padding: 5px;
background: #eee;
border: 1px solid #999;
} Again, there are online tools like CSS Optimizer doing the same thing, but I recommend that you do it yourself or don't rely on these.
Note: Compromising your CSS (with tools like CSS Optimizer) will make it hard to read. Always save a readable copy for further developing.

3) Reducing HTTP-requests

The idea behind this is simple. Every image, CSS, Javascript, ... is a little package that has to be send from your server to the user's computer and then be compiled by the browser. By reducing the amount of packages, the page loads faster. How can this be done? Here's what Yahoo! Developer Network says:

  1. Combine CSS-files. Instead of having reset.css, header.css, body.css, ... just have one file, stylesheet.css.
  2. Do the same with Javascript.
  3. Use CSS-sprites (see point 4)
  4. Use image-maps

4) Use CSS-sprites

There are already enough tutorials on CSS-sprites, so I don't see why I should explain it in depth here. I'd like to refer you to the articles on A List Apart and CSS-Tricks.

The main idea behind CSS-sprites is: having all the images combined in one big image instead of having a lot of small images. By doing so, you reduce the amount of HTTP-requests and reducing the load time.

5) Small improvements

There are some small improvements that won't help you a lot, but when your website is getting a lot of traffic, every little bit helps.