Optimizing Website For High Performance

If you would like to make your website display more quickly you have come to the right place. This article will explain and guide you through most of techniques required to reduce loading times of your website.

The fact is that an average of 10-20% of the end user response time involves retrieving website's HTML page where the other 80-90% involves downloading of stylesheets, scripts, images, flash files and other types of website components. So what really can we do to reduce that time to a minimum? One of the first steps is to make fewer HTTP requests.

One way to accomplish fewer HTTP requests is to use CSS Sprites. CSS sprites allow you to combine images into one image and using stylesheets offset that one main image to show different parts of that main image. Imagine a scenario where you have a website with hundreds of small icons representing all kinds of things.

The other way would be to combine your scripts and stylesheets. Instead of loading 10 different stylesheets or scripts you could load only one of each. You could accomplish that in variety different ways where some of them would be using htaccess file and other ones using dynamic stylesheets.

If you own or manage a really big portal and have some money to spend, the second step to reduce the loading times of your website would be to use content delivery network (CDN). The basic concept of CDN is that it hosts all of your website's components on a different servers in multiple locations based on proximity to the user, to deliver your content more efficiently. That way your web server only serves the actual HTML page and all other assets such as images, scripts and stylesheets are delivered from close CDN servers.

Third step would be to add an expires header for your stylesheets, scripts, images and static pages. That will make user browser cache those components meaning the next time the same page or asset gets requested, they're used straight from the browsers cache eliminating unnecessary requests. If you are in a situation where you constantly update your scripts or stylesheets you could always implement a dynamic way of updating their filename. eg. (/css/v1/main.css, /css/v2/main.css). That would make sure user's browser would re-download the updated asset on change and use cached version otherwise.
 
Fourth step to lightning fast websites would be to use gzip components. Currently the most popular and free compression method is Gzip. The only components you should be concerned with are stylesheets and scripts. You should not gzip your websites images because they're already compressed. Gzipping your websites components will reduce their download times up to 50%.

Fifth step would be to place your stylesheets at the top. That would enable what its called progressive rendering. On a slower connections the things such as header, navigation page contents and then the footer will appear in sequence one by one until the entire page is loaded. Having a stylesheet placed at the bottom will prevent displaying of those elements until the entire stylesheet is loaded.

Sixth step to website optimization would be to put all script files at the bottom of the page. Any large scripts placed at the top will prevent displaying of the page until they're fully loaded. However you should still keep the scripts that are necessary for proper page functionality at the top because user will start using the page as soon as they see it and you might run into some problems. Another strategy would be to place scripts that are used on other pages at the bottom of the initial page. That way they would be available right away without additional request.

Seventh important step would be to minify your javascript files. The process strictly consists of removing white spaces and comments resulting is smaller file sizes. Three are number of scripts online that could do that job for you.

Combining all of the above techniques will speed up and increase success of your website.

All of the above techniques are just a brief summary of original research by Steve Souders. He describes all of them in more details in his book "High Performance Web Sites".