Schepp / CSS-JS-Booster

Branches (1)
- master ✓
Tags (0)

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. — Read more

http://twitter.com/derSchepp

This URL has Read+Write access

Added WP-Code to modify htaccess

Schepp (author)

Thu Feb 04 06:32:55 -0800 2010

commit 57bb7d818f8cd4ce4495d16ff430b1a907d013ba
tree 3622292056c45577d0a9b1329ff072670205f3d7
parent 3b0e4c1c5373bc17d1fdeffec574eab0e4bdd1bd

CSS-JS-Booster /

name	age	history message
README.textile	Mon Feb 01 14:46:52 -0800 2010	Added Javascript-minification through Google Cl... [Schepp]
booster/	Thu Feb 04 06:32:55 -0800 2010	Added WP-Code to modify htaccess Signed-off-by... [Schepp]
examples/	Fri Jan 08 02:21:28 -0800 2010	Extended tests and examples to better find bugs... [Schepp]
htaccess/	Mon Dec 07 07:21:24 -0800 2009	Implemented Stoyan's solution for MHTML under I... [Schepp]
license.txt	Tue Oct 06 04:07:10 -0700 2009	Added a copy of the license to the root folder ... [Schepp]
testcases/	Fri Jan 08 02:21:28 -0800 2010	Extended tests and examples to better find bugs... [Schepp]

README.textile

Important notice

This piece of code is still fresh so that others can start testing
and/or using and/or enhancing it. That said, there shouldn’t be too many bugs
left. If you find some, contact me or open an issue in the bugtracker.

Not a bug is that I don’t plan to support browsers older than IE6SP2.
It’s also not intended to minify or further compress (like with Dean Edwards
packer) the JS, as I experienced a lot of trouble doing that.
Also most large JS-libraries/frameworks are already offered heavily minified.

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 HTTP-requests going down
optimize and minify CSS with CSSTidy
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 HTTP-requests going down
Minify the JS through the Google Closure Compiler Webservice (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';
echo $booster->css_markup(); 
?>

for example:

<head>
<title>Webpage</title>
<?php 
$booster->css_source = 'css';
echo $booster->css_markup(); 
?>
</head>

The argument is the path relativ to the file calling that function. If you
are in a subfolder it should read ../css.

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';
echo $booster->js_markup(); 
?>

for example:

<?php 
$booster->js_source = 'js';
echo $booster->js_markup(); 
?>
</body>
</html>

The argument is the path relativ to the file calling that function. If you
are in a subfolder it should read ../js.

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.

Q & A for Advanced Usage

Q: How can I combine files out of multiple CSS- or JS-folders?
A: By setting as directory argument a comma delimited list of folders:

$booster->css_source = 'css_1,css_2';
echo $booster->css_markup();

or an array

$booster->css_source = array('css_1','css_2');
echo $booster->css_markup();

The same holds true for JS:

$booster->js_source = 'js_1,js_2';
echo $booster->js_markup();

$booster->js_source = array('js_1','js_2');
echo $booster->js_markup();

Q: I don’t want to have CSS-JS-Booster to pull all the files from inside a
directory, nor do I want to rename the files alphabetically. I rather want
full control over which files to use. Is this possible?
A: Yes. $booster->css_source and $booster->js_source are very flexible in
what they accept as source. You don’t need to specify a folder, you can
also specify a single file, or multiple files (either comma-separated or as
genuine array). Here are some examples:

$booster->css_source = 'css_1/reset.css,css_1/base.css';
echo $booster->css_markup();

or as array

$booster->css_source = array('css_1/reset.css','css_1/base.css');
echo $booster->css_markup();

or files and folder mixed in an array:

$booster->css_source = array('css_1/reset.css','css_1/base.css','css_2');
echo $booster->css_markup();

Q: I don’t want to have CSS-JS-Booster to pull files form anywhere at all.
I rather want to pass it a CSS-/Javascript-string and have that optimized.
Is this possible?
A: Yes, $booster->css_source and $booster->js_source can now also accept
code-strings as source. But you have to switch the respective booster-part to
stringmode before by setting $booster->css_stringmode = TRUE; or
$booster->js_stringmode = TRUE;. Here is an example:

$booster = new Booster();
$booster->css_stringmode = TRUE;
$booster->css_source = '.div1 {
	display: block;
	width: 400px;
}';
echo $booster->css();

Q: For CSS, how can I define a different/specific target-medium?
A: By setting the desired media before echoing the markup:

$booster->css_media = 'screen,projection';
echo $booster->css_markup();

Q: For CSS, can I define a second folder to feed an alternate stylesheet?
A: Sure, e.g. like this:

$booster->css_source = 'css_1';
echo $booster->css_markup();
//
$booster->css_source = 'css_2';
$booster->css_rel = 'alternate stylesheet';
$booster->css_title = 'Alternate Stylesheet';
echo $booster->css_markup();

Q: For CSS, can I influence in how many even parts it gets split?
A: Nothing easier than this:

$booster->css_totalparts = 4;
echo $booster->css_markup();

Q: For JS, can I increase the number of parts it gets split into?
A: Yes, by setting the second argument:

$booster->js_totalparts = 2;
echo $booster->js_markup();

Q: For CSS link-tag, can I have its output-markup in HTML 4.01 fashion?
A: No problem, do this:

$booster->css_markuptype = 'HTML';
echo $booster->css_markup();

Q: The JS-minification seems to break my scripts. Can I disable it?
A: Yes, you can:

$booster->js_minify = FALSE;
echo $booster->js_markup();

Q: I need to debug CSS (e.g. in Firebug) or JS in the console – but I cannot
find anything due to dataURI-fication and minification…
A: Yes I know, that’s hard. In this case turn debug-mode on before outputting:

$booster->debug = TRUE;
echo $booster->css_markup();
echo $booster->js_markup();

.htaccess Acceleration

For an even further speed-boost, either add the contents of

/htaccess/.htaccess

to your existing .htaccess-file in your site’s root, or the file itself
shouldn’t you have any .htaccess-file installed in your site’s root yet.

Should you happen to get internal server error 500s, then something went
wrong with my .htaccess and you server-config.

What the .htaccess adds on top:

Turns off ETags
Adds aggressive caching for all sort of assets like images/favicon/flash

Wordpress Plugin

CSS-JS-Booster also works as a Wordpress plugin.

Installation

Copy the whole booster folder into wp-content/plugins/
Create a subfolder booster_cache inside wp-content/plugins/booster/ and CHMOD it to 0777 (write-permissions)
Go into the admin-panel to the plugins and activate “CSS-JS-Booster”
Copy the contents of the file htaccess/.htaccess and append them to the contents of the .htaccess-file in the root of your Wordpress-site

Compatibility with other plugins

CSS-JS-Booster may in rare cases break some other plugins.
I noticed for example that plugins trying to calculate file-paths based on the src-attribute of the script-tag break.
So you need to check yourself.

Copyright and License Information for 3rd party elements used in the scripts

CSSTidy 1.3 is taken from here:
http://csstidy.sourceforge.net/
You find its license inside booster’s csstidy-1.3-folder

Browser detection was rewritten based on work from Paul Scott found here:
http://www.phpclasses.org/browse/file/12369.html

Copyright and License Information for 3rd party elements used in example1

HTML and CSS Template named “Blog Division” is taken from here:
http://www.free-css.com/free-css-templates/page1/blog-division.php
You find its license inside example1’s root-folder

The Sansation Font is © 2008 Bernd Montag and taken from here:
http://www.free-css.com/free-css-templates/page1/blog-division.php
You find its license inside example1’s js-folder

cufón has its home here:
http://github.com/sorccu/cufon
You find its license inside example1’s js-folder

jQuery is taken from here:
http://code.google.com/p/jqueryjs/
You find its license inside example1’s js-folder