Search code examples
cssoptimizationpagespeedgoogle-pagespeed

How optimize css delivery?

I've test my website on Google page speed and I've saw that I need to optimize my css files. But in the Google documentation are reply only for small css files.

This is the message that appaer when I test my website:

Optimize CSS Delivery of the following:

http://www.example.com/css/style.css
http://www.example.com/css/reset.css
http://www.example.com/css/social.css
http://www.example.com/css/comments.css
http://www.example.com/css/widgets.css
http://www.example.com/css/jquery.tweet.css
http://www.example.com/css/superfish.css
http://www.example.com/js/prettyPhoto/css/prettyPhoto.css
http://www.example.com/…ytip-1.1/src/tip-twitter/tip-twitter.css
http://www.example.com/…rc/tip-yellowsimple/tip-yellowsimple.css
http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300
http://www.example.com/css/flexslider.css
http://www.example.com/css/lessframework.css
http://www.example.com/css/skin.css

Anyone can help me?

Solution

  • CSS (and Javascript) can be optimized in several ways:

    • Minification - this compresses your CSS by removing whitespace, line breaks, and other non-functional parts
    • Bundling - this merges several related CSS files into one, which reduces the number of requests made to the server

    And more broadly you should ensure that your webserver is configured to support compression on your webserver, as well as at least a basic caching policy for your static files. These will help browsers be efficient.