1. Use the right file-format for your images

Put some thought into whether the best format to go with is jpg, gif or maybe a png?
Don’t sigh! A lot of people think they are really good at this and never really think it through. I don’t mean to insult you but you might be one of them. If so don’t be too sad. You are in good company with Google! Yay!
Read this article about Google and image optimizing. And yes, Google did learn their lesson.

Why?
Because it will reduce the size and a lot of times also increase the visual appearance of your amazing images. Your page will finish up extra-awesome.

Why not?
Because you are a lazy bastard! Sorry I’m just joking. Acually there are times when you should go against what seems to be a good idea. Especially when chosing between a png and a gif-format. That is when dear Internet Explorer turns into a grumpy kid and refuse to cooperate.

Any links?
Check out Smush.it

2. Sprites

Did you know that every single image on your page needs their own connection to load? In some web browsers (Opera) you can see nice data like “4/653 elements” have loaded. Wouldn’t it be nice if you could cut back that 653… a lot? If yes, then sprites is the thing for you.

Why?
The concept of sprites means that you have one image which contains a lot of smaller images. Then you use css to show the right one. I recently converted our menu into a sprite. It reduced the amount of connections from eight down to one and the size were reduced with fifty percent. (Yes! One beaver less!)

Why not?
If you only have very large images on your site. Don’t make a super-picture just to get one connection because that probably means that the poor guy visiting have to be equipped with extreme amounts of patience.
Also if you constantly change the images and moreover they all have different width and height then sprite is still good but it can be a real pain to update.

Any links?
A List Apart: Image Slicing’s Kiss of Death This is a good one!
You might also try out this CSS sprite generator if you are a lazy… sorry. I mean try it.

3. Check your css

So we’re done with images let’s move on to styles. Css-files are not as annoying as images when it comes to slowing down your page. But if you are running a pretty large page it’s definitely worth it. The best reason, which any geek would buy, is the sweet feeling of knowing that everything in your css is perfect. No color and background-images applied to nonexistent elements that you erased several years ago.

Why?
Minimize the size of your css-files is a good thing not only because the size of your page will go down but moreover you will give your css an extra thought and maybe when you want to do some redesign in the far future you won’t run into problem because of stupid old and rotting styles.

Why not?
Because you simply don’t have time. This can be really time-consuming. Other reasons could be that your css-file is not that big in size and/or your page is pretty small with low traffic.

Any links?
Yes! There is a great tool to help you out. It’s called CSS Redundancy Checker. (Sorry people, but there goes the time-consuming excuse..)

4. Compress your css and your ‘beloved’ JavaScript

Now we have moved on to the evil monster of slowing down pages. JavaScript. Boooh! Don’t get mad now all you people who have a long a prosperious marriage with jQuery. I don’t say you should stop using JavaScript. I just want to point out that things can be improved. I wrote the word “beloved” for a reason. Do not overuse JavaScript!
Go through all your scripts and keep the ones that truly add something of value. Throw the rest in the trash.
After that start compressing! And do the same with the css.

Why?
Easy. Compressed means smaller files which means a faster web site. Another great(?) benefit is that compressed code makes it a lot harder for people to figure out how you did things.

Why not?
Because you want your code to be readable. This is actually a good reason to not compress your code. As for me I hate stumbling over some great JavaScript-functionality only to check behind the curtain and discover that the script is totally compressed and ugly. A lot of people learn by trying out cool things they’ve seen on other pages. A compressed file makes it, if not impossible but very hard to learn by copying. So don’t be an egoistic prick! Share the great stuff! (Compress the dull things…)

Any links?
Yahoo! UI Library: YUI Compressor there are also an online version that might come in handy if you don’t like to install things.
Of course you can compress your css with the YUI compressor but there are also specific online tools for css. Clean CSS and CSS Compressor to name a few.

5. Avoid JavaScript-errors

Have anyone been browsing in Firefox with a cool little plugin called Firebug turned on? And then suddenly you happened to end up on this evil site (i.e. famous swedish newspaper) and your friend, the tiny Firebug, starts screaming in agony and ten seconds later you are incapable of moving (the mouse). Sounds familiar?
If you realize that your page is full of JavaScript errors you need to do something! You need to stop browser-slavery! Don’t make your web browser do unnecessary work! Check if stuff actually can be done before trying to do it. Something as simple as the code below could be a great improvement.


if(getElementById('#superCoolElement')) {
// Do cool stuff with cool element!
}


Why?
If your browser is constantly trying to do something that cannot be done it’s not good and it will slow down your page. This is pretty obvious. So go through your code. And if possible don’t include all JavaScripts on every page just because it’s an easy way to go. It might not be such a good idea.

Why not?
Because you hate browsers, people who visit your page and the internet in general…
Actually I can’t really find a good reason why you should not do this.

Any links?
You might enjoy this article on Avoiding Bugs from InformIT and also this slide about JavaScript error handling

That’s all for now people!
Have a great weekend!
/Ida