3

I was thinking today, as I linked a webpage to 3 external .css files: "This is too many HTTP requests!" I got to wondering if I should be using php to combine these files into one? Or should I just import all three into the <head> with <style> tags? I found one relevant link on the interwebs: Suture CSS or JavaScript Files to Reduce HTTP Requests but I don't think it gives an adequate discussion.

note: I am tagging this for javascript as well because I believe it also applies to .js files so please make note if your answer applies to only css or javascript

Improve this question

3 Answers 3

Reset to default
3

I think it's not necessary. The browser will download both files just once. If you add them to the style tag on the page, it will have to download the same content everytime this page is loaded.

Unless your page/site has lots of access per second, you won't need it.

That's what I think...

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

So pretty much you think this technique is too nit-picky and unnessecary unless I am making a very high traffic site (which I dont)?
I agree it feels like a case of premature optimization. While it is true that combining (and especially minifing) css and js files can help with a cold page load unless you profile your page and see this is a real bottleneck it is probably not worth the effort.
I respectfully disagree with both @CrociDB and @Matthew. The single most critical bottleneck in any web-based medium is I/O, more specifically HTTP requests. Reducing the total number of HTTP requests can prove to be the most effective speed optimization for any given web application. Even just one request can have the potential to shave off anything from a few hundred milliseconds to achingly long full-seconds. For the argument that css files only download once, and then are cached in the browser: your first impression counts! If it's fast the first time, it's even faster later.
3

I got to wondering if I should be using php to combine these files into one?

Often yes, not only because of the number of HTTP requests (which will usually occur only once anyway) but also because Internet Explorer can't deal with more than 31 external style sheets on the same page.

Preferably do it in a cached way so you don't have to run PHP on every CSS request. This question has a number of pointers to excellent resources on the issue.

Or should I just import all three into the with tags?

No: It makes the styles un-cacheable by the browser, and increases the size of every request.

Improve this answer

Comments

0

I use a combination of methods so that I can serve only one css and as few js files as possible.

By using media queries it's possible to combine print and screen styles into one page, and by using body class selectors you can add ie styles inline without using hacks.

For example, in main.css

@media screen {
    p { [styles] }
    ...
}
@media print {
    p { [styles] }
    ...
}

This article gives a rundown of body class selectors:
http://misteroneill.com/improved-internet-explorer-targeting-through-body-classes/

Improve this answer

1 Comment

Very usefull, but unfortunately not relevant to my current project. I'll keep this one in reserve ;-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.