Minify the CSS to improve scores

[sitefinitysteve]

Can telerik perhaps start to think about Minifying their CSS, or at least providing a property through the stylesheetmanager to ENABLE downloading the minified version(s)?  Once the versions are up on your CDN, they're pretty set in stone right...?  I can understand the PITA issues with doing it inside of the Web.UI assembly...but the CDN versions should be static up there tied to their version right?

Take a peek at the webmail demo for example (my favorite btw)

You can shave off 36k or 19% of the size of the downloaded CSS with no side effects.  If you use Google PageSpeed It's just removing the whitespace and makeing each style be on it's own line....shouldn't affect IE6 (which I assume is why you're not doing it?).  We've certainly never had any style side effects with a heavier dynamic minifier on the CSS (compresses the entire thing to 1 line on the fly ).

[Kamen Bundev]

Hi Steve,

Unfortunately it is not that easy to just minify the CSS files since we are using some specific CSS hacks to target older browsers and a minify will break them. Additionally CSS minification will have almost no impact on client downloads when compression and caching are in place (as they are on our CDN by default), hence we are not planning to use CSS minification.

Best wishes,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[sitefinitysteve]

I assume you mean the * html, *+html, etc hacks right?...google page speed should generate the minified version instantly without breaking any of those rules...it just removes whitespace...IE6 should respect that fine.

So take the RadCombo for example...here's what it could be without breaking any of the hacks....

.RadComboBox *{margin:0;padding:0;}
.RadComboBox, .RadComboBox .rcbInput, .RadComboBoxDropDown{text-align:left;}
.RadComboBox_rtl, .RadComboBox_rtl .rcbInput, .RadComboBoxDropDown_rtl{text-align:right;}
.RadComboBox{vertical-align:middle;display:-moz-inline-stack;display:inline-block;}
*+html .RadComboBox{display:inline;zoom:1;}
* html .RadComboBox{display:inline;zoom:1;vertical-align:top;}
.RadComboBox table{border:0;border-collapse:collapse;}
.RadComboBox table td.rcbInputCell{width:100%;height:20px;line-height:20px;vertical-align:middle;padding:0;border:0;}
* html .RadComboBox td.rcbInputCell{height:22px;line-height:22px;}
.RadComboBox .rcbInputCellLeft, .RadComboBox .rcbInputCellRight, .RadComboBox .rcbArrowCellLeft, .RadComboBox .rcbArrowCellRight{background-color:transparent;background-repeat:no-repeat;}
.RadComboBox .rcbInputCell .rcbInput{width:100%;background:transparent;border:0;vertical-align:middle;padding:2px 0 1px;outline:0;}
* html .RadComboBox .rcbInputCell .rcbInput{height:18px;padding:2px 0 0;}
.RadComboBox .rcbInputCell .rcbEmptyMessage{font-style:italic;}
.RadComboBox .rcbReadOnly .rcbInput{cursor:default;}
.RadComboBox table td.rcbInputCell, .RadComboBox .rcbInputCell .rcbInput{padding-left:2px;}
.RadComboBox_rtl table td.rcbInputCell, .RadComboBox_rtl .rcbInputCell .rcbInput{padding-right:2px;padding-left:0;}
.RadComboBox table td.rcbArrowCell{width:18px;padding:0;border:0;}
.RadComboBox .rcbArrowCell a{position:relative;outline:0;overflow:hidden;display:block;width:18px;height:22px;cursor:default;text-decoration:none;text-indent:9999px;font-size:0;line-height:1px;}
div.RadComboBox td.rcbArrowCellHidden, div.RadComboBox .rcbArrowCellHidden a{width:3px;}
.RadComboBox .rcbReadOnly td.rcbArrowCell{width:16px;}
.RadComboBox .rcbReadOnly td.rcbArrowCell a{width:16px;}
.RadComboBox .rcbReadOnly td.rcbArrowCellHidden, .RadComboBox .rcbReadOnly td.rcbArrowCellHidden a{width:3px;}
.rcbSlide{position:absolute;overflow:hidden;display:none;_height:1px;float:left;}
.RadComboBoxDropDown .rcbHeader, .RadComboBoxDropDown .rcbFooter, .RadComboBoxDropDown .rcbMoreResults, .RadComboBoxDropDown .rcbMoreResults a{background-repeat:no-repeat;}
.RadComboBoxDropDown{position:absolute;cursor:default;font-size:11px;border-width:1px;border-style:solid;}
.RadComboBoxDropDown_rtl{text-align:right;direction:rtl;}
.RadComboBoxDropDown .rcbScroll{overflow:auto;position:relative;}
.RadComboBoxDropDown .rcbList{list-style:none outside;position:relative;margin:0;padding:0;}
.RadComboBoxDropDown .rcbHeader, .RadComboBoxDropDown .rcbFooter{background-repeat:repeat-x;padding:5px 7px 4px;}
.RadComboBoxDropDown .rcbHeader{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:1px;}
.RadComboBoxDropDown .rcbFooter{border-top-width:1px;border-top-style:solid;margin-top:1px;}
.RadComboBoxDropDown .rcbNoWrap .rcbItem, .RadComboBoxDropDown .rcbNoWrap .rcbHovered, .RadComboBoxDropDown .rcbNoWrap .rcbDisabled, .RadComboBoxDropDown .rcbNoWrap .rcbLoading{white-space:nowrap;}
.RadComboBoxDropDown .rcbItem, .RadComboBoxDropDown .rcbHovered, .RadComboBoxDropDown .rcbDisabled, .RadComboBoxDropDown .rcbLoading{padding:2px 6px;margin:0 1px;}
html>body .RadComboBoxDropDown .rcbItem, html>body .RadComboBoxDropDown .rcbHovered, html>body .RadComboBoxDropDown .rcbDisabled, html>body .RadComboBoxDropDown .rcbLoading{min-height:13px;}
*+html .RadComboBoxDropDown .rcbItem, *+html .RadComboBoxDropDown .rcbHovered, *+html .RadComboBoxDropDown .rcbDisabled, *+html .RadComboBoxDropDown .rcbLoading{height:auto;}
.RadComboBoxDropDown_rtl .rcbItem, .RadComboBoxDropDown_rtl .rcbHovered, .RadComboBoxDropDown_rtl .rcbDisabled, .RadComboBoxDropDown_rtl .rcbLoading{padding:2px 6px;}
.RadComboBoxDropDown .rcbImage{vertical-align:middle;margin:0 6px 2px 0;}
.RadComboBoxDropDown_rtl .rcbImage{margin:0 0 2px 6px;}
.RadComboBoxDropDown .rcbHovered{background-repeat:repeat-x;}
.RadComboBoxDropDown em{font-style:normal;font-weight:bold;}
*+html div.RadComboBoxDropDown .rcbList{zoom:1;}
* html div.RadComboBoxDropDown .rcbItem, * html div.RadComboBoxDropDown .rcbHovered{zoom:1;}
.RadComboBox .rcbDisabled .rcbInputCell .rcbInput, .RadComboBoxDropDown .rcbDisabled{cursor:default;}
.RadComboBoxDropDown .rcbLoading{text-align:center;}
.RadComboBoxDropDown .rcbMoreResults{clear:both;border-top-width:1px;border-top-style:solid;background-repeat:repeat-x;position:relative;padding:0 6px 0;text-align:center;margin-top:1px;}
.RadComboBoxDropDown .rcbMoreResults a{display:inline-block;width:15px;height:9px;text-indent:-9999px;overflow:hidden;text-decoration:none;cursor:pointer;vertical-align:middle;}
* html .RadComboBoxDropDown .rcbMoreResults a{font-size:0;line-height:0;text-indent:0;}
*+html .RadComboBoxDropDown .rcbMoreResults a{font-size:0;line-height:0;text-indent:0;}
.RadComboBoxDropDown .rcbMoreResults span{vertical-align:middle;height:19px;line-height:19px;display:inline-block;}
.RadComboBoxDropDown .rcbSeparatedList .rcbItem, .RadComboBoxDropDown .rcbSeparatedList .rcbHovered, .RadComboBoxDropDown .rcbSeparatedList .rcbDisabled, .RadComboBoxDropDown .rcbSeparatedList .rcbLoading{padding-left:12px;}
.RadComboBoxDropDown .rcbSeparatedList .rcbSeparator{padding-left:6px;}
.RadComboBoxWithLabel .rcbLabel{vertical-align:top;padding-right:10px;line-height:22px;zoom:1;}
.RadComboBox_rtl .rcbLabel{text-align:right;padding:0 0 0 10px;}
*+html .RadComboBox_rtl .rcbLabel{margin-right:5px;}
* html .RadComboBox_rtl .rcbLabel{margin-right:5px;}
.RadComboBoxWithLabel table{vertical-align:top;float:none;display:inline-block;zoom:1;}
*+html .RadComboBoxWithLabel table{display:inline;margin-right:5px;}
* html .RadComboBoxWithLabel table{display:inline;margin-right:5px;}
.RadComboBoxWithLabel{white-space:nowrap;zoom:normal;}
@media screen and (min-width:550px){.RadComboBoxDropDown_rtl .rcbItem, .RadComboBoxDropDown_rtl .rcbHovered, .RadComboBoxDropDown_rtl .rcbDisabled, .RadComboBoxDropDown_rtl .rcbLoading{padding:2px 6px 2px 19px;}
}

But here's what you send over the CDN

/* RadComboBox base skin */

/*global*/

.RadComboBox *
{
    margin: 0;
    padding: 0;
}

.RadComboBox,
.RadComboBox .rcbInput,
.RadComboBoxDropDown
{
    text-align: left;
}

.RadComboBox_rtl,
.RadComboBox_rtl .rcbInput,
.RadComboBoxDropDown_rtl
{
    text-align: right;
}

/* combobox */

.RadComboBox
{
    vertical-align: middle;
    display: -moz-inline-stack;
    display: inline-block;
}

*+html .RadComboBox
{
    display: inline;
    zoom: 1;
}

* html .RadComboBox
{
    display: inline;
    zoom: 1;
    vertical-align: top;
}

.RadComboBox table
{
    border: 0;
    border-collapse: collapse;
}

.RadComboBox table td.rcbInputCell
{
    width: 100%;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    padding: 0;
    border: 0;
}

* html .RadComboBox td.rcbInputCell
{
    height /**/: 22px;
    line-height /**/: 22px;
}

/* combobox */

.RadComboBox .rcbInputCellLeft,
.RadComboBox .rcbInputCellRight,
.RadComboBox .rcbArrowCellLeft,
.RadComboBox .rcbArrowCellRight
{
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadComboBox .rcbInputCell .rcbInput
{
    width: 100%;
    background: transparent;
    border: 0;
    vertical-align: middle;
    padding: 2px 0 1px;
    outline: 0;
}

* html .RadComboBox .rcbInputCell .rcbInput
{
    height /**/: 18px;
    padding /**/: 2px 0 0; /* This should fix the ajax introduced height in IE6 */
}

.RadComboBox .rcbInputCell .rcbEmptyMessage
{
    font-style: italic;
}

.RadComboBox .rcbReadOnly .rcbInput
{
    cursor: default;
}

.RadComboBox table td.rcbInputCell,
.RadComboBox .rcbInputCell .rcbInput
{
    padding-left: 2px;
}

.RadComboBox_rtl table td.rcbInputCell,
.RadComboBox_rtl .rcbInputCell .rcbInput
{
    padding-right: 2px;
    padding-left: 0;
}

.RadComboBox table td.rcbArrowCell
{
    width: 18px;
    padding: 0;
    border: 0;
}

.RadComboBox .rcbArrowCell a
{
    position: relative;
    outline: 0;
    overflow: hidden;
    display: block;
    width: 18px;
    height: 22px;
    cursor: default;
    text-decoration: none;
    text-indent: 9999px;
    font-size: 0;
    line-height: 1px;
}

div.RadComboBox td.rcbArrowCellHidden,
div.RadComboBox .rcbArrowCellHidden a
{
    width: 3px;
}

/* Read-only styles */

.RadComboBox .rcbReadOnly td.rcbArrowCell { width: 16px; }
.RadComboBox .rcbReadOnly td.rcbArrowCell a { width: 16px; }

.RadComboBox .rcbReadOnly td.rcbArrowCellHidden,
.RadComboBox .rcbReadOnly td.rcbArrowCellHidden a { width: 3px; }

/* dropdown */

.rcbSlide
{
    position: absolute;
    overflow: hidden;
    display: none;
    _height: 1px;
    float: left;
}

.RadComboBoxDropDown .rcbHeader,
.RadComboBoxDropDown .rcbFooter,
.RadComboBoxDropDown .rcbMoreResults,
.RadComboBoxDropDown .rcbMoreResults a
{
    background-repeat: no-repeat;
}

.RadComboBoxDropDown
{
    position: absolute;
    cursor: default;
    font-size: 11px;
    border-width: 1px;
    border-style: solid;
}

.RadComboBoxDropDown_rtl
{
    text-align: right;
    direction: rtl;
}

.RadComboBoxDropDown .rcbScroll
{
    overflow: auto;
    position: relative;
}

.RadComboBoxDropDown .rcbList
{
    list-style: none outside;
    position: relative;
    margin: 0;
    padding: 0;
}

.RadComboBoxDropDown .rcbHeader,
.RadComboBoxDropDown .rcbFooter
{
    background-repeat: repeat-x;
    padding: 5px 7px 4px;
}

.RadComboBoxDropDown .rcbHeader
{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 1px;
}

.RadComboBoxDropDown .rcbFooter
{
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: 1px;
}

.RadComboBoxDropDown .rcbNoWrap .rcbItem,
.RadComboBoxDropDown .rcbNoWrap .rcbHovered,
.RadComboBoxDropDown .rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown .rcbNoWrap .rcbLoading
{
    white-space: nowrap;
}

.RadComboBoxDropDown .rcbItem,
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbDisabled,
.RadComboBoxDropDown .rcbLoading
{
    padding: 2px 6px;
    margin: 0 1px;
}

html>/**/body .RadComboBoxDropDown .rcbItem,
html>/**/body .RadComboBoxDropDown .rcbHovered,
html>/**/body .RadComboBoxDropDown .rcbDisabled,
html>/**/body .RadComboBoxDropDown .rcbLoading
{
    min-height: 13px;
}

*+html .RadComboBoxDropDown .rcbItem,
*+html .RadComboBoxDropDown .rcbHovered,
*+html .RadComboBoxDropDown .rcbDisabled,
*+html .RadComboBoxDropDown .rcbLoading
{
    height: auto;
}

.RadComboBoxDropDown_rtl .rcbItem,
.RadComboBoxDropDown_rtl .rcbHovered,
.RadComboBoxDropDown_rtl .rcbDisabled,
.RadComboBoxDropDown_rtl .rcbLoading
{
    padding: 2px 6px;
}

.RadComboBoxDropDown .rcbImage
{
    vertical-align: middle;
    margin: 0 6px 2px 0;
}

.RadComboBoxDropDown_rtl .rcbImage
{
    margin: 0 0 2px 6px;
}

.RadComboBoxDropDown .rcbHovered
{
    background-repeat: repeat-x;
}

.RadComboBoxDropDown em
{
    font-style: normal;
    font-weight: bold;
}

*+html div.RadComboBoxDropDown .rcbList { zoom: 1; } /* IE7 item width fix */
* html div.RadComboBoxDropDown .rcbItem,
* html div.RadComboBoxDropDown .rcbHovered { zoom: 1; } /* IE6 item width fix */

.RadComboBox .rcbDisabled .rcbInputCell .rcbInput,
.RadComboBoxDropDown .rcbDisabled
{
    cursor: default;
}

.RadComboBoxDropDown .rcbLoading
{
    text-align: center;
}

.RadComboBoxDropDown .rcbMoreResults
{
    clear: both;
    border-top-width: 1px;
    border-top-style: solid;
    background-repeat: repeat-x;
    position: relative;
    padding: 0 6px 0;
    text-align: center;
    margin-top: 1px;
}

.RadComboBoxDropDown .rcbMoreResults a
{
    display: inline-block;
    width: 15px;
    height: 9px;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
}

* html .RadComboBoxDropDown .rcbMoreResults a
{
    font-size: 0;
    line-height: 0;
    text-indent: 0;
}

*+html .RadComboBoxDropDown .rcbMoreResults a
{
    font-size: 0;
    line-height: 0;
    text-indent: 0;
}

.RadComboBoxDropDown .rcbMoreResults span
{
    vertical-align: middle;
    height: 19px;
    line-height: 19px;
    display: inline-block;
}

.RadComboBoxDropDown .rcbSeparatedList .rcbItem,
.RadComboBoxDropDown .rcbSeparatedList .rcbHovered,
.RadComboBoxDropDown .rcbSeparatedList .rcbDisabled,
.RadComboBoxDropDown .rcbSeparatedList .rcbLoading
{
    padding-left: 12px;
}

.RadComboBoxDropDown .rcbSeparatedList .rcbSeparator
{
    padding-left: 6px;
}

/*<ComboBox with Label>*/

.RadComboBoxWithLabel .rcbLabel
{
    vertical-align: top;
    padding-right: 10px;
    line-height: 22px;
    zoom: 1;
}

.RadComboBox_rtl .rcbLabel
{
    text-align: right;
    padding: 0 0 0 10px;
}
*+html .RadComboBox_rtl .rcbLabel { margin-right: 5px; }
* html .RadComboBox_rtl .rcbLabel { margin-right: 5px; }

.RadComboBoxWithLabel table
{
    vertical-align: top;
    float: none;
    display: inline-block;
    zoom: 1;
}
*+html .RadComboBoxWithLabel table { display: inline; margin-right: 5px; }
* html .RadComboBoxWithLabel table { display: inline; margin-right: 5px; }

.RadComboBoxWithLabel
{
    white-space: nowrap;
    zoom: normal;
}

/*</ComboBox with Label>*/

/*hacks*/

/*Opera start*/
@media screen and (min-width: 550px)
{
    .RadComboBoxDropDown_rtl .rcbItem,
    .RadComboBoxDropDown_rtl .rcbHovered,
    .RadComboBoxDropDown_rtl .rcbDisabled,
    .RadComboBoxDropDown_rtl .rcbLoading
    {
        padding: 2px 6px 2px 19px;
    }
} /*Opera end*/

So that's an 18% reduction in size which isn't there for no apparent reason and then multiply it by each new RadControl on the page...you're taxing us for no reason....like you guys are sending down comments with the css.  These are base stylesheets...css we can't change which we're being taxed with.

I assume Telerik also pays for bandwidth for this CDN...smaller files = less money spent.

In the UN minified version you even do it on some lines (like this)

*+html .RadComboBox_rtl .rcbLabel { margin-right: 5px; }
* html .RadComboBox_rtl .rcbLabel { margin-right: 5px; }

Just because they're cached doesn't mean that they don't have to be initially downloaded...so I should still worry about providing a 400k Css file even though it'll only happen initially...

Heres a a couple references on why, use google for the hundreds of thousands of others (not that it's a new idea...)
Ref1
Ref2

So I can understand it's easier for you guys to do it this way...but with each new feature the suite gets larger and larger...

[Kamen Bundev]

Hi Steve,

We are also using the Quirksmode hack from time to time:
* html .RadScheduler .rsContent
{
    width /**/: 100%;
}

and the IE8 hack rather often (since IE8 input elements rendering almost didn't change from earlier versions and the hasLayout bug is still there in lesser proportions, but the other hacks do not work anymore):
.RadSiteMap .rsmItem
{
    border-right /*\**/: 1px solid transparent\9; /* Triggers hasLayout in IE8 instead of zoom */
}

There are several of these hacks in the RadComboBox base stylesheet that you've compressed as an example, you can check what happened to them. Unfortunately there's no reliable way to remove all comments without touching these hacks unless of course we specifically are checking for them. We discussed CSS compression on several occasions, but currently the effort seems to be bigger than the actual gain, especially if GZIP compression is on, which is usually the case.

Regards,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[sitefinitysteve]

Ah yes, good eye, that appears to be a bug in PageSpeeds minifier :)  I have reported it...hope it gets fixed.

But GZip != Minification...and it sure doesn't come close to GZip+Minification
http://stackoverflow.com/questions/807119/gzip-versus-minify
Gzip will sill have to store the whitespace so it can restore it later

Again, we're talking about the problem compounding itself with multiple RadControls on a page...not a single css file necessarily.

So I realize it's a big pain to put the hacks BACK in....so assuming that, if such a minifier exists that will maintain the Hacks you've implemented, would you THEN consider providing minifed versions on the CDN instead?

[sitefinitysteve]

So I googled it and came up with one that does a better job, and preserves the /**/ hacks

.RadComboBox *{margin:0;padding:0}.RadComboBox,.RadComboBox .rcbInput,.RadComboBoxDropDown{text-align:left}.RadComboBox_rtl,.RadComboBox_rtl .rcbInput,.RadComboBoxDropDown_rtl{text-align:right}.RadComboBox{vertical-align:middle; display:-moz-inline-stack; display:inline-block}*+html .RadComboBox { display:inline; zoom:1}* html .RadComboBox { display:inline; zoom:1;vertical-align:top}.RadComboBox table{border:0;border-collapse:collapse}.RadComboBox table td.rcbInputCell{width:100%;height:20px;line-height:20px;vertical-align:middle;padding:0;border:0}* html .RadComboBox td.rcbInputCell{height /**/:22px;line-height /**/:22px}.RadComboBox .rcbInputCellLeft,.RadComboBox .rcbInputCellRight,.RadComboBox .rcbArrowCellLeft,.RadComboBox .rcbArrowCellRight{background-color:transparent;background-repeat:no-repeat}.RadComboBox .rcbInputCell .rcbInput{width:100%;background:transparent;border:0;vertical-align:middle;padding:2px 0 1px;outline:0}* html .RadComboBox .rcbInputCell .rcbInput{height /**/:18px;padding /**/:2px 0 0}.RadComboBox .rcbInputCell .rcbEmptyMessage{font-style:italic}.RadComboBox .rcbReadOnly .rcbInput{cursor:default}.RadComboBox table td.rcbInputCell,.RadComboBox .rcbInputCell .rcbInput{padding-left:2px}.RadComboBox_rtl table td.rcbInputCell,.RadComboBox_rtl .rcbInputCell .rcbInput{padding-right:2px;padding-left:0}.RadComboBox table td.rcbArrowCell{width:18px;padding:0;border:0}.RadComboBox .rcbArrowCell a{position:relative;outline:0;overflow:hidden;display:block;width:18px;height:22px; cursor:default;text-decoration:none;text-indent:9999px;font-size:0;line-height:1px}div.RadComboBox td.rcbArrowCellHidden,div.RadComboBox .rcbArrowCellHidden a{width:3px}.RadComboBox .rcbReadOnly td.rcbArrowCell{width:16px}.RadComboBox .rcbReadOnly td.rcbArrowCell a{width:16px}.RadComboBox .rcbReadOnly td.rcbArrowCellHidden,.RadComboBox .rcbReadOnly td.rcbArrowCellHidden a{width:3px}.rcbSlide{position:absolute;overflow:hidden;display:none;_height:1px;float:left}.RadComboBoxDropDown .rcbHeader,.RadComboBoxDropDown .rcbFooter,.RadComboBoxDropDown .rcbMoreResults,.RadComboBoxDropDown .rcbMoreResults a{background-repeat:no-repeat}.RadComboBoxDropDown{position:absolute;cursor:default;font-size:11px;border-width:1px;border-style:solid}.RadComboBoxDropDown_rtl{text-align:right;direction:rtl}.RadComboBoxDropDown .rcbScroll{overflow:auto;position:relative}.RadComboBoxDropDown .rcbList{list-style:none outside;position:relative;margin:0;padding:0}.RadComboBoxDropDown .rcbHeader,.RadComboBoxDropDown .rcbFooter{background-repeat:repeat-x;padding:5px 7px 4px}.RadComboBoxDropDown .rcbHeader{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:1px}.RadComboBoxDropDown .rcbFooter{border-top-width:1px;border-top-style:solid;margin-top:1px}.RadComboBoxDropDown .rcbNoWrap .rcbItem,.RadComboBoxDropDown .rcbNoWrap .rcbHovered,.RadComboBoxDropDown .rcbNoWrap .rcbDisabled,.RadComboBoxDropDown .rcbNoWrap .rcbLoading{white-space:nowrap}.RadComboBoxDropDown .rcbItem,.RadComboBoxDropDown .rcbHovered,.RadComboBoxDropDown .rcbDisabled,.RadComboBoxDropDown .rcbLoading{padding:2px 6px;margin:0 1px}html>/**/body .RadComboBoxDropDown .rcbItem,html>/**/body .RadComboBoxDropDown .rcbHovered,html>/**/body .RadComboBoxDropDown .rcbDisabled,html>/**/body .RadComboBoxDropDown .rcbLoading{min-height:13px}*+html .RadComboBoxDropDown .rcbItem,*+html .RadComboBoxDropDown .rcbHovered,*+html .RadComboBoxDropDown .rcbDisabled,*+html .RadComboBoxDropDown .rcbLoading{height:auto}.RadComboBoxDropDown_rtl .rcbItem,.RadComboBoxDropDown_rtl .rcbHovered,.RadComboBoxDropDown_rtl .rcbDisabled,.RadComboBoxDropDown_rtl .rcbLoading{padding:2px 6px}.RadComboBoxDropDown .rcbImage{vertical-align:middle;margin:0 6px 2px 0}.RadComboBoxDropDown_rtl .rcbImage{margin:0 0 2px 6px}.RadComboBoxDropDown .rcbHovered{background-repeat:repeat-x}.RadComboBoxDropDown em{font-style:normal;font-weight:bold}*+html div.RadComboBoxDropDown .rcbList{zoom:1}* html div.RadComboBoxDropDown .rcbItem,* html div.RadComboBoxDropDown .rcbHovered{zoom:1}.RadComboBox .rcbDisabled .rcbInputCell .rcbInput,.RadComboBoxDropDown .rcbDisabled{cursor:default}.RadComboBoxDropDown .rcbLoading{text-align:center}.RadComboBoxDropDown .rcbMoreResults{clear:both;border-top-width:1px;border-top-style:solid;background-repeat:repeat-x;position:relative;padding:0 6px 0;text-align:center;margin-top:1px}.RadComboBoxDropDown .rcbMoreResults a{display:inline-block;width:15px;height:9px;text-indent:-9999px;overflow:hidden;text-decoration:none;cursor:pointer;vertical-align:middle}* html .RadComboBoxDropDown .rcbMoreResults a{font-size:0;line-height:0;text-indent:0}*+html .RadComboBoxDropDown .rcbMoreResults a{font-size:0;line-height:0;text-indent:0}.RadComboBoxDropDown .rcbMoreResults span{vertical-align:middle;height:19px;line-height:19px;display:inline-block}.RadComboBoxDropDown .rcbSeparatedList .rcbItem,.RadComboBoxDropDown .rcbSeparatedList .rcbHovered,.RadComboBoxDropDown .rcbSeparatedList .rcbDisabled,.RadComboBoxDropDown .rcbSeparatedList .rcbLoading{padding-left:12px}.RadComboBoxDropDown .rcbSeparatedList .rcbSeparator{padding-left:6px}.RadComboBoxWithLabel .rcbLabel{vertical-align:top;padding-right:10px;line-height:22px;zoom:1}.RadComboBox_rtl .rcbLabel{text-align:right;padding:0 0 0 10px}*+html .RadComboBox_rtl .rcbLabel{margin-right:5px}* html .RadComboBox_rtl .rcbLabel{margin-right:5px}.RadComboBoxWithLabel table{vertical-align:top;float:none;display:inline-block;zoom:1}*+html .RadComboBoxWithLabel table{display:inline;margin-right:5px}* html .RadComboBoxWithLabel table{display:inline;margin-right:5px}.RadComboBoxWithLabel{white-space:nowrap;zoom:normal}@media screen and (min-width:550px){.RadComboBoxDropDown_rtl .rcbItem,.RadComboBoxDropDown_rtl .rcbHovered,.RadComboBoxDropDown_rtl .rcbDisabled,.RadComboBoxDropDown_rtl .rcbLoading{padding:2px 6px 2px 19px}}

http://www.cssdrive.com/index.php/main/csscompressor

I'm sure if wouldn't be hard to find others...

Here's the SiteMap Compressed

.RadSiteMap,.RadSiteMap .rsmList,.RadSiteMap .rsmFlow,.RadSiteMap .rsmItem{margin:0;padding:0}.RadSiteMap:after{content:".";clear:both;visibility:hidden;display:block;font-size:0;line-height:0}.RadSiteMap .rsmItem{list-style-type:none}.RadSiteMap .rsmItem{clear:left}.RadSiteMap .rsmLevel1 .rsmList .rsmItem{    margin-left:10px}.RadSiteMap .rsmLevel1 .rsmFlow .rsmItem,.RadSiteMap .rsmLevel1 .rsmNodeLines .rsmItem{    margin-left:0}.RadSiteMap .rsmColumn{float:left}.RadSiteMap .rsmColumnWrap{margin-bottom:10px;overflow:hidden}.RadSiteMap .rsmMultiColumn .rsmItem,.RadSiteMap .rsmMultiColumn .rsmItem .rsmMultiColumn .rsmItem,.RadSiteMap .rsmMultiColumn .rsmItem .rsmMultiColumn .rsmItem .rsmMultiColumn .rsmItem{display:-moz-inline-block;display:inline-block;*display:inline;zoom:1;vertical-align:top;padding-top:5px}.RadSiteMap .rsmMultiColumn .rsmList .rsmItem,.RadSiteMap .rsmMultiColumn .rsmList .rsmMultiColumn .rsmList .rsmItem{display:list-item;clear:left;float:none;padding-top:0}.RadSiteMap .rsmFlow{text-align:left;padding-bottom:5px}.RadSiteMap .rsmLevel1 .rsmFlow{margin-left:8px}.RadSiteMap .rsmFlow .rsmItem{display:-moz-inline-block;display:inline-block;*display:inline;zoom:1;float:none}.RadSiteMap .rsmList .rsmNodeLines{padding-left:0}.RadSiteMap .rsmNodeLines .rsmItem{padding-left:10px;background-image:url('Common/SiteMap/NodeLines.png');background-repeat:no-repeat;background-position:0 -2px}.RadSiteMap .rsmNodeLines .rsmItem .rsmFlow .rsmItem{padding-left:0;background-image:none}.RadSiteMap .rsmNodeLines .rsmLast{background-position:0 -288px}.RadSiteMap .rsmItem{font-size:20px;border-right /*\**/:1px solid transparent\9}.RadSiteMap .rsmImage{border:0;vertical-align:middle;padding-right:3px}.RadSiteMap .rsmLink,.RadSiteMap .rsmTemplate{display:block;text-decoration:none;margin-right:10px;margin-bottom:20px;padding:2px 5px 2px 0}.RadSiteMap .rsmFlow .rsmLink,.RadSiteMap .rsmFlow .rsmTemplate{margin-right:0}.RadSiteMap .rsmLevel1 .rsmItem{font-size:0.8em}.RadSiteMap .rsmLevel1 .rsmLink,.RadSiteMap .rsmLevel1 .rsmTemplate{border-bottom-width:1px;margin-bottom:5px}.RadSiteMap .rsmColumnWrap .rsmLevel1 .rsmLink,.RadSiteMap .rsmColumnWrap .rsmLevel1 .rsmTemplate{margin-right:20px}.RadSiteMap .rsmLevel2 .rsmItem{font-size:0.7em;padding-bottom:1px}.RadSiteMap .rsmLevel2 .rsmLink,.RadSiteMap .rsmLevel2 .rsmTemplate{display:inline-block;font-weight:bold;border-bottom:0;margin-bottom:0;padding-left:5px}.RadSiteMap .rsmColumnWrap .rsmLevel2 .rsmLink,.RadSiteMap .rsmColumnWrap .rsmLevel2 .rsmTemplate{margin-right:0}.RadSiteMap .rsmLevel3 .rsmItem{font-size:1em}.RadSiteMap .rsmLevel3 .rsmLink,.RadSiteMap .rsmLevel3 .rsmTemplate{font-weight:normal;margin-top:0}.RadSiteMap .rsmThreeLevels .rsmItem{font-size:16px}.RadSiteMap .rsmThreeLevels .rsmLink,.RadSiteMap .rsmThreeLevels .rsmTemplate{border-bottom-width:1px;margin-bottom:5px}.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmItem{font-size:0.7em}.RadSiteMap .rsmThreeLevels .rsmLevel2 .rsmItem{font-size:1em}.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmLink{font-weight:bold}.RadSiteMap .rsmThreeLevels .rsmLevel2 .rsmLink{font-weight:normal}.RadSiteMap .rsmTwoLevels .rsmItem{font-size:14px}.RadSiteMap .rsmTwoLevels .rsmLink,.RadSiteMap .rsmTwoLevels .rsmTemplate{margin-bottom:5px}.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmItem{font-size:0.8em;font-weight:bold;font-weight:normal}.RadSiteMap .rsmOneLevel .rsmItem{font-size:11px;font-weight:normal}.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmLink,.RadSiteMap .rsmThreeLevels .rsmLevel1 .rsmTemplate,.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmLink,.RadSiteMap .rsmTwoLevels .rsmLevel1 .rsmTemplate,.RadSiteMap .rsmOneLevel .rsmItem .rsmLink,.RadSiteMap .rsmOneLevel .rsmItem .rsmTemplate{display:inline-block;border-bottom:0;margin-bottom:0;padding-left:5px}*+html .RadSiteMap .rsmFlow >.rsmItem >.rsmTemplate{display:inline}* html .RadSiteMap .rsmFlow .rsmItem .rsmTemplate{display:inline}*+html div.RadSiteMap{padding-left:1px}* html div.RadSiteMap{padding-left:1px}*+html div.RadSiteMap .rsmList{margin-left:-1px}* html div.RadSiteMap .rsmList{margin-left:-1px}

If no human will ever be manually touching these since their hard versioned...why not make them as small as possible? :)

We can't send things down combined using the CDN (like non-CDN)...so we're already generating more http requests, but the savings from compression could help offset that.

[Kamen Bundev]

Hello Steve,

We discussed the issue a bit more and decided to investigate the possibility to implement CSS minification of white space only for the next release or the one after it, depending on the difficulty of the task.

As for the examples of file sizes with minification and compression - CSS generally has much less whitespace than a javascript source so its benefits from doing both are rather small (there is such an example on the page you linked), but nevertheless you are right.

Regards,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[sitefinitysteve]

Awesome, thanks...
  Yeah with javascript you get better minification because it can change variable names to single characters and still preserve functionality, you can't do that with CSS, but the performance gained from it certainly can't be dismissed becasue it isn't as drastic.  Again, you wouldn't see the difference if you had ONE radcontrol on the page, but often there are multiples on the same page so it would be a rather signifigant savings when you're counting every k being downloaded.  Compound that on a CDN where you pay per byte downloaded multiplied by everyone using it...if you save (for example) 36k per page requested, that adds up fast for you guys!

Hell, it'd be another thing to promote as a feature on the Q release notes as a feature :)

Steve

[Paul]

Hi

Just wondered if any progress has been made with this ?
Would love to have the compressed .axd file also be minified

Regards
Paul

[Simon]

Hello Paul,

We will implement this early the next year and it will be available in Q1 2012 BETA and the subsequent release.

Regards,
Simon
the Telerik team

[Robin]

I tried a simple page with just several textbox, combo and a RadEditor (with a simple toolbox just with about 10 features enabled). And I got a page size of 1.5M (uncompressed). That was awful.

How can you convince your boss with such result?

I was impressed that Telerik is lightweight and fast. But it seemed no more.

Moreover, I developed a tool to extract the js & css from source code, minify it and here is the result for Telerik 2011 Q3:

Original:
NotOptimize\Telerik.Web.UI
Total space occupied:
8,399,067 bytes in 492 file(s), in 113 directories

NotOptimize\Telerik.Web.UI.Skins
Total space occupied:
3,599,452 bytes in 704 file(s), in 19 directories

Optimized:
Optimize\Telerik.Web.UI
Total space occupied:
4,106,438 bytes in 492 file(s), in 113 directories

Telerik.Web.UI.Skins
Total space occupied:
2,968,558 bytes in 704 file(s), in 19 directories

PS: I use AjaxMinifier which is not fully optimized.

[Robin]

Moreover, the html output is not optimized as well. A simple WhitespaceModule can reduce 30-40% html size which can be done if you really take care of what you produce.

Some tips that may be helpful to trim the html output:
- no white space
- shorten the css name
- override the ClientID by your own unique string

all I would like to say is Telerik should really care about the performance. Hope that you will have a release, just to fix all performance issues.

Regards,

[Simon]

Hello Robin,

Thank you for sharing this data with us.

As I have said in this thread we will be optimizing the CSS output in the next release. As for the size of the HTML output and the areas of improvement you mentioned, we could only work on the whitespaces. The CSS classes are semantic and changing their names will make maintaining the skins of the controls harder. The same goes with the ClientIDs - we try to keep them as short as possible.

Regards,
Simon
the Telerik team