Optimize it package for UmbracoJUNE 19 2011
"Optimize It" is the name of the package that I entered in the Package Competition at CodeGarden 11. In this post I will go into more details about what it can be used for.
The idea with the package is that you can use it to optimize and check your stylesheets prior to implementing Client Dependency, or you can use it on existing sites (where you might not be able to implement something like Client Dependency) to get some quick performance gains.
The package extends the Css editor, in the Settings section of Umbraco, with 6 buttons. The functionality behind each button is described in the order they appear:
Parsing of stylesheet One of the core functionalities of this package is the stylesheet parser, which is based on the syntax described here and here. Clicking this button will open a dialog with the parsing result. Any syntax errors like missing colons, semicolons and curly brackets will be listed. Aside from syntax errors the parser will also check image references in background and background-images properties and verify that they are present on disc. Parsing your css files is important prior to minification, as the process might result in errors or disrupt the minification due to syntax errors.
Minify stylesheet This feature is kind of an added bonus, because it was already available in the css parser I used. I would always recommend that you use a framework like Client Dependency to minify and combres your JS and CSS files on Umbraco sites. But if you have a site that is already deployed without that type of framework implemented and want a quick performance gain then the built in minifier will be quite useful. Clicking the "Minify stylesheet"-button will generate a new and minified version of your stylesheet with ".min" inserted in the filename. Please note that comments will not be preserved.
Prettify stylesheet This feature is also an added bonus. It will take any minified stylesheet and make it pretty again. Please note the original file will not be overwritten, but a new file with ".pretty" inserted in the filename will be created.
Optimize images in stylesheet Clicking this button will start a threaded process to compress the images referenced within your stylesheet using SmushIt and PunyPNG. Jpg, gif and png files are supported. When the process is finished a text filed called "compres-result.txt" will be created in the css-folder with the results of the compression of each image. It also includes error messages if any errors occured during the process. This is a very useful feature for any site where you want to ensure that the images used in your stylesheet is compressed as much as possible.
Embed images in stylesheet This feature will base64-encode and embed images in your stylesheet. When clicking the button a dialog box will open where you can specify the maximum number of kilobytes an image can be in order for it to be embedded. The default is 32kb as that is what will work with IE8 browsers. Please note that not all browsers supports images embedded in the stylesheet, but a fallback css file will be generated for you, which can be used for something like IE7. So two new css files will be created: one with "-embed" inserted in the filename, which is the same as the original stylesheet but with images embedded. The second file with "-embed-fallback" inserted in the filename will contain your id/class selectors with the original background and background-image image references.
Generate sprite This feature will allow you to automatically generate a sprite from the images in your stylesheet with the correct selectors from your stylesheet. Please note that original file will not be overwritten, so the image references will still be in your background and background-image properties. A new stylesheet with "-sprite" inserted in the filename will be created, which has all of the positions for the sprite. You will have a few options to specify layout type, margin width and margin between images prior to the sprite generation. Automatic layout is currently the best to use, as horizontol will not work in all cases (and im testing why). Also please note that after generating the sprite you will most likely have to work with the styling as it is very rare that the generated sprite will fit into any existing markup/styling without some kind of tweak here and there.
Here is an example of my own site before and after implementing the generated sprite and css: Before sprite implementation and After sprite is implemented. As you can see quite a few images is completly wrong because the original styles does not take account for i.e. a max width and height, which results in other images showing up where they are not supposed to. I could solve this by reworking some of the styling or the html, but the point being that I will have to do some work in order for it to work 100%. Even though you do have to do some work yourself I believe that this feature still adds value, as the sprite is automatically generated for you with all the positions, and all the right selectors. No need to mess around with the layout in Photoshop and try to figure out the positions afterwards.
With regards to the embedding of images I recommend that you read the two articles listed below. Primarily because you should be cautious when embedding images in your stylesheets. Be aware of the size of the stylesheet after the images has been embedded. In my own case I had a stylesheet that was 21kb before and 137kb after embedding images. None of the images I embedded exceeded 10kb, so the size of the css luckily didn't "explode". After minification and gzip compression my stylesheet will become even smaller and I will save around 60 requests for the various background images.
Articles about data URIs (embedded images): CSS Images and Data URIs and A Look at How Browsers Download and Render CSS Background Images.
Get the package on our.umbraco.org