Skip to content
This repository

An easy to use stand-alone PHP-Library (but at the same time also a Wordpress plugin) that combines, optimizes, dataURI-fies, re-splits, compresses and caches your CSS and JS for quicker loading times.

branch: master
README.textile

CSS-JS-Booster

Copyright © 2010 Christian “Schepp” Schaefer
http://twitter.com/derSchepp

Functionality and Benefits

CSS-JS-Booster is a PHP-script that tries to automate as many performance
optimizing steps related to CSS and JS embedding as possible.

For CSS these steps are:

  • combine multiple CSS-files resulting in number of HTTP-requests going down
  • minify CSS
  • Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7)
  • Split the output back into 2 even files that can load in parallel (not for WP)
  • GZIP-compress the resulting CSS
  • Have browsers cache the result as long as it remains unchanged
  • If IE6: Issue a JS-command to fix background image caching behaviour

For JS these steps are:

  • combine multiple JS-files resulting in number of HTTP-requests going down
  • Minify the JS through the Google Closure Compiler Webservice, or JSMin as fallback (not for WP)
  • GZIP-compress the resulting JS
  • Have browsers cache the result as long as it remains unchanged

+ GZIP-compresses the page calling those files.

Depending on the amount of CSS, CSS-images and JS, this can significantly
increase loading speed of your site.

Naah, your software stinks! Alternatives? Yes, there are!

Quite similar to this library is one called SmartOptimizer
with the major difference that it neither supports MHTML for the older IEs
nor does it offer the possibility to back-split the output into multiple
parts.

Then there is another nifty piece of software called Web Optimizer
that does what CSS-JS-Booster does, and a little lot more.
And there are many CMS-Plugins available. There exists a free and
a commercial version.

For any full-fledged web 3.0 company with money, their own servers and some
technical skills (or instead: even more money), there also exists an
enterprise-website-accelerator named aptimize

Just to have mentioned those…

System Requirements

CSS-JS-Booster absolutely requires PHP 5. No PHP 4, sorry…
Version-wise it is tested up until PHP 5.3.

Basic Usage

CSS-JS-Booster is a standalone-library as well as a Wordpress-plugin.
If you are interested in the Wordpress-part, you can skip all of this and
scroll further down to where you will find a Wordpress install guide.

Now, coming to the standalone-library…

CSS-JS-Booster is – as its name implies – divided into two function blocks:
A CSS-optimizing block and a JavaScript-optimizing block.

For both functionalities you first need to go into the booster-folder and
create a folder named booster_cache and have it CHMOD 0777.

Afterwards include

<?php 
include('booster/booster_inc.php'); 
$booster = new Booster();
?>

at the top of your (PHP-interpreted) file.
(Adjust the path according to your folder-structure)

Should you happen to only have static HTML-files, try enabling PHP-parsing
by putting a .htaccess-file into the site’s root with following directive:

AddType application/x-httpd-php .html .htm

For the CSS-part, put all releveant CSS-files into a subfolder css of your
site. Make sure, all declarations pointing to image-files have their paths
adjusted (i.e. all CSS should be fully functional by themselves inside that
folder).

If you have multiple CSS-files rename them so that they are alphabetically
sorted in the desired order, e.g.:

01_first.css
02_second.css
03_third.css

Then add this declaration in the HTML’s head-section:

<?php 
$booster->css_source = '../css'; //relative path from inside booster folder
echo $booster->css_markup(); 
?>

for example:

<head>
<title>Webpage</title>
<?php 
$booster->css_source = '../css'; //relative path from inside booster folder
echo $booster->css_markup(); 
?>
</head>

The argument is the path relativ to CSS-JS-Booster’s folder.

For the JS-part, put all releveant JS-files into a subfolder js of your
site.

If you have multiple JS-files rename them so that they are alphabetically
sorted in the desired order, e.g.:

01_first.js
02_second.js
03_third.js

Then add this declaration either in the HTML’s head-section, or – better for
performance and therefore recommended when you experience no errors – right
before the closing

Something went wrong with that request. Please try again.