2

I'd like to know if it's better to

A) include external CSS files using <link> or

B) echo/flush/print the CSS directly into the <head>.

Personally, I like option B, since it allows

  • removing comments / minifying
  • using css placed above the root directory
  • compressing multiple css files = less HTTP requests

Before I put this into practice, is there a big reason I should(n't)?

skaffman
  • 398,947
  • 96
  • 818
  • 769
Ben
  • 54,723
  • 49
  • 178
  • 224
  • (A) would favor stylesheet caching and reduce the size of the HTML pages that come in. Not to mention it'll do away with markup validity concerns. – BoltClock Jan 14 '11 at 02:50
  • @Bolt - Could you elaborate re: markup validity concerns? I thought echo-ing minified CSS would be valid already? – Ben Jan 14 '11 at 02:53
  • Actually scratch that, I'm not certain if it'll break validation. – BoltClock Jan 14 '11 at 02:56
  • @Bolt - noted. Was just testing myself in ` – Ben Jan 14 '11 at 03:02

6 Answers6

5

Option A will give you an extra HTTP request, but the browser keeps the CSS file in a cache so it's not a big deal.

On the other hand, even if option B will save you an HTTP request, your HTML page will be considerably bigger and the browser will not be able to cache your HTML page if there's frequently changes on it. So you server will have to handle more data transfer.

For pages where the content will be very rarely changed, use option B. Otherwise, use option A.

Marc-François
  • 3,900
  • 3
  • 28
  • 47
  • Option B will give you a very big initial payload which is bad in my opinion! It is also hard to cache page when using method B – Alfred Jan 14 '11 at 03:04
  • That's what I say in my answer, no? – Marc-François Jan 14 '11 at 03:08
  • And to top that, if a non-programmer would have to make changes in the CSS, the option B is a no-go since most of them will be afraid to open a .php page. If you want more flexibility (like variables) you might want to consider lessCSS – JF Dion Feb 28 '12 at 13:38
2

If you are planning a really high-traffic website, then go for B (as commented below, it is not a good idea unless your html almost never change, like google front page). I personally like A as it allows you to keep the style away from your html and allows you to use specific stylesheets for different media or even switch from one to another easily. Also it is easy to maintain (with versions) and extend.

If you are worry about the requests, then work in your images. You can add all your images as base64 in your css and prevent many requests with that or use image panning technique for multiple icons.

You can also minify your css offline and put all your css stylesheets in one file using a script or server side coding.

my 5cents.

lepe
  • 24,677
  • 9
  • 99
  • 108
  • @lepe - Wow love that image idea - do you have a recommended link for further reading? – Ben Jan 14 '11 at 02:56
  • When having a big website then going for B is a really bad idea because you can't cache your page properly anymore. – Alfred Jan 14 '11 at 03:05
  • @Steve: sure here: http://en.wikipedia.org/wiki/Data:_URI. I use in my projects a code that compact all the css files in one (and minify), and replace automatically all url() to base64 (and store it in cache). It works in all browsers except IE6. – lepe Jan 14 '11 at 03:08
  • @Alfred: I agree with you. I never use B, so I forgot about that detail.... hehe (I updated my answer accordingly). – lepe Jan 14 '11 at 03:10
  • @Steve: It's ok... I'm glad I helped. – lepe Jan 14 '11 at 03:14
1

It is best to go with option (A) for caching purposes, BUT fear not, you can get the benefits of option B as well! Simply name your css file with a php extension and then include it with the link tag. PHP will then parse this file before sending it to the browser so you can remove comments / minify it or include a css file that is anywhere on your server. As for your third point, if the browser caches it then it's 2 requests the first time but then only 1 request the second time so overall you get less requests.

Brandon
  • 668
  • 8
  • 22
1

You'll be much better off in the long run loading an external stylesheet via a tag in the head of the document. This allows the browser to cache the stylesheet once it's been loaded and you won't have to download it on every page request.

If you are concerned about minifying the stylesheet you can do that with a number of tools - See Any recommendations for a CSS minifier? for lots of recommendations.

Community
  • 1
  • 1
JustJohn
  • 361
  • 1
  • 7
1

Short answer is you should not use method B. You can read below why I think you should not do it that way.

You should keep the filesize of the main HTML file as small as possible because you can't cache that file(most of the times because of dynamic nature of that).

You should not do premature optimization when testing locally. But when you deploy your code you should minify CSS and combine all the files to a single file. Also do not forget to give CSS file a far future expire header(caching is very important).

Yahoo!'s best practices for speeding up your website also gives you a lot of information(a lot of my answer is based on that reading) how to speed up your website and is a very good read.

Alfred
  • 60,935
  • 33
  • 147
  • 186
  • +1 "can't cache that file" - good point, now I understand what @Marc-Franc is saying. – Ben Jan 14 '11 at 03:10
0

The correct answer depends on the purpose of the page and how the styling is structured.

On the site I work on we have a few key pages where page speed is a key factor (the landing page where people can download our software for example), but we also want to cache our CSS for visitors that see more than one page or may come back in the near future.

You also rarely have only one CSS file, a common setup could be: a css reset file a template.css file with the general styling of the site shared by all pages a per page css file defining specific rules for the page that don't need caching a IEfix css file for Internet Explorer compatibility

the css reset, template.css and IRfix files are good candidate for minification as a single external file that will be cached.

The per page css file is a good candidate for inclusion into a tag since it is not meant to be reused and the cost of an http request is usually higher than the time cost of the bytes transferred.

If you have pages with a specific styling not shared across the site, inline everything.

Pascalc
  • 575
  • 1
  • 4
  • 5