Skip to content

Latest commit

 

History

History
executable file
·
420 lines (272 loc) · 13.2 KB

README.textile

File metadata and controls

executable file
·
420 lines (272 loc) · 13.2 KB
Raw

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 :

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

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();

or

$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 from 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 and JS tags, can I have its output-markup in HTML 4.01 fashion?
A: No problem, do this:

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

or

$booster->markuptype = 'HTML';
echo $booster->js_markup();

Q: Can I stop CSS-JS-Booster to cleanup the cache folder on sundays?
A: Yes, just configure this:

$booster->booster_cachedir_autocleanup = FALSE;

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: I would like to have YUI Compressor to minify my CSS locally. Is that
possible?
A: Yes, it is possible, as long as you have a dedicated server with Java
installed:

$booster->css_hosted_minifier = TRUE;
echo $booster->css_markup();

Please note that this feature is still alpha and possibly buggy!

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: The JS-minification through the Google webservice takes too long.
Can I have a local Google Closure minifier instead?
A: Yes, you can, as long as you have a dedicated server with Java installed:

$booster->js_hosted_minifier = TRUE;
echo $booster->js_markup();

Please note that this feature is still alpha and possibly buggy!

Q: I would like to make use of the async and/or defer attributes for JS.
Is there a way to enable them?
A: Yes, you can set the mode easily. Just remember that when Booster detects
any document.write inside your script, it will ommit those attributes.

This will set the async, and as fallback for older browsers defer attribute:

$booster->js_executionmode = "async";
echo $booster->js_markup();

This will set the defer attribute:

$booster->js_executionmode = "defer";
echo $booster->js_markup();

Please note: if CSS-JS-Booster detects a document.write inside JavaScript
it will omit async and defer as both conflict with document.write.

Q: I would like to make use of the onload attribute for JS (like for example
together with the async and/or defer attributes). How?
A: This will fill the onload attribute with the function “initialize();”:

$booster->js_onload = "initialize();";
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, that’s hard. In this case turn debug-mode on before outputting:

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

Q: Can I have CSS with big inlined images lazyload on DOM ready?
A: Yes, just set the following parameter:

$booster->css_lazyload = TRUE;

In an ideal way you would split your image-heavy CSS apart from your normal CSS
and just load that one later:

$booster = new Booster();
$booster->css_source = 'styles_without_images.css';
echo $booster->css_markup();
$booster->css_source = 'styles_with_images.css';
$booster->css_lazyload = TRUE;
echo $booster->css_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

JSMin is origined from here:
http://www.crockford.com/javascript/jsmin.html

YUI Compressor comes from here:
http://developer.yahoo.com/yui/compressor/
All code specific to YUI Compressor is issued under a BSD license.

Google Closure Compiler originates from here:
http://code.google.com/intl/de-DE/closure/compiler/
Licensed under the Apache License, Version 2.0 (the “License”);

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

cufon 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