Home > Blog > Taking my CakePHP Site from a Yslow F to an A

Taking my CakePHP Site from a Yslow F to an A

by Will on Oct 27th 2010, 08:35

This morning, I had an unexpected couple of hours to kill since the surf was flat and my client project got killed. I decided to polish up the site with a bit of speed optimisation. My YSlow score was an F, for fail.

1st up, I knew i needed to get mark storys asset compress up and running. I had tried before, but to no avail: (thats me, floundering at the bottom.)

So, download and unzip the asset_compress plugin to /app/plugins

Open the ini file supplied and add in filters to minimise javascript and CSS

Show Plain Text

filters[] = JsMin
and
filters[] = CssMin

And download the compression classes here and here.
Looking in the plugins source code, you can see where to put the classes. /app/vendors/CssMin/CssMin.php and /app/vendors/JSMin/JSMin.php

Now add the routes into your routes.php file:

Show Plain Text

Router::connect('/cache_css/*', array('plugin' => 'asset_compress', 'controller' => 'css_files', 'action' => 'get'));
Router::connect('/cache_js/*', array('plugin' => 'asset_compress', 'controller' => 'js_files', 'action' => 'get'));

To add the files in your layout file (probably default.ctp), replace the trusty $html->css and $html->js calls with:

Show Plain Text

$assetCompress->script('jquery');
$assetCompress->script('jquery.ui.min');

etc for the css and then for js:

Show Plain Text

$assetCompress->css('reset');
$assetCompress->css('960');
$assetCompress->css('text');
$assetCompress->css('site');
$assetCompress->css('styles');
$assetCompress->css('tractor');

(you can see why i knew sticking them together and squishing them was a good idea!)
Now to output the compressed files:

Show Plain Text

echo $assetCompress->includeCss();��
echo $scripts_for_layout;
And <a href="http://developer.yahoo.com/performance/rules.html)" target="_blank">add the js at the bottom</a>

Show Plain Text

echo $assetCompress->includeJs();
Now that the Javascript files are included at the bottom of the page, dependent scripts entered into the view files won't work.� A good example being the jquery watermark code i had chucked into my signup element.

A quick squizz at the cookbook shows how to put your scripts in the buffer:

Show Plain Text

$a� = "jQuery(function($){
�� $(\"#UserUsername\").watermark(\"Your Name\");
�� $(\"#UserEmail\").watermark(\"Your Email\");
});";
$this->Js->buffer($a);

and now put this:

Show Plain Text

echo $this->Js->writeBuffer();

at the bottom of the layout ctp, below includeJs so that likely dependencies are dealt with.
Ok. I'm done. Its made a massive difference....I'm on a C. C?! I want an A!!!
Over to my .htaccess file for some further tweaking: Following the YSlow instructions for each F i was getting;

Show Plain Text

#disable ETags
Header unset ETag
FileETag none
#Some headers and caching stuff to help improve user QoE
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 minutes"
ExpiresByType image/gif A2764800
ExpiresByType image/png A2764800
ExpiresByType image/jpg A2764800
ExpiresByType image/jpeg A2764800
ExpiresByType image/x-icon A2764800
ExpiresByType text/css A2764800
ExpiresByType text/javascript A2764800
ExpiresByType application/js A2764800
ExpiresByType application/javascript A2764800
ExpiresByType application/x-javascript A2764800
ExpiresByType application/x-shockwave-flash A2764800
</IfModule>
#Gzip compress some content types
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript
</IfModule>

And now I'm on...B. B for boo. what else can I do?
Oh, turn off debugging to exclude the toolbar. hay presto! A. And a 100 score from google page speed. Win!

Bonus:, to add compress to your admin area, target the build file like this:

Show Plain Text

$assetCompress->css('reset', 'admin');
echo $assetCompress->includeCss('admin');

Special thanks to Mark, awesome awesome work.

Taking my CakePHP Site from a Yslow F to an A cakephp