In our effort to make Joomla as fast as possible we have researched and learned all about adding Joomla to a Content Delivery Network (CDN). Since Joomla Hosting Reviews (this site) is running on the Rochen CDN it seemed best to start with a "Rochen CDN step by step guide." More articles to come.
First lets talk about what static elements we want to add to the Rochen CDN.
- Template CSS & Images
- Main image folder: /images
By focusing on these two items it will keep things simple and be a great place to start.
Once you get a good feel for the CDN process you may want to add additional element such as javascript, extension specific images and CSS to your CDN.
Phase 1. Get CDN access & confirm it works
1.1 Get access to the Rochen CDN.
First you will need to be a Rochen customer and request to have your site added to the CDN. Currently the price for 250GB of transfer will is $60/month. This is not a widely promoted product but it is a great one.
Once you are set up with Rochen you will see a /cdn folder in your Joomla Install. All files that are placed in the /cdn folder will get pushed out to the Rochen CDN.
1.2 Upload test images.
Upload the images to the /cdn folder and then view them through http://cdn.yoursite.com/ If you can not see the images there is an issue, and you will need to contact Rochen to get it worked out. If you can see the test images you uploaded you are good to go and ready to move onto the next phase.
You can see the Joomla Hosting Reviews CDN at http://cdn.joomlahostingreviews.com
If it appears blank it is because I have uploaded a blank index.html file for added security.
Phase 2. Add Template images & CSS to the CDN
2.1 Create a template folder called /cdn/tmpl
This is the folder where you template elements will be stored. We will be adding two sub-folders to store template images and template css.
2.2 Create symlink from /cdn/tmpl/images/ to /templates/%your-template%/images/
- cd path/to/root/folder/cdn
- ln - s path/to/your/template/folder/images images
The idea here is to allow the CDN access to your template image folder with out having to move its location in the file structure.
By using symlinks the image location is not moving just linking to them. Allowing you to keep a single copy of the images.
This enables you to have only one copy the files. If you ever decide to remove the CDN then your Joomla file structure has not been changed.
You may need Rochen tech support to help.
2.3 Create symlink from /cdn/tmpl/css to /templates/%your-template%/css/
- cd path/to/root/folder/cdn
- ln - s path/to/your/template/folder/css css
Again you may need Rochen tech support to help with this. This is the same process as for step 2.2
2.4 Confirm that /tmpl/images and /tmpl/css are visible through the Rochen CDN.
Go to http://cdn.yoursite.com/tmpl/css/someimage.jpg can you see the image? If so all is working correctly.
If you can not see images then the next step will break you site.
2.4 Update your template index.php to reflect the new Rochen CDN image and css locations.
For this step you will want to change css the image references. Example:
<link rel="stylesheet" href="/templates/%your-template%/css/template.css" type="text/css" />
becomes
<link rel="stylesheet" href="http://cdn.joomlahostingreviews.com/tmpl/css/template.css" type="text/css" />
It is good practice to make a copy of your index.php file before you make the CDN reference updates. This way the modified version can be replaced with the original file in case you want to take you site off of the CDN.
Repeat for all template images and template CSS files
2.5 Confirm that your template images and CSS are being pulled from the CDN
Troubleshooting
- If you are having trouble try changing one element at a time and confirming to see if the element is being pulled from the CDN.
- be sure CSS is using the relative location for the images folder ../images/ folder location
- Watch out for the Cache if you have it turned on.
Phase 3. Add /images folder to the CDN
In this phase we move article images and other images to the CDN.
This can be done manually by editing each article, but this is very time consuming. If you ever take your site off the CDN then you will have to change all of the articles back to their original state. An automated solution is much more efficient.
We were not able to find any CDN specific extension, but Rereplacer from Nonumber.nl does exactly what we need it to.
3.1 Symlink the /images folder to /cdn/images
This is the same process as when we move the template images and css folder. Again you may need Rochen tech support for assistance.
3.2 Confirm that you can see the /images folder through the CDN
Go to http://cdn.yoursite.com/images/stories/someimage.jpg to view an image. If you can see the image the CDN is working.
3.3 Download and install the Rereplacer extension.
Rereplacer will be used to update the image location in the html output.
Images originally located in /images/stories/.... folder we will be updated to http://cdn.yoursite.com/images/stories/... This all happens automatically and can be turned off and on with out breaking your site, saving you lots of time and headaches.
Download Rereplacer:
http://www.nonumber.nl/extensions/rereplacer
Support the developer: If you end up using Rereplacer on a production site be sure to purchase it and support Peter so he is able to continue to develop these great extensions.
3.4 Set up your rereplacer rules.
You will need to do some reading to figure out the replacement rules for you site. The rules I used:
Search: {noreplace}http://www.joomlahostingreviews.com/images/stories/,src="/images/stories/{/noreplace}
Replace: http://cdn.joomlahostingreviews.com/images/stories/, src="http://cdn.joomlahostingreviews.com/images/stories/
3.5 Confirm that your image are being pulled from the CDN
Right click and view source to see the location of the images. You can also right click on an image to view it an check the image url. It should be from http://cdn.yoursite.com
Troubleshooting
- ReReplacer can get complicated you can get support from the NoNumber forums.
- Make sure that the Rereplacer plugin is published.
- If the CDN is not working correctly take it one step at a time.
Conclusion
Now that you have your site setup on a CDN you may want to contact your visitors far from the server location to see if the pages load faster. If you are a Firefox/Firebug/Yslow user, check Yslow to see if your score has increased.
If you have any suggestions or question you can ask them in this thread. Like you I was new to CDN's and figured all of this after lots of reading and posting questions.
I would love to hear any thoughts or suggestions on this tutorial
Ask a question in the Joomla Hosting Forum
Read/Ask questions in the Rochen Joomla CDN Thread
