如何减少CSS HTTP请求？

Question

How to reduce css http requests?

1 large css file

or one css file which importing all other css

is this same?

What is the benefit of using this

@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

Answer 1

1 large css file or one css file which importing all other css is this same?

No as the Client still needs to load every CSS file (with one HTTP-request each)

Some Links to learn more about reducing HTTP requests:

• Yahoo Best Practices
• Blog-post about the same topic

If you are using Firefox I highly recommend Firebug , which offers a view with detailed information about HTTP-Requests.
EDIT:
As flybywire points out in the comments: YSlow is a Firefox extension that integrates with Firebug to analyze web page performance

3 easy things I would try first:

• Combine global CSS (the things you use on every page)
• Compress CSS (with YUI compressor or some online tool)
• Inline the page-specific stuff (things that are not shared among pages)

Most of those things also apply to Javascript files.

Answer 2

A style import will still trigger an HTTP request. I recommend serving only one CSS file. You could combine multiple CSS files using imports from the server side to send one file without managing all your CSS rules from a single file.

Answer 3

In case you are using asp.net mvc - check out this approach . Still works like a charm. Basically - it uses httphandler to combine, compress and cache asset files.

But that's asp.net specific. Can't tell if that helps.

---

Offtopic:

The same technique you can apply for javascript files (it feels great to have nice structured js files and still - to avoid many http requests).

For images - check out spriting . This bookmarklet can be quite helpful too.

Answer 4

Do you want to reduce number of http requests or size of them?

I would recommend to put all the most used selectors into one large CSS file (along with all your libraries / plugins used) and minify it with online optimizers/minimizers

Answer 5

If you are going to be serving your css files from a web farm or it is a high volume site, I would suggest having a look at : http://code.google.com/p/talifun-web/wiki/CrusherModule It uses a file watcher to look for changes on css/js files. Css/js files belong to file sets specified in the web.config. When a change is detected on one of the component js/css files it creates a new munged css or jss for the file set.

It also has a simple control to output css/js file set links. The control will append a querystring with a hash of the file, so you are guaranteed the correct file contents.

This means that you can serve the munged file with IIS directly. Then you can take advantage of kernel mode caching. Also means you don't need to worry about buggy implementations of http header support:

• ETag
• Expires
• Last-Modified
• If-Match
• If-None-Match
• If-Modified-Since
• If-Unmodified-Since
• Unless-Modified-Since

It is better to compress all your js/css files into one giant file for the entire website, then it is to dynamically serve just the required js/css files for the page. Browsers can cache the one giant file and then never have to worry about downloading css/js from your site again.

Answer 6

You can use an HTTP request combiner to specify a list of common css files which should be delivered as a single minified css file to the browser. This will reduce the size as well as bring the number of requests down significantly.

A good example of this working in a .Net context: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

Answer 7

I wrote some blog posts about this. See Supercharging CSS in PHP . Even though it is written for PHP the principles are universal.

Basically your goal is to reduce external HTTP requests. You can do this with a combination of combining your CSS files and/or versioning your CSS files and using a far future Expires header.

Lastly, you should always GZip CSS (and Javascript) if the client accepts it.