Derleek Posted August 12, 2009 Share Posted August 12, 2009 Does splitting up my CSS code into different files effect performance? I am thinking about splitting up my really generic CSS into files for organization purposes. example file tree/filename: /css/menu/inline.css /css/footer/basic.css /css/main/style.css Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 12, 2009 Share Posted August 12, 2009 Yes it does affect performance, but to a very small degree. The browser will be doing 3 http requests instead of 1. Does better organization outweigh the extra overhead? Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 Minimizing HTTP requests is about the single biggest step you can take in speeding up your site load times. The HTTP spec limits HTTP requests to any single domain to two at a time, meaning that while two documents are downloading from a single domain, nothing else can be downloaded. So combining your CSS into one document has the benefit of only requiring one HTTP request, allowing for other things to be downloaded. It also has the benefit of caching all your CSS on the first page, so that future pages don't need to request new CSS pages - speeding up every page after the first page. Quote Link to comment Share on other sites More sharing options...
Derleek Posted August 13, 2009 Author Share Posted August 13, 2009 Yea, i figured. I'll have to figure something else out then. Thanks Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 13, 2009 Share Posted August 13, 2009 Although haku is correct, the http request limit of 2 doesn't often create overhead. Files will just download consecutively and it doesn't really matter if they are queued and download right after each other. You will still download x bytes/per second. The http request limit is important though to make sure you got something showing up on the user's browser. You almost always want the html to download and css. If you got videos/audio files streaming make sure you test out how they download and affect the overall browsing experience. Quote Link to comment Share on other sites More sharing options...
Derleek Posted September 1, 2009 Author Share Posted September 1, 2009 hmm. How do you assign which files are downloaded first? Quote Link to comment Share on other sites More sharing options...
haku Posted September 2, 2009 Share Posted September 2, 2009 They are downloaded in the order in which they are placed. Although haku is correct, the http request limit of 2 doesn't often create overhead. Files will just download consecutively and it doesn't really matter if they are queued and download right after each other. It's true that files are downloaded consecutively, but this is what causes the overhead. All the CSS can be downloaded concurrently in one file, and while it's downloading, other HTML elements can also be downloaded at the same time. It's when the files are split up that all the downloading gets caught up on the CSS files, meaning nothing else can download during that time. On a small site with not a lot of traffic, it's probably not a big deal. But, why not make it smoother if you can. Quote Link to comment Share on other sites More sharing options...
Derleek Posted September 21, 2009 Author Share Posted September 21, 2009 SO... I have the need to install my contact form plugin, which includes some general CSS. Here is how I see it... please feel free to correct any misinformation I have. There are two options: One - compress all CSS into one doucument. Meaning I will have to look copy/paste all required CSS from my contact form plugin into my general CSS file. This to me is simple enough and not that big of a deal - 30 seconds out of my time.BUT eventually I aim to train several 'underlings', if you will, to implement and deploy scripts, websites etc for me. I would like to avoid as many manual processes as possible to prevent simple mistakes. Two - leave a separate css file for all of my plugins so all I have to do is paste my contact form plugin into my plugins directory and include it. The benefit of ease of installation (IMO) seems to out-way any potential performance hindrances - which are likely negligible for a small css file. The way i see it I can load the general, site-wide css/images and all the important stuff (banner/logo/content background etc) first. THEN display a loading bar while the rest of the plugin-specific stuff loads. Now its a matter of figuring out how to do that... I am almost positive this is how some sophisticated websites work (ex - Gmail and related apps) *research-mode: on* Quote Link to comment Share on other sites More sharing options...
haku Posted September 22, 2009 Share Posted September 22, 2009 Combine it all into one. Faster downloading times, easier maintenance. If you have multiple CSS files, sometimes you (or your underlings) will need to search through multiple files to find a declaration. If it's all in one file, you open it up, do a ctrl+F search and you have it right away. Keeps things much easier to deal with. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.