Website Tuning – Speed up your web pages
Ever wonder why some sites take forever to load while others appear in a snap? Let alone the associated user experience. It’s just more fun browsing a site that loads fast. And since Google now rates Adsense weight by load times, it makes more sense than ever to ensure that our pages load as fast as possible.
Especially with high performance websites, page load times are of highest concern. Not only user experience is directly affected, but bandwidth and hardware costs are often directly related to it. Yahoo did a marvelous job researching the elements that affect page loads and in response created the utility yslow.
Top Rules to website tuning and reduce page load times
Make fewer HTTP requests
As browsers typically only handle two simultaneous requests per host at a time, reducing the amount of requests per page will have a great impact. Take these four actions to reduce requests.
- CSS sprites
- combine js scripts, css files
- use image maps
- use inline images (not compatible in IE)
Use a CDN (Content Distribution Network)
A good CDN has nodes all over the planet and is able to serve content closes to your users
Add an Expires header
An expires header tells a users browser to cache certain content, so it won’t have to download multiple times, thus saving load time and bandwidth.
Gzip HTML, CSS and JavaScript components
HTML, CSS and JavaScript are plain text content and thus highly compressible. Reducing file size also reduces bandwidth and improves load time.
Move JS and CSS sources to external hosts
Moving content to an external host enables the browser to handle them simultaneously. Remember the two requests per host rule?
Avoid redirects
Redirects is like driving some place, then turn around and driving to another. Waste of time. Avoid it if you can.
Minify JavaScript and CSS
Empty lines and spaces also consume space and bandwidth. It should go hand in hand with compression.
Optimize images and video
Nothing wastes bandwidth more than serving over sized images and video and have the browser downsize them. Not only do they not look as good as if they would in their native size, but the browser has to do wasteful work. Try to serve these types of content in its native size.
Additional items to consider
- Move stylesheet to the top, as IE renders page upon receipt of the stylesheet, yet FF renders immediately
- avoid using @import, use LINK instead
- place scripts at the bottom, as scripts block parallel downloads across hosts, and they block rendering of everything below them
- make AJAX cacheable
- split content domains or host names
- reduce cookie weight
- make static content cookie free
Yslow and Firebug are two terrific tools to research load sequences and pinpoint issues. Use them and follow these rules and your site should be off to the races.
