Optimize it package for Umbraco

JUNE 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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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

Discussion

Laurie
01
Laurie 22 Jun, 2011 03:54 PM
Hey! Loved your package at CG11, was just sitting down listening to some music, generally letting my mind wander, and I had a little idea. Which would be really damn cool! (maybe!) It would change the core functionality quite a lot, but I think its so simple it would make a lot of sense. How about, adding the ability to create 'CSS Groups', A Group, could contain stylesheets. This would be set on the stylesheet, much like a master page is set. You could sort the contents of a CSS Group, and if you clicked on the Groups node, it would display the minified output. However it keeps all the CSS files in tact, and allows easy editing with full comments, but the CSS Group could be used for the site. - Does this make any sense? A picture would make more sense ;) Lau
scuck
02
scuck 03 Jul, 2012 09:25 AM
<a href="http://fatallisto.com/">fatallisto.com</a> http://fatallisto.com/ - fatallisto.com
replica watches Sip
03
replica watches Sip 31 Jul, 2012 07:31 AM
exact replica watches <a href="http://bigreplicastore.com/">exact replica tag heuer watches</a> breitling for bentley watches spot replicas http://bigreplicastore.com/ - replica swiss made watches vacheron constatin replica watches
vcqjbnhy
04
vcqjbnhy 11 Mar, 2014 11:58 AM
Nothing to fear <a href="http://worldwildlife.org/leaders/edward-p-bass">Edward Bass The Killing Jar Los Angeles, CA</a> qrdcxofxr <a href=http://www.dmagazine.com/publications/d-magazine/1995/november/power-who-runs-fort-worth>Edward Bass Mini\\\\\\\\\\\\\\\'s First Time Los Angeles, CA</a> Los Angeles Edward Bass http://worldwildlife.org/leaders/edward-p-bass with his hair in some.
uzfpzvvp
05
uzfpzvvp 11 Mar, 2014 04:10 PM
<a href="http://www.amazon.com/PATIO-FURNITURE-OUTDOOR-STEWART-CUSHIONS/dp/B00B044KZQ/ref=aag_m_pw_dp?ie=UTF8&m=A230A3ZBH9T67Z">martha stewart patio</a> <a href=http://www.amazon.com/PATIO-FURNITURE-OUTDOOR-STEWART-CUSHIONS/dp/B00B044KZQ/ref=aag_m_pw_dp?ie=UTF8&m=A230A3ZBH9T67Z>martha stewart patio dining sets</a> martha stewart patio set http://www.amazon.com/PATIO-FURNITURE-OUTDOOR-STEWART-CUSHIONS/dp/B00B044KZQ/ref=aag_m_pw_dp?ie=UTF8&m=A230A3ZBH9T67Z
irdnglrl
06
irdnglrl 12 Mar, 2014 03:12 AM
Yet it was a discourse; it <a href="http://www.ripoffreport.com/r/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters/internet/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters-selling-their-souls-fo-310404">boooobs</a> lpmrnobpxb <a href=http://www.ripoffreport.com/r/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters/internet/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters-selling-their-souls-fo-310404>twat</a> fanny http://www.ripoffreport.com/r/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters/internet/Aaron-Parkinson-Liberty-League-Carbon-Copy-Pro-Wealth-Masters-selling-their-souls-fo-310404 of it or gets somebody to do it for him.
hkqxvnmd
07
hkqxvnmd 11 Apr, 2014 12:29 AM
Invariably escaped <a href="http://phatcatz.net">Phat Catz online casino tricks</a> <a href="http://phatcatz.net">Phat Catz online casino eurogrand</a> Phat Catz online casino no deposit http://phatcatz.net comparing one age with another.
pqkijvnm
08
pqkijvnm 17 Apr, 2014 07:47 PM
<a href="http://www.sacbee.com/2014/04/11/6317529/michael-zimmerman-of-prentice.html">michael zimmerman fund</a> <a href=http://www.virtual-strategy.com/2014/04/11/michael-zimmerman-prentice-capital-management-expects-50-online-sales-come-mobile>michael zimmerman prentice</a> prentice capital michael zimmerman http://www.consumerelectronicsnet.com/article/Michael-Zimmerman-of-Prentice-Capital-Management-Expects-50-of-Online-Sales-to-Come-From-Mobile-3183248
izggcvjh
09
izggcvjh 17 Apr, 2014 10:51 PM
<a href="http://www.marketwatch.com/story/consumer-confidence-down-online-spending-up-michael-zimmermans-hedge-fund-sees-mcommerce-as-future-of-retailing-2013-09-24">prentice capital management website</a> <a href=http://www.marketwatch.com/story/michael-zimmerman-of-prentice-capital-management-expects-50-of-online-sales-to-come-from-mobile-2014-04-11>prentice capital zimmerman</a> prentice capital management website http://www.marketwatch.com/story/michael-zimmerman-of-hedge-fund-prentice-capital-on-the-mcommerce-shift-2014-04-04
rksupiom
10
rksupiom 24 Apr, 2014 05:45 AM
Encounter her in new york <a href="http://googledrive.com/host/0Bxa-VWiM3l6sWHFuQXJJYndieXM/">affirmative action</a> <a href=http://googledrive.com/host/0Bxa-VWiM3l6sSzItQVg1TDNHRGc/>Teri Polo</a> Teri Polo http://googledrive.com/host/0Bxa-VWiM3l6sWHFuQXJJYndieXM/ hehad any dim idea of making any references to allusions, he thoughtbetter of it and held his peace, for there was danger in Toms eye.

Your Comments

Used for your gravatar. Not required. Will not be public.
Posting code? Indent it by four spaces to make it look nice. Learn more about Markdown.

Preview

Powered by FunnelWeb 1.0.1.517