Tag Archives: yui

Fun with CSS Sprites

Mario sprite from Super Mario Brothers

There's been a lot lately of talk in web development circles about CSS sprites lately. Using them dramatically increases the speed of downloading a webpage with several background images by reducing the amount of HTTP requests the client browser has to make. This is accomplished by consolidating each individual image into a single image. Once consolidated the background-position, height and width CSS properties are tweaked to show only the appropriate part of image. Check out articles from A List Apart and Smashing Magazine for more information and tutorials.

The fun was testing the before and after using YSlow in Firebug. The test subject was a client's website where there were four tabs with different images for three states. The CSS Sprite Generator from Project Fondue can help with the tedious task of making the sprite. The original cluster of transparent pings totaled 6.77 KB which consolidated to 3.83 KB. Combine that with the reduced HTTP requests and that's quite a savings.

Before making the sprite Yslow reports a score of 83. After making the sprite bumped that score up to 88. The total page size was reduced by 43K. This test seems to indicate it'll be worthwhile to make more sprites on this site.

Before

After

 

JavaScript and CSS Minification and Optimization with Visual Studio and YUI Compressor

About a year and a half ago I got very interested in JavaScript optimization. This interest was born after playing with YSlow for Firebug (Firefox). I noticed that my customer’s homepage was requiring my browser to download 2 megabytes of Images, HTML, CSS, and JavaScript. Having gotten my start in the days of modems I was aghast at the bandwidth requirements of this huge site. At the time this customer was receiving millions of hits a day due to a recent influenza outbreak. Do the math, that’s a lot of data.

YSlow recommended that the JavaScript and CSS be minified. I’d see this before with jQuery and other open source JavaScript examples. Minification is essentially a way to remove unnecessary characters and white space from the code with the goal of serving the smallest possible file over the wire to the client browser. The problem is this renders code unreadable to developers. I wondered if there was a way Visual Studio could handle this during deployment. Turns out that there is a free add-in for Visual Studio from Microsoft, Visual Studio Web Deployment Projects, which provides more advanced compilation options. The next step was to find code that Web Deployment Projects could use to perform the minification.

The “Y” in YSlow stands first for Yahoo so I went to see what they had to offer. They have open source code know as the YUI Compressor Library available for download that performs JavaScript and CSS minification. The problem for me was the code I needed was written in Java which is not simple to integrate into a Visual Studio build process. Fortunately someone had ported it to C# and thrown it up on CodePlex. It’s currently stable at version 1.4.1.0 and based on version 2.4.2 of the YUI Compressor.

The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.

The customer mentioned at the beginning of this post was able to reduce the size of their JavaScript and CSS by almost 50% (1MB per unique request). This is a simple way to help your servers handle their own pandemic flu outbreak, or “slashdotting”, as efficiently as possible. Your sites will also be much more snappy as browsers are not having to parse unnecessary whitespace, comments, etc. It’s the closest you’ll get to compiling JavaScript and CSS, all for free.

Resources

Example of JavaScript Minification

Before
Javascript before minification

After
Javascript after minification

Example of CSS Minification

Before
CSS before minification

After
CSS after minification