Friday, May 25, 2007

Optimize Your Website For Performance

Performance can affect the number of visitors come to your site. The faster the site load, the better experience the visitors will get and the chances of them coming back will also be higher.

Network latency, congestion, packet drops... are already reducing your application performance. If you, the developer, can do anything to speed up content delivery, by all means, you should do it.

Unfortunately, most developers often neglect to pay attention to this are since it's not something they can really visually see and fix because there is no error that will popup and say "Hey, I am slow... fix me..." or something like that.

Here are a few tips that any developer can use to help speed up their web pages:

Put CSS code at the top of the page: if you put CSS at the top of the page, the browser will read it first. When the browser renders a web page, it doesn't have to search up and down looking for the style rules.

Move JavaScript code down to the bottom of the page: JavaScript’s are mostly run on the client side AFTER the page has been rendered. Moving them to the bottom of the page will allow the browser to render other markup tags first and present the UI to the client faster.

Compress java scripts & remove white space: The browser doesn't care if you name your function with a single character nor does it care if the name is 50 characters as long as they are valid. White spaces might make your code look good but will not help when it comes to speed. The less data your server has to spit out the faster your page will be delivered over the wire.

Remove duplicate and/or unused scripts: If it's not being used, remove it. If anything, it will cause more load on your network and create more confusion having it there when it comes time to troubleshoot some problems.

Do not mix Javascripts and HTML markups: Sometimes, you will need to use Javascripts to produce HTML markups. But try to reduce this to a minimum and let the browser finish one thing before it starts the next one (ie: complete HTML render before executing javascript...)

Move CSS & Javascripts out of HTML markups: Don't make the browser go back and forth between HTML markups and javascripts when it renders the page as there is a performance cost to this.

Add expires header: The browser save the pages onto the hard disk so that it can load the same site faster next time around. If there isn't a need for this, add expires header to it doesn't write the pages to disk.

Disable viewstates: ASP.net pages have viewstate enabled by default which adds a bunch of encrypted code to the page. If viewstate is not required, disable it and it will improve the page performance.
These tips will not significantly improve the performance of your web site as that will also depend upon how you compose your application but it will definitely improve the delivery of the page to the visitors. This is especially true if you have high traffic on your site.

If you get the opportunity, you should examine the HTML output for well known sites like Yahoo or Google and see how they optimize their site for performance. Chances are you will see these tips in action.

2 comments:

Anonymous said...

Just a small typo change - in several places you say "the browse" instead of "the browser". Good article

Brian Dao said...

Good catch, Geof. I've updated them. Thanks!