CSS-JS-Booster
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
:
<?php
$booster->js_source = '../js'; //relative path from inside booster folder
echo $booster->js_markup();
?>
for example:
<?php
$booster->js_source = '../js'; //relative path from inside booster folder
echo $booster->js_markup();
?>
</body>
</html>
The argument is the path relativ to CSS-JS-Booster’s folder.
Notice: Don’t worry if on the very first call of your page your Javascript
doesn’t get loaded or your page takes long time to load. This is normal as
this is the delay caused by Google’s Closure compiler shrinking the scripts.
Once it has been successfully shrinked it won’t be shrinked again as long as
you do not change your Javascript.
