Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple CSS files and performance

Would it be wise to combine all CSS into a single file? Would there be any performance increase. I have to assume that an HTTP request is made to get each file on initial page load, and reducing those requests would seem to make sense.

Are there any reasons NOT to combine all css into a single file?(such as maintainability or other performance issue)

like image 658
stephen776 Avatar asked Jan 09 '11 17:01

stephen776


People also ask

Is it good practice to use multiple CSS files?

Many developers recommend avoiding inline CSS at all, as it usually can't be cached, and it's recommended to avoid splitting CSS across multiple files. At the very least, it should be used sparingly.

Is it better to have one or multiple CSS files?

It depends on your use case. Usually everyone just smash a single css into the page and load it everywhere. If the site small and the css is only a few kB should be fine. once you get to the 100kb+ u probably better sppliting files into the most critical css and fonts so the first content is available without delays.

Does CSS affect performance?

Before we get into what inlining CSS means and how to do it, it's important to first understand how CSS can affect performance. While JavaScript and images generally play a much larger role in negatively impacting performance metrics, CSS can also play a significant role.

How many CSS files should I have?

you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website. Save this answer.


2 Answers

Merging all of your css files into one will absolutely gain performance. Whether that performance is noticeable depends on your load, number of requests etc. For the average blog, this will have close to zero impact.

Read Best practices for speeding up your web site at Yahoo! Developer. It'll explain things way better than i can.

As you say, a reason not to merge css files is for maintainability. However, there are many tools out there which automatically merge and minify your css files into one.

You should check out YUI Compressor, this will help you with merging and minifing your css files.

like image 121
alexn Avatar answered Oct 11 '22 11:10

alexn


Would it be wise to combine all CSS into a single file? Would there be any performance increase. I have to assume that an HTTP request is made to get each file on initial page load, and reducing those requests would seem to make sense.

Yes, but make the combination at build or runtime and don't try to maintain a single file if you started with multiple ones.

In addition to the number of HTTP requests it is also important to set the right expiration headers in the response.

Are there any reasons NOT to combine all css into a single file?(such as maintainability or other performance issue)

It is not necessary to maintain a single file, but good to serve a single file, because CSS data is anyway merged.

The YUI Compressor is a good tool for JavaScript and CSS minification.

like image 21
Timo Westkämper Avatar answered Oct 11 '22 11:10

Timo Westkämper