Combining Multiple CSS Files

by jim on January 1st, 2010

When 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.

RSS Subscribe Like this article? Get all the latest articles sent to your email for free every day. Just click "Subscribe" and enter your email. Your email will only be used for this daily subscription and you can unsubscribe anytime.

Leave a Reply