combining css/js files

[damiantaylor]

Hi guys,
I've been looking in to speeding up my site and came across a way of combining all the css and javascript files at the server side, so you can keep them separate for development.
I've tested it and it looks to be working ok and I've definitely shaved seconds off the response time when I use the weboptimization.com analysis tool so I thougth I'd share the technique.

If you're going to use this make sure you back up everything first!

To combine all your css files in includes/templates/your template/css:

Rename all you stylesheets that start with 'style' to something other than style.

e.g. These were my files:
stylesheet.css
stylesheet_shipping_rates_in_cart.css
stylesheet_slimbox_ex.css
stylesheet_tpp.css

I renamed them all to:
sheet.css
sheet_shipping_rates_in_cart.css
sheet_slimbox_ex.css
sheet_tpp.css

You do this so Zen Cart no longer picks them up by default.
Now add a new css that uses php to include the renamed files:

<?php
  header('Cache-control: must-revalidate');
  header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 10800) . ' GMT');
  include("sheet.css");
  include("sheet_shipping_rates_in_cart.css");
  include("sheet_slimbox_ex.css");
  include("sheet_tpp.css");
?>

Save this file in the same css folder as the files you just renamed.
I called this file 'stylesheet_merged.css'
The name has to start with 'style' so Zen Cart picks it up by default.
It should also be named with the .css extension.
The cache control bit means it will be cached for 3 hours.

Finally, you need to add an .htaccess file, again in the same folder with the following code:

AddHandler application/x-httpd-php .css
php_flag zlib.output_compression On
php_value default_mimetype "text/css"

That's it!
The technique is called Suture and more info can be found here:
http://www.websiteoptimization.com/speed/tweak/suture/

The same can be done for javascript files.
I hope this helps someone and if any experts out there have spotted something I've missed, please correct me :)

[Shane78]

sweet tip.. i shall give it a bash when i get a chance..

this is a good site too...
cssdrive.com/index.php/main/csscompressor/

although there are loads of other sites that do the same thing if youre not fan of this one! it really shaves down the css file by a canny bit, i think (its been a while) the standard css file that comes with the classic template gets reduced by about 40%

[Shane78]

another excelent tool!

seositecheckup.com