Combining Multiple CSS Files
by jim on January 1st, 2010When it comes to optimizing your site’s load times, you can lower the amount of data that gets sent (that’s what gzipping your site accomplishes), or you can lower the number of HTTP requests. Every HTTP request takes a small fraction of time to complete and a request is executed every time the browser needs to load another file. If you look in YSlow, under Statistics, it’ll show you both the Total Weight and the number of HTTP requests.
One easy way to cut down the number of requests is by combining, or suturing, multiple CSS files together. With PHP code, you will take all the files and dynamically combine them so that the browser only makes one request.
httpd.conf
First, add the following lines to your httpd.conf file:
AddHandler application/x-httpd-php .css
header('Content-type: text/css');
You can usually find it in the /etc/httpd/conf/ directory. You’ll have to restart your server for the changes to take effect.
Combining .css files
From there, simply use PHP to include each of the CSS files:
<?php
include("stylesheetA.css");
include("stylesheetB.css");
?>
This tip is taken from the O’Reilly book Website Optimization, by Andrew King, in the section on suturing CSS and Javascript files.


Leave a Reply