Hello everybody,
in 2008’s last post, I will share some advices to improve your website performance. In the last months, I’ve been working with Onibus Recife and one of our efforts was making the site load speed faster. To achieve an acceptable performance, we basically worked on three aspects:
-
Reducing the number of requests sent/received.
-
Reducing the number of bytes sent/received.
-
Rendering the result as soon as they are avaiable.
To reduce the number of requests changed between the server and the client we used two strategies: combined files and CSS sprites. The first one combines all existing scripts into a single script file, doing the same with CSS styles. So, instead of loading a huge number of .js and .css files, the user will load just one of each extension. You can see a .NET combiner implementation here. CSS sprites are similar: it reduces the number of image requests by combining your background images into a single image. With CSS sprites, you create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call. Each image segment is displayed using CSS background-image and background-position properties.
Later, we reduced the number of bytes sent to the user by minifying Javascript and CSS and using GZIP compression. Minification is the practice of removing unnecessary characters from code to reduce its size. When code is minified all comments and unneeded white space characters are removed. To minify scripts and CSS files we used YUI Compressor. Besides the minification, a good practice is decrease the amount of data transmitted over the network by compressing it. Compression reduces response times by reducing the size of the HTTP response and Gzip is the most popular and effective compression method at this time. A GZIP .NET implementation is found here.
Finally, we worked on displaying the result as soon as they are avaiable. A good advice here is put Stylesheets at the top, which allowed the page to render progressively, and Javascripts at the bottom of the page, avoiding the block of parallel downloads.
There is a lot of other practices to improve your site performance in Yahoo!’s Exceptional Performance including articles and video. However, I explained here just few of them, which my team used and comproved the difference that this things do.
With this post, I conclude the blog activities during this year. I’m very happy to share with my readers all the content that I’ve wrote this period and would like to thank everyone that kept with me until now. Happy New Year to everyone.
See you,
—
Fernando