forked from Schepp/CSS-JS-Booster
-
Notifications
You must be signed in to change notification settings - Fork 1
An easy to use PHP-Library that combines, optimizes, dataURI-fies, re-splits, compresses and caches your CSS and JS for quicker loading times
License
hyperNURb/CSS-JS-Booster
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Copyright (C) 2009 Christian "Schepp" Schaefer http://twitter.com/derSchepp ---------------------------------------------------------------------------- Important notice ---------------------------------------------------------------------------- This piece of code has just been published so that others can start testing and/or using and/or enhancing it. I'd eat my hat if there aren't enough bugs left, especially regarding absolute/relative paths when linking and including and so on. That's what the testing is good for (and no, I don't wear no hat...) 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 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 - 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 - GZIP-compress the resulting JS - Have browsers cache the result as long as it remains unchanged + GZIP-compress the page itself from where those files are called. 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! There is a nifty piece of software built by some smart people over in russia called "Web Optimizer" at http://www.web-optimizer.us/ that does what CSS-JS-Booster does, and a little lot more. And there are Wordpress and Joomla-Plugins. It is priced quite reasonable at $99. 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... ---------------------------------------------------------------------------- Basic Usage ---------------------------------------------------------------------------- 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 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_dir = 'css'; echo $booster->css_markup(); ?> for example: <head> <title>Webpage</title> <?php $booster->css_dir = '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 </body>: <?php $booster->js_dir = 'js'; echo $booster->js_markup(); ?> for example: <?php $booster->js_dir = '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'. ---------------------------------------------------------------------------- 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_dir = 'css_1,css_2'; echo $booster->css_markup(); or $booster->js_dir = 'js_1,js_2'; echo $booster->js_markup(); Q: For CSS, how can I define a different/specific target-medium? A: Yepp, 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_dir = '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, can I have it output in HTML 4.01 fashion? A: No problem, do this: $booster->css_markuptype = 'HTML'; 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: - Turns off ETags - Adds aggressive caching for all sort of assets like images/favicon/flash ---------------------------------------------------------------------------- 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 is done with Paul Scott's script taken from 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.fontsquirrel.com/fonts/Sansation 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
About
An easy to use PHP-Library that combines, optimizes, dataURI-fies, re-splits, compresses and caches your CSS and JS for quicker loading times
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published