Secrets of Website Performance

An ordinary website has 5-15 JavaScript files and several inline pieces of code that can include external libraries. As a result there are 10-20 pieces that can be combined together. The benefits are obvious: faster page load time, customer satisfaction and better DDoS fault tolerance – under attack, every connection, even static, may lead to denial of service.

If you think that you can just put all the JavaScript code into one file, you are going to get upset very quickly. Indeed, most likely that your scripts won’t work when combined into one file. If you are an experienced web developer, you will not probably find it difficult to fix all the problems and make all the code operable. If not – this article is just for you.

So, let’s say we have 20 pieces of code that we need to merge together. We need to make sure that every piece won’t break other pieces. Why? Because if a JavaScipt file has an error, your browser will stop running this file and all your scripts won’t work. At all. What can we do? Fortunately, JavaScript has all the means to handle errors. All we need is the try-catch construction.

This short example will help you combine all your JS code into one script painlessly:

try {
…
place your library code here
…
} catch (e) {
document.write(‘invoke original library from here’);
}

If your JavaScript code works without errors, your visitor will load one large piece of code. If there are problem blocks, they will be loaded from external libraries. In this case consider rewriting these blocks so that they can be used with the rest of the code without errors.

Popularity: 100% [?]

There are 6 basic strategies to improve your web site performance.  I am going to name them in this post and describe them more thoroughly in my future materials. Of course, you cannot boost your website performance if you do only one thing. But if you succeed in at least 3 – your site’s visitors will definitely appreciate your effort!

Here are the strategies:

1. Objects size Minimization. Make sure your (X)HTML, CSS and JavaScript files occupy as little space as possible. Trim white spaces, remove line breaks and comments. Of course, you don’t need to do everything manually – there are a lot of free tools available on the Internet.  Don’t also forget to minimize the filesize of your JPEG/GIF/PNG images. A part of this strategy is GZIP compression.

2. Objects caching – this is a server-side technique. There are many ways to cache your files, we’ll discuss them later.

3. Objects merging – this is very easy. The HTTP requests you do, the less time it takes to load your page. Therefore – use CSS sprites, merge JavaScript and CSS files into one large files – this makes your pages really faster.

4. Simultaneous objects loading – as you probably know, your browser keep only 2 simultaneous connections to one host open. If you add an additional server to keep your images and other static files, you can win up to 30% boost.

5. CSS and JavaScript objects optimization. It can be a real pain to optimize JavaScript files written by someone else, but the result will be visible, especially if your site grows to 10.000 uniques per day and more.

Popularity: 13% [?]

The first step on your way to a very fast website is object size minimization. What files must be minified? What are the best minimization techniques? How object size minimization will affect your visitors’ experience? Read our Website Performance Guide Step 1 to find the answers to all your questions.

What files should you compress? Well, in fact the right answer is  – all the files. First, let’s start with text files. You must remove all the HTML & Javascript comments, line breaks, tabs. If you are going to do it manually, you are crazy – there are lots of automated tools that can do all the cleaning job.

You might have an objection – yes, it’s really painful to edit compressed in such a way files. The easiest and the most effective way is to keep 2 versions of every file, i.e. your local version of your site should be uncompressed, but before publishing it, you compress the files and only then upload to your FTP. Don’t forget to test the uploaded files after you’ve uploaded them – in some cases programs break JavaScript code and this may affect your website’s functionality. There are many tools to compress Javasctipt, CSS and HTML files, I’ll name here only a few:

• JSMin
• JavaScript::Minifier
• Dojo ShrinkSafe aka Rhino
• Dean Edwards Packer
• YUI Compressor

• CSSMin
• Minify
• YUI
• CSS Tidy
• CSS Minifier

After you’ve eliminated all unnecessary characters from your text files (usually you win 25-60%), your next steps are:

1. Compress your graphics

2. Enable GZIP compression

3. Use static compression (this will be discussed in my next post).

Popularity: 17% [?]