Looking at my webmaster tools, Google kindly recommended that I could further increase the performance of some of my sites and to look at the recommendations provided by their PageSpeed service.

So I did.

Their optimization suggestions showed a negative improvement on top of what I already have:

Visual Progress


So over-all, I don't see a benefit to taking their suggestions. However the top of the report lists the following:

                                    Original    Optimized   Difference
Page Load Time                    4.094s    0.471s  -3.623s (88.5%)
Speed Index (lower is better)       1953    3518    +1565 (80.1%)

So I'm a bit confused.

Webmaster tools, however did suggest that I optimize the CSS on the page - primarily all the jQuery theme-related CSS.

I am already loading the CSS asynchronously:

    jQuery(function () {
        $("head").append("<link href='/Content/themes/custom-theme-lightness/jquery.ui.all.css' rel='stylesheet' type='text/css' />");
        $("head").append("<link href='/Content/StylesResults.css' rel='stylesheet' type='text/css' />");

So I'm looking for some suggestions.



Some ways to optimize CSS so that improves page performance:

  • Remove unused CSS rules: Audits tab within Google Chrome Developer Tools (Ctrl+Shift+I) lists unused selectors as part of its performance recommendations
  • Minify CSS - Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). Use YUI Compressor or one of the many online CSS minification tools.
  • Enable Gzip data compression - Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Some other tips for optimizing CSS:

  • Losslessly compress the CSS before serving it. I use yui compressor
  • For page rendering time, applying CSS rules based on Id is much more efficient than applying CSS rules based on class. So use #mydiv rules when possible rather than .mydiv rules. This is because browsers typically implement a hashmap for quickly looking elements by id, but have to search the dom to find elements by class. When using class rules, limit the search by telling the CSS which section of the page they are found in. For example #myheader .myheaderlink rather than just .myheaderlink.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.