CODEWITHSUNDEEP
htmlcss
user1012032
user1012032

Reputation:

Multiple css files or one big css file?

Which one is better and faster? why?

using only one file for styling:

css/style.css

or

using several files for styling:

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

The reason Im asking it is that im developing a site for users who have very low internet speed. country uganda. So I want to make it as fast as possible.

Upvotes: 0

Views: 5346

Answers (5)

Kamyar Nazeri
Kamyar Nazeri

Reputation: 26474

This is always a better solution to bundle or combine multiple CSS or JavaScript files into fewer HTTP requests. This causes the browser to request a lot fewer files and in turn reduces the time it takes to fetch them. With a proper caching, you can gain extra bandwidth and even fewer HTTP request.

Update: There's a new Bundling feature in ASP.Net 4.5 which you might be interested in. This allows you to have css files separated at compile-time, and in runtime gain benefit of combined resources into one resource

Upvotes: 2

Starx
Starx

Reputation: 78971

As per Yahoo's Performance Rules [source], It is VERY IMPORTANT to minimize HTTP requests

From the source

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

It is quite uneasy to develop using combined files, so stick to developing with multiple files but you should combine the files once you are deploying the system on the web.

I really recommend using boilerplate's ant build script. You can find it here.

It Combines and minifies CSS

Upvotes: 3

Andy Higgins
Andy Higgins

Reputation: 247

One css file is better than multiple css files because of the overhead involved by the end user's browser to make multiple requests for each file. Other things you can do yo improve the performance include:

  • Enable gzip impression on your webserver e.g. on Apache so that the files are compressed before downloading
  • where possible host your files geographically as close to the majority of your end users as possible
  • use a CDN network for your static content such as css files
  • Use CSS sprites
  • Cache your content

Note that there are tools available to help you do this. See 15 ways to optimise css for more information

Upvotes: 2

Maxim Manco
Maxim Manco

Reputation: 1954

One resource file is always the fastest approach since you reduce the number of HTTP requests made to fetch those files.

I would suggest to use Yslow which is a great extension for firebug that analyzes web pages and suggests ways to improve their performance.

Upvotes: 1

justanotherhobbyist
justanotherhobbyist

Reputation: 2192

Using a single file is faster because it requires less HTTP requests (assuming the amount of styles loaded is still the same).

So it's better to keep it in just one file. Separating CSS should only be done if you want to keep for example IE specific classes separate.

Upvotes: 3

Related Questions