site performance and yui compressor
April 2, 2008 - 10:41 PM
Most, if not all, websites use both cascading style sheets and javascript. For performance reasons all css and js should be include in external files. For even better performance all css files should be in the <head> section and all js files should be included just before the ending </body> tag.
This blog has two css files, one for the most basic styles and one with more advanced layout and positioning. It also has two js files, jquery and a site specific js. In their original form these files account for about 2.5kB., which isn't very much.
Digg, on the other hand, has something in the area of 10 js files and 4 css files totaling about 250kB. Thats for every single page load. Now both this site and digg use far future expires headers. So ideally you only download these files once, each time they change.
But if you don't visit a site regularly or you have your browser set to empty it's cache when you exit you may end up with a "empty cache" experience. Basically meaning none of the files needed are saved in your local browser cache and need to be downloaded.
In order to minimize the impact of this most sites use a compressor for js files like jsmin. A while ago Yahoo came out with a new tool called YUI Compressor. What makes this tool unique is not only does it give you better js compression than most other tools it also does css minification as well.
What does this mean? About 20% smaller files than jsmin, (10% after compression) and for digg about 50% savings overall. Combine that with gzip support from your browser and your users get considerably faster download times and a better user experience.
It isn't hard to integrate into your site, every time I update the source code of this blog I have a script I run that compresses all the css and js files automatically. If you aren't using YUI Compressor, you should be.
