How optimize css delivery?

Question

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?

Minimize them, combine them if you can, serve them from a CDN, set future dates of expiration — John Conde
– John Conde, Commented May 14, 2014 at 13:18

Ruslan López · Accepted Answer · 2015-03-31 15:20:57Z

2

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.

edited Mar 31, 2015 at 15:20

Ruslan López

4,4752 gold badges30 silver badges40 bronze badges

answered May 14, 2014 at 13:21

STW

46.8k17 gold badges109 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Overnet Over a year ago

What is the best in your opinion?

STW Over a year ago

all of the above, but they can be implemented one at a time. The server configuration will get you the most benefit, compression will help with CSS, JS, JSON, XML, HTML, and other text-based resources. Sending cache headers for static content will give your users a nice speed boost. Next up would probably be minifying your CSS and Javascript--if you use a build system you can add this as a build step. Last would probably be bundling, but only because it can be difficult to get right--the tricky part is figuring out which resources are usually used together and them combining those.

Collectives™ on Stack Overflow

How optimize css delivery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related