Wednesday, November 17, 2010

Website Performance Tuning Checklist

TODO: Performance Tuning Your Website



Great Website Performance
Every website i make or participate into at some stage will go to the production environment. suddenly, many developers got shocked when they see the very slow performance of their sites after they upload it to the production environment.

Here i will share some of the ideas and techniques that i used to speed up things in my recent projects. knowing that this is not a complete list of everything you will need to do on your site, but i will help you greatly as it did with me.

First of all, i recommend that you use a very nice online tool that i used which gives you full report about your site. it is WebPageTest, which is a tool that was originally developed by AOL for use internally and was open-sourced in 2008. The online version is an industry collaboration with various companies providing the testing infrastructure for testing your site from across the globe. using this tool will allow you to indicate the parts that really need your attention, or those the might need enhancements.

I also, use YSlow, and Google Page Speed during development. i am pretty sure that if you pay your attention to recommendations of such tools you will be very happy and so your boss :)

The following are the checklist that i actually perform and it actually quite simple and it should not take more than couple of days to apply if your site is well organized and well maintained.

Performance Checklist
- If you are using jQuery Custom UI Library, make sure you only got the package includes only what you need, if you don't have dragging features inside your site, why you include it. personally i gained about 125k only by downloading only what i need in the Custom UI Library.

- Optimize the JavaScript code inside your pages. try to avoid big loops especially those containing string manipulations. if you can do something on the server side then do it on the server side, try to minimize the processing time that a client browser will need to complete what your page wants to achieve.

- Only include the CSS and JS files that you need. during development, many developers tend to test plug-ins and libraries for testing purposes so make sure you remove them. also, make sure that you include the JS library exactly inside the pages that will use them, no need to include all the JS Code inside a contact us page for example.

- Try merge the JS files into the smallest number possible or even 1 JS file. and the same applies to the CSS files too. Having too many requests will slow the response time of your page and will greatly affect those users with lower speed internet connections. I use JAWR to merge the JS and CSS files on the fly without the need to merge them manually, you will like it.

- Try to minify your JS code, not only truncate the spaces and line breaks. but also, changing variable names to shorter ones. personally i like Google Closure and it has 3 levels of compression that i am sure you will find efficient for your needs.

- Try to isolate the JS code inside your HTML pages inside a JS file, so it can be cached by the browsers and of course enable compression to them as indicated above.

- Always serve your content gzipped, this is actually a performance simple step that could change your life. you can gain up to 50% or even more boost to your web site performance by gzipping the css, images, and js files.

- Try not to use multiple frameworks unless it is a must which i doubt really. using for example both jQuery and Prototype inside the same application is just a big waste of your time, bandwidth and investment. 

- Always optimize your images, you can view optimized versions of your images from your page speed plug-in. i gained about 25% reduction of the total bytes downloaded only by this technique.

- Use CSS Sprites to reduce the amount of requests the page will make to load the images. 2 of the nice utilities i use are Sprite Me and CSS Sprite Generator.

- Make sure you specify expiration headers for your JS, CSS, Images, and any other resource you find it will not be updated too soon. may be a week or more is a good idea.

That's it, i wish you guys can give me your thoughts and ideas or comments as the optimization has no limits.

No comments:

Post a Comment