Immediate Web Performance Enhancements

Been doing a lot of research lately on web performance and came across the work of the Exceptional Performance Team from Yahoo!. This team is responsible for putting together best practices to achieve high performing web sites.


I've hand picked some of their best practices that are, in my opinion, relatively quick to implement. Below I've listed the tips and a quick summation of each. However I encourage you to take a look at the entire list posted by the performance team. There are a total of 34 best practices spanning 7 categories. I've posted the link at the end of this post.


Without further ado, let's jump right in:


Content


Minimize HTTP Requests

• Combine script and css files -  During your release process, you can use a number of the tools out there to combine, also known as minifying, your scripts and css files.
• Use css sprites - combine images into one file and use the css image styling properties to display the correct image. For instance, if you had a set of images that are essentially rollover images, combine them all into on image so that instead of the browser having to load 10 on/off images, it only needs to load it once in one HTTP request.

Cache AJAX Requests - Expires or Cache-Control headers are your friends. Append a timestamp to your url to ensure so that any subsequent calls to that url will be from the cache. It's important to note that if for some reason the user performs some action that will need to make a request to the url that has already been cached, you need to ensure you update that url's timestamp. 

Split Components Across Domains - Per the HTTP/1.1 spec, browsers download two components in parallel per hostname at a time. As a rule of thumb, you should separate your static content like images/css/scripts/documents from the servers that server up your dynamic content. This means that if you have three domains, one that serves dynamic and two that serves static, then you allow 6 "parallel downloads" at a time per request.


CSS


Put style sheets at the top - This tip is more of a pseudo performance boost because the idea is all about progressive loading.  It's all about instructing the browser to load items such as images and layouts as soon as possible, once they are available. The HTML page should be your loading indicator.


Choose link over @import - In IE, @import behave just like a link at the bottom of the page which impedes progressive loading. Keep it simple...


Javascript 

Make Javascript and CSS external - well it's almost always a good idea. The reason I say almost is that you should be mindful of, as the team puts it, "..the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested.". If there is a page that uses CSS and/or Javascript but that page is only visited 1-2 times upper limit per user session (like the homepage), then it might not make sense to load external files since quantifying the performance boost would be difficult and probably end up being negligible. Better to put it inline so that CSS can be loaded quickly lessening HTTP requests to external files and maximizing progressive loading. Of the course on the opposite side of the spectrum if you have CSS/JS that is being used across different pages and those pages are high trafficed, then you should absolutely place those CSS and Javascript files in external files. 


Remove duplicate scripts - no brainer here...


Put Scripts at the Bottom - Putting scripts in the head of the HTML file blocks parallel downloads. If you can get away with it, put your scripts right before the end of the body tag.


Minify Javascript and CSS - Basically this means to remove spaces characters and comments from your JS and CSS files. You can take this a step further and even combine your minified files into one. As with anything in programming, use your discretion as the need for combining scripts or css into one file might not make sense in every application.


Server


Flush the buffer early - If your page is heavy on the back end processing you might consider flushing the buffer. In doing so you will allow you to begin fetching components like images, css, scripts. The ideal place to put this is right after the head tag, before the body.


Add an Expires or a Cache-Control Header - This is inline with their "Cache AJAX requests" rule. The performance team boils it down to two rules.

1. For static components: implement  the "Never Expire" policy by setting far future Expires headers.
2. For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests.

So there you have it. Some of the few practices from the Yahoo! Performance Team that I believe you could probably do in a reasonable amount of time.


Also if you haven't already take a peek at YSlow that integrates with Firebug for FireFox. Also Smush.it from Yahoo! is a pretty cool tool for optimizing images without losing quality.

Till next time... PEACE.


-Micky

References

Best Practices for Speeding Up Your Web Site - Yahoo! Exceptional Performance Team