Minifying JS and CSS

Quite recently I had to build a community website with a large attention to media, and content from various sources. I therefore searches the web for possibilities to  enhance speed of delivering data to the user.

What quickly come to my attention were the firefox addon’s  available for that task.

Especially

- Page Speed, developed by Google

- and (even better in my opinion) YSlow

One of the many hints they give, for limiting data traffic, is to gzip and compress JavaScript as well as CSS used on your page. One of the many tools that I found was minify developed by Ryan and Steve Clay, which really has it all (gzip, compression, caching, etc.). Since I’m developing with CakePHP by now I stumpled over a little helper that replaces the standard JavaScript helper and uses minify instead.

One thing I was missing here was the ability to insert JavaScript/CSS from within a view, that not all JavaScript/CSS code is served on every single request, but only the pieces that are really used.

Here is what I ended up with:

<?php
/***
 * Cakephp view helper to interface with http://code.google.com/p/minify/ project.
 * Minify: Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.
 * @author: Ketan Shah - ketan.shah@gmail.com - http://www.innovatechnologies.in
 * Requirements: An entry in core.php - "MinifyAsset" - value of which is either set 'true' or 'false'. False would be usually set during development and/or debugging. True should be set in production mode.
 */

Class MinifyHelper extends AppHelper{

 var $inlineAssets = array('js'=>array(),'css'=>array());

 var $helpers = array('Javascript','Html'); //used for seamless degradation when MinifyAsset is set to false;

 function js($assets,$inline = true){
 if(Configure::read('MinifyAsset')){
 if(!$inline){
 if(!is_array($assets))
 $assets = array($assets);
 $this->inlineAssets['js'] = array_merge($this->inlineAssets['js'],$assets);
 }
 else
 e(sprintf("<script type='text/javascript' src='%s'></script>",$this->_path($assets, 'js')));
 }
 else{
 e($this->Javascript->link($assets,$inline));
 }
 }

 function css($assets,$inline = true){
 if(Configure::read('MinifyAsset')){
 if(!$inline){
 if(!is_array($assets))
 $assets = array($assets);
 $this->inlineAssets['css'] = array_merge($this->inlineAssets['css'],$assets);
 }else{
 e(sprintf("<link type='text/css' rel='stylesheet' href='%s' />",$this->_path($assets, 'css')));
 }
 }
 else{
 e($this->Html->css($assets));
 }
 }

 function _path($assets, $ext){
 if(!empty($this->inlineAssets[$ext])){
 $assets = array_merge($assets,$this->inlineAssets[$ext]);
 $this->inlineAssets[$ext] = array();
 }
 $path = $this->webroot . "min/?b=$ext&f=";
 foreach($assets as $asset){
 $path .= ($asset . ".$ext,");
 }
 return substr($path, 0, count($path)-2);
 }
 }

?>

Now you can use the minify helper like this

echo $minify->js(array('...'),false);
echo $minify->css(array('...'),false);

in you views, and saves further data traffic.