Since my first post seemed to garner a good amount of attention I thought I’d follow up with another post on how to optimize our CSS/JS view helper components a bit.

The biggest suggestion — and rightfully so, was to minify or gzip the extra controller/action Javascript or CSS file.
It doesn’t take a lot of imagination to implement an improvement. There are several easy ways we can prevent the client (our users) from needing to download another CSS or JS file to view a particular controller action.

Firstly, we can get both the CSS and JS files to output in-line instead of loading as a separate file very easily:

File: /application/views/helpers/JavascriptHelper.php

getRequest();
		$file_uri = 'media/js/' . $request->getControllerName() . '/' . $request->getActionName() . '.js';

		if (file_exists($file_uri)) {
			$this->view->headScript()->appendScript('/' . $file_uri);
		}
	}
}

In the CSS helper, we’ll use the HeadStyle helper instead of the HeadLink helper:

File: /application/views/helpers/CssHelper.php

getRequest();
		$file_uri = 'media/css/' . $request->getControllerName() . '/' . $request->getActionName() . '.css';

		if (file_exists($file_uri)) {
			$this->view->headStyle()->appendStyle(file_get_contents($file_uri));
		}

		return $this->view->headStyle();

	}
}

If you were using the previous version of the CSS helper, make sure you update your layout to echo the HeadStyle helper. Be aware that the file references (e.g., background images) in your controller / action CSS files will now have a new base URL, so you will need to update accordingly.

The next level – minifying the inline output

The next obvious step is to minify the additional output. My first inclination was to use the CSS/JS minify library aptly titled minify, however, that does a lot more than we need. I’m not a big fan of adding large libraries for the sake of one function, so let’s instead explore how we can create exactly what we need within our view helper.

A little more googling gets us to this solution. Sure, it’s not perfect, but performing 90% of the necessary packing is good for me.
My CSS view helper now turns into this:

File: /application/views/helpers/CssHelper.php

getRequest();
		$file_uri = 'media/css/' . $request->getControllerName() . '/' . $request->getActionName() . '.css';

		if (file_exists($file_uri)) {
			$css = $this->minify(file_get_contents($file_uri));

			$this->view->headStyle()->appendStyle($css);
		}
		return $this->view->headStyle();
	}

	function minify($css) {
		// 90% minifying from http://www.lateralcode.com/css-minifer/
		$css = preg_replace('#\s+#',' ',$css);
		$css = preg_replace('#/\*.*?\*/#s','',$css);
		$css = str_replace('; ',';',$css);
		$css = str_replace(': ',':',$css);
		$css = str_replace(' {','{',$css);
		$css = str_replace('{ ','{',$css);
		$css = str_replace(', ',',',$css);
		$css = str_replace('} ','}',$css);
		$css = str_replace(';}','}',$css);
		return trim($css);
	}

}

For the JS packer, we’ll use Dean Edward’s Javascript Packer that was ported to PHP by Nicolas Martin. You can download the class here:

Download Javascript Packer by Dean Edward

I added the JS packer to /library/jspacker/JavaScriptPacker.php. I modify my JavaScript helper by doing the following:

File: /application/views/helpers/JavascriptHelper.php

getRequest();
		$file_uri = 'media/js/' . $request->getControllerName() . '/' . $request->getActionName() . '.js';

		if (file_exists($file_uri)) {
			$javascript = file_get_contents($file_uri);
			require_once('jspacker/JavaScriptPacker.php');

			$packer = new JavaScriptPacker($javascript);
			$this->view->headScript()->appendScript($packer->pack());

			return $this->view->headScript();
		}
	}
}

The major disadvantage to this is debugging can be a pain when you don’t have line numbers or variable names to reference. Thus, I added a conditional statement that only packs the Javascript if not in the development environment:

$javascript = file_get_contents($file_uri);
if (APPLICATION_ENV != 'development') {
	$packer = new JavaScriptPacker($javascript);
	$javascript = $packer->pack();
}
$this->view->headScript()->appendScript($javascript);

Presto! Auto-minifying, auto-packing inline Javascript and CSS only when we need it for our controller/actions.

Next steps? I suspect our next step is to add some server side caching so all this parsing doesn’t happen in real time at the client’s expense. Look for a short part 3 using Zend_Cache very soon.

Questions, comments? Please feel free to leave them below!