How to manage css files the best way

Question

Hi, one question about performance.

I have an webproject with different css files in the moment (uncompressed). Every page is including the needed files.

Iam thinking about putting all style definitions in one file, compress it, and put in central in the header.

What makes a better performance ? on file compressed (every page loads all styles), or to split the files and only load ne needed ones?

sorry for my bad english (;

Answer 1

We typically keep all of our CSS file separate under development, then when it comes to deploy, we pack them together into a single file, and use gzip compression on the server to send them compressed to the client.

Answer 2

Splitting the files up will require the browser to do more requests - in the long run, this is probably slower than if you put up one stylesheet that is reused for all the pages. Once the browser has the stylesheet, it will be stored in the browsercache. For all pages after the first, the browser won't need to download the stylesheets. In the end I think this gives a better user experience.

Hope this helps!

Answer 3

One compressed file will probably be fastest. You want to cut down on HTTP requests. Also try and put all background images into one file and use css sprites.

Answer 4

It depends on the type of website,

• if it is an intranet website where the users are probably using every-page on the site then pre-loading all the css will be the fastest.
• if it is an internet website where most users will go away after a few clicks then I would use smaller css file per page.

Have a look at YSlow and Google Page Speed for more tips.

Answer 5

I'm working in an environment where we're working with the public stylesheets in uncompressed separate files, and then they're automatically merged and compressed into a single file. As it's compressed, it's obviously less size and loads faster, but it's even better when it's only one file since there will only be one connection to the server when fetching the stylesheets (each CSS file requires 1 connection) and then it will remain cached in the users browser.