CSS JS Booster

h1. CSS-JS-Booster

!http://www.der-schepp.de/css-js-booster-github.jpg!

Copyright (C) 2010 Christian "Schepp" Schaefer "http://twitter.com/derSchepp":http://twitter.com/derSchepp

h1. 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":http://farhadi.ir/works/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":http://www.web-optimizer.us/ 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":http://www.aptimize.com/

Just to have mentioned those...

h1. System Requirements

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

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

bc.

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:

bc. 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:

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

for example:

bc.

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