Search Engine Giant Google has recently indicated that it may consider the speed of your website as one of the ranking factors in future. As a Webmaster, you know this all along – a faster loading page added to the positive feel. Ironically most designers create elaborate visually appealing eye candies to enhance the user appeal without realizing that the extra loading time actually detracts from the positive note.
This blog will take a look at the techniques and best practices recommended by Google through its Page Speed http://code.google.com/speed/ and Yahoo’s Best Practices for Speeding Up Your Website – http://developer.yahoo.com/performance/rules.html
If you check out these recommendations, you will realize that some of the best practices are primarily intended for the corporate websites. As usual we try to distill the collective wisdom into a condensed format useful for the average Joe Webmaster. The tips you will find here could be used to speed up the access time of your pages without having to break your bank or the need to hire a Rocket Scientist to re code.
The summary of optimizing your pages and reducing the page load time:
1. Reduce file size:
1a. Start with your images: Optimize your images:
Do you know that our TargetWoman – which is primarily a content rich site still accounts for just a little over 54 % of its bandwidth consumption to image traffic ?
For static content optimize browser/proxy caching by setting longer expiration time. If you are in an Apache server the following snippet of code in your .htaccess can help caching your image files:
< FilesMatch "\.(jpg|jpeg|png|gif|swf)$" > Header set Cache-Control "max-age=2592000, public" < /FilesMatch >
The max-age figure allows caching upto 30 days. If you check your server’s header information, it will return the following (example):
HTTP/1.1 200 OK
Date: Mon, 30 Nov 2009 11:17:00 GMT
Server: Apache/2.2.14 (Unix)
Last-Modified: Wed, 25 Nov 2009 12:44:26 GMT
Cache-Control: max-age=2592000, public
Declare your image’s width and height value in HTML to help the browser to render the image faster.
1b: Optimizing Code:
On the other you can use YUI compressor from here to minify too.
Another feature of Google Page Speed is its ability to compress images (if you reference to a page with images) and save them to a configurable directory locally. You might find this a time saver. This alone is a reason to download the Page Speed for your Firefox browser. Head to this link for using Page Speed .
You would need Firebug Addon to your Firefox browser before you can use Page Speed.
2. Server Side Tweaks to reduce the page load time:
Avoid redirections as they add to the repeat traffic between the server and a browser.
Weed out 404 errors from your pages. If you use a clever 404 error trapping script to deliver an intuitive alternative to the visitor like this site, it is all the more reason to be wary of 404 errors. A careless reference to a non-existent image can fire up the engine which services the error trapping call whilst the browser waits for the continuation of other components.
Reduce DNS lookups – every time a browser encounters a new domain name, it can take up to 20-120 milliseconds to look up the IP address. This latency can be minimized if you use the IP address directly. Split components across domains to enhance parallel download.
Cookies: Serve static contents from a cookie less domain. Domains which serve cookies take up additional back and forth traffic which is not required for serving static contents. Whilst at this, reduce the size of the cookie set by your server.