CODEWITHSUNDEEP
cssweb
Eleer
Eleer

Reputation: 608

All CSS in 1 or more files?

Does the fact that I have 1 or 30 css files have any effect to my website? I know that I have to have special file for print, but right now I speak about rest CSS I can have in 1 file, but I split it into 30 files.

Upvotes: 0

Views: 71

Answers (4)

Spudley
Spudley

Reputation: 168685

Yes, there are performance implications to having large numbers of separate files to download; you will improve your site's performance by combining them.

The number of HTTP requests made by a page is a significant factor in page loading time, because:

  • the browser has to wait for all requests to finish before it can render the page correctly and before it can call any Javascript that is set to run on page load.

  • browsers have a limit on the number of HTTP requests they can make simulataneously. In some browsers, that limit is very low (as low as 2 for old IE versions).

  • your server will also restrict the number of simultaneous requests.

All of these issues will slow down your site if you have a lot of separate files.

There are good reasons for having separate files -- eg for caching, if some files change more often than others, you may not want them to be merged with others that never change -- but for the most part, you should do you best to reduce the number of HTTP requests your page has to make.

Don't feel that you have to merge them all into one single file, but you should definitely consider reducing the number as much as possible.

In addition, IE8 and earlier have quite tight restrictions on the number of CSS files allowed -- it only allows 31 CSS files; any CSS files over that limit are ignored. You may not have hit that limit yet, but it sounds like you're getting dangerously close to it, and it has the potential to bite you very hard if you don't know about it. This problem is also solved by simply merging your CSS files.

Upvotes: 2

Colin Bacon
Colin Bacon

Reputation: 15609

Yes it certainly does, especially if you are loading all of them on one page load. 30 http requests instead of 1 will make a big difference.

CSS Preprocessors

If you feel that having your css files separated offers you a benefit of readability and the such then it is worthwhile looking into using a css preprocessor such as Less or Sass as these will allow you build seperate files into one style sheet.

Upvotes: 0

Christoph
Christoph

Reputation: 51211

Yes, it does affect the speed of your site.

Browser can donwload a limited number of resources at a time (=in parallel - it differs between browsers, but it's around 4 sources from one domain), so they are "blocked" if you have too many separate sources resulting in a lot of HTTP requests. The browser has to wait to complete these requests and can't continue with the creation of the document during that time.

You should always try to use as few files as possible, minify them and possibly compress (gzip) them.

Upvotes: 0

David Jashi
David Jashi

Reputation: 4511

Yes, it does. The less HTTP requests you have, the faster loading process is.

You can analyse loading speed with YSlow

Upvotes: 0

Related Questions