PHP CSS - faster/good practice to load external file or echo into head?
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 pr开发者_开发知识库actice, is there a big reason I should(n't)?
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.
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.
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.
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.
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.
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.
加载中,请稍侯......
精彩评论