Right now I use a PHP script to pull together multiple CSS files into one script and then output them with a content-type of text/css.
The problem them with this is the browser wont cache the file.
Is there a better way of doing this?
Thanks
2
-
Which caching headers are you sending? Is the browser set up to cache files?Douglas– Douglas2010-08-12 23:10:24 +00:00Commented Aug 12, 2010 at 23:10
-
You could run the PHP script once and save the output as a file on your server. There's less overhead this way, and caching should work out of the box.cbednarski– cbednarski2010-08-13 01:58:17 +00:00Commented Aug 13, 2010 at 1:58
Add a comment
|
4 Answers
If you have to serve the CSS via PHP, you can force a cache header to be emitted, so the browser can cache the output if it so desires:
<?php
header('Cache-control: max-age=3600'); // cache for at least 1 hour
header('Content-type: text/css');
readfile('css1.css');
readfile('css2.css');
etc...
Comments
Why don't you just use @import in a global css file and link that into your html file?
1 Comment
Jon Hanna
In fairness, there is a performance gain to be found in creating single files in some cases, as long as he gets the caching issue resolved (and a performance loss to be found as well, it's a trade-off thing that should be measured).
"Cascading style sheets" are so called before CSS files may include others. You can also specify several CSS files in your HTML file (using LINK) instead of including them inline.
Use these facilities and let your web server take care of sending the appropriate headers for client-side caching an handling of conditional HTTP requests.
Comments
I use the code posted bellow.
It follows Google's page speed recommendations.
Do notice that readfile is faster that include so should be used.
<?php
#$off = 0; # Set to a reasonable value later, say 3600 (1h);
$off = 604800; # Set to 1 week cache as suggested by google
$last_modified_time = filemtime('csscompressor.php');
$etag = md5_file('csscompressor.php');
ob_start("ob_gzhandler");
ob_start("compress");
header('Content-type: text/css; charset="utf-8"', true);
header("Cache-Control: private, x-gzip-ok=''");
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT");
header("Etag: $etag");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $off) . " GMT");
// load css files
readfile("global.css");
readfile('jquery-theme.css');
// ...
?>
You should also serve all CSS and JAVASCRIPT pages like this:
<script src="http://example.com/myjavascript.js?v=<?=$version=?>" ></script>
The $version variable is controlled by you. It should be set in a site-wide config file. Every time you push an update live you can just change the version on one place and everyone seeing the new content will just push it and not depend on cache.
