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 ?
Simple approach – the larger your file is – whether it is a flash file or an eye candy high resolution image or a HTML/CSS/Javascript file, the longer it takes for the visitor’s browser to access. If it is an image, ask your designer to selectively manipulate or compress the image. A carefully optimized image can often bring down the file size to half its former size.
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
ETag: "1a5a0f1-67ec-479316b377e80"
Accept-Ranges: bytes
Content-Length: 26604
Cache-Control: max-age=2592000, public
Connection: close
Content-Type: image/jpeg
Declare your image’s width and height value in HTML to help the browser to render the image faster.
1b: Optimizing Code:
When it comes to CSS optimization, avoid CSS expressions and combine many files into one. Remove redundant directives and minify the file. Same way combine several Javascripts into one external file and minify it. Make references to CSS and Javascript in the header of the HTML file. If you use Google Page Speed, you can use closure compiler which can minify Javascript – available from here.
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.
If your ASCII content (Javascript and HTML) runs to more than a few tens of kbytes, you should consider Gzipping these components. Saves on bandwidth costs as well as on loading time.
2. Server Side Tweaks to reduce the page load time:
Reduce HTTP requests by combining several components into one. We had mentioned in the previous paragraph how you should combine many Javascript files into one. We also offered a tip to use a longer expiry time for cacheable images in Apache servers.
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.
Use consistency in referencing resources: It is quite a mouthful to just say it. You can save quite a bit of time by adopting consistency in your references. For example, you have a Carousal which needs a longish Javascript, you must make references to it like so: www.domain.com/carousal.js for all pages residing anywhere in your domain or subdomains. Absolute URLs to a consistent reference point shaves off time perceptibly.