Geek Answers Handbook

Multiple css files or one large css file?

Which one is better and faster? What for?

using only one file for styling:

css/style.css

or

using multiple files for styles:

 css/header.css css/contact.css css/footer.css css/tooltip.css

The reason I ask about this is because I am developing a site for users with very low internet speeds. country of Uganda. Therefore, I want to do this as quickly as possible.

0
html css
source share
5 answers

Using one file is faster because it requires fewer HTTP requests (assuming the number of styles loaded remains the same).

So it’s better to store it in only one file. CSS separation should only be done if you want to separate separate IE classes.

+2
source share

In accordance with the Yahoo Performance Rules [source] VERY IMPORTANT to minimize HTTP requests

From source

Combined files are a way to reduce the number of HTTP requests by combining all the scripts into a single script and likewise combining all the CSS into a single stylesheet. File combinations are more complex when scripts and style sheets vary from page to page, but this part of your release process improves response time.

It is not easy to develop using combined files, so stick with multi-file development, but you should combine the files after deploying the system on the Internet.

I really recommend using the template build ant build script. You can find it here .

It combines and minimizes CSS.

+3
source share

It is always the best solution for combining or combining multiple CSS or JavaScript files into fewer HTTP requests. This forces the browser to request a lot less files and, in turn, reduces the time required to receive them. With proper caching, you can get extra bandwidth and even fewer HTTP requests.

Update: There you may be interested in the new Bundling feature in ASP.Net 4.5 . This allows you to have css files separated at compile time, and at runtime, the benefits of combined resources into one resource

+2
source share

A single resource file is always the fastest as you reduce the number of HTTP requests made to extract these files.

I would suggest using Yslow , which is a great extension for firebug , which analyzes web pages and offers ways to increase their efficiency.

+1
source share

A single css file is better than multiple css files due to the overhead associated with the end-user browser, to execute multiple requests for each file. Other things you can improve include:

  • Enable the display of gzip on your web server, for example. on Apache so that files are compressed before downloading
  • where it is possible to place your files geographically as close as possible to most of your end users
  • use the CDN network for your static content such as css files.
  • Use CSS Sprites
  • Your content cache

Please note that tools are available for this. See 15 ways to optimize css for more information.

+1
source share

More articles:


All Articles