This asset host helper (in my case made specifically to help with Amazon’s CloudFront service) can be used to improve page load speed, by using dedicated asset servers.
For now the considered assets are: images, JavaScript files, and style sheets.
The whole idea was inspired by RoR asset helper:
http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html
(Please give this link a read to fully understand the purpose behind this whole thing).
If you are lazy, like me, I’ll give you a few bullet points to consider:
- By default all assets are loaded from the server’s local filesystem
- Using this helper you can direct CakePHP to link to assets from a dedicated asset server(s)
- This helps to improve page load speeds and alleviate the server from dealing with static assets
- Browsers typically open at most two simultaneous connections to a single host, which means your assets often have to wait for other assets to finish downloading
- Setup more than one host to avoid the issue above
- To do this, you can either setup actual hosts, or you can use wildcard DNS to CNAME the wildcard to a single asset host. You can read more about setting up your DNS CNAME records from your ISP
- It is suggested to use host names like: assets0.example.com, assets1.example.com, assets2.example.com, etc. (Depending on how heavy your traffic is, 4 hosts should be OK… add more if needed)
Now onto some features…
Obviously, be sure to download and save the helper into app/views/helpers/cf.php
(And include it in your App Controller’s helpers array)
It works exactly the same (including all options) as core Html and JavaScript helpers.
When in production mode the files are loaded from dedicated asset hosts, when in development mode the files are loaded from the local file system.
Keep the paths on the remote and local file systems the same. It will make your life so much easier and won’t break the helper ;)
Examples:
<?php echo $cf->image('icons/test.png'); ?>
//include image with some options
<?php echo $cf->image('test.png', array('id' => 'some-image')); ?>
//include multiple JS files at once
<?php echo $cf->jsLink(array('file_one.js', 'file_two.js')); ?>
//include single JS file
<?php echo $cf->jsLink('single_file.js'); ?>
//include single CSS file
<?php echo $cf->css('test.css'); ?>
//include multiple CSS files
<?php echo $cf->css(array('test.css', 'test2.css')); ?>
//include files from the view with false param (i.e. not in-line, but in the head of the page)
//CSS and JavaScript
<?php $cf->jsLink('not_inline.js', FALSE); ?>
<?php $cf->css('not_inline.css', NULL, NULL, FALSE); ?>
What about settings?
You will need provide your own dedicated asset host(s). See the helper comments or the link above to RoR API for details on how it should be set.
You will need provide a dedicated SSL asset host. At least, it is highly recommended to have one.
Be sure to force time stamps in core.php to ensure proper caching.
Please do not hesitate to ask any questions, your input and comments are greatly appreciated!
The code is relatively well documented, the helper is here:
http://github.com/teknoid/cakephp-asset-host-helper
P.S. Take a look here for more info about CloudFront and how it can help improve your app:
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=2331
