Loading multiple small files is slower than loading one big file; each connection takes time to set up so lets minimize the number of connections your website makes. Ideally you only need two connections; one for all your javascript files and one for all your CSS files. There are a variety of plugins available to do this but since we like to code we have devised own method. Simply put, we create a php file that includes the files we need. On top of that it also applies gzip compression (making the file a lot smaller) and adds expiration headers (so your browser can cache the files and only needs to load them once). Get ready for some code!

We’re assuming you put all your CSS files in a directory named css and put all your javascripts files in a directory named js, these directories reside in your theme directory. In both directories we created files named index.php, this saves a few bytes when include the files in the head of our html document.

Creating css/index.php

Create a file named index.php in your css directory and fill it with the code below:

<?php
  ob_start ("ob_gzhandler"); // gzip compression
  header("Content-type: text/css; charset: UTF-8"); // mime-type
  header("Cache-Control: must-revalidate");
  header("Expires: " . gmdate("D, d M Y H:i:s", time() + 604800) . " GMT"); // near future expires header

  $dir = ''; // root dir for your css files

  // array of css files and their media type
  $css = array(
    'all' => array(
      'reset.css'
    ),
    'handheld' => array(
      'handheld.css'
    ),
    'screen' => array(
      'screen.css'
    )
  );

  // include all css files and wrap them in @media 
  foreach($css as $media => $urls)
  {
    echo "@media $media {\n\n";
    foreach($urls as $url)
    {
      if (!empty($url)) include($dir . $url);
    }
    echo "}\n\n";
  }
?>

Find all references to css files in your theme and add the css file names to the $css array. Each media type has it’s own key, so put them in the right place! When your done, delete all the old css references in your theme and replace them with the following line of code:

<link rel="stylesheet" type="text/css" href="/css/" />

Creating js/index.php

Lets do the same for javascript files, create a file named index.php in your js directory and fill it with the code below:

<?php
  ob_start("ob_gzhandler"); // gzip compression
  header("content-type: application/x-javascript"); // mime-type
  header("Cache-Control: must-revalidate");
  header("Expires: " . gmdate("D, d M Y H:i:s", time() + 604800) . " GMT"); // near future expires header

  $dir = ''; // root dir for your js files

  // array of scripts files
  $scripts = array(
    'jquery-1.6.2.min.js',
    'script.js'
  );

  foreach($scripts as $script)
  {
    include($script);
  }
?>

Find all references to javascript files in your theme and add the file names to the $scripts array. When your done, delete all the old javascript references in your theme and replace them with the following line of code:

<script src="/js/" type="text/javascript" charset="utf-8"></script>

All done! Now check your website again in YSlow and see the differences. Our CSS file was 21KB without compression and 5.8KB with compression. Our javascript file went from 126KB to 42.5KB. Did you notice you don’t actually need to have ‘index.php’ in your script or link tags? Saves a few bytes as well!

Getting good grades with YSlow – Part 1: Combining javascript and CSS files