Using a CDN for static content

[sparkynet]

Some may call this a hack, but it reduced my server load to one HTTP request per page and so I thought I'd share it. It requires some advanced understanding and the ability to make a one-line edit to a source file.

Standard disclaimer here - backup your installation before performing this mod.

Folks, there are many advantages of using a CDN to serve up your static content. If you've looked closely at your server logs, you'll see that most vBulletin pages hit the server a number of times. There is lots of eye candy in vb4 and most of it is done with background images and javascript. When a page loads, the server responds with the HTML first, and then as the browser parses the result, it returns to the server to fetch images and scripts that are specified on the page. There can be dozens of hits to your server to satisfy a single page hit. Since most of this content is static and seldom, if ever, changes, then it presents an opportunity to move it to a CDN and significantly offload your server.

I'm using Amazon S3 as my CDN. The same applies for those using Amazon Cloudfront or any available CDN service. The technique I'm presenting here involves an optional one-line change to the vBulletin source code. After performing this mod, my server is now hit just once for most pages!

First, get your CDN account and upload vB's static content.

Let's assume that the URL to your cdn is: http://cdn.example.com

In your CDN account, create a folder named 'static', e.g. http://cdn.example.com/static

Next, copy the entire contents of the 'clientscript' and 'images' folders from your vBulletin home directory to the CDN so that they now exist there:

http://cdn.example.com/static/clientscript
http://cdn.example.com/static/images

Next, create the necessary replacement variables to use the CDN.
From the Admin CP, choose Styles and Templates -> Replacement Variable Manager

Click on "Add New Replacement Variable" and, one by one, add the
following replacments. Pay close attention to the quote marks as there
is only one in each case.

Search for: href="clientscript
Replace with: href="http://cdn.example.com/static/clientscript

Search for: http://(your_host_name)/clientscript
Replace with: http://cdn.example.com/static/clientscript

Search for: src="clientscript
Replace with: src="http://cdn.example.com/static/clientscript

Search for: src="images
Replace with: src="http://cdn.example.com/static/images

Now, that done, you're already serving a great many images and scripts from the CDN and your server hits will drop appreciably. Still, however, there are bits of code embedded in the vbulletin CSS files which contain references back to the server. These are in the form of "url(http://example.com/images..."

The replacement variable manager of vBulletin does not filter the css scripts. Perhaps that's a future feature request. In the meantime, replacement variable substitution can be added with a single line of code, and best of all, it only runs once.

Now the part which I hated the most: altering the vB source code. Fortunately, it takes just a single line to incorporate the replacement variable manager into the css stream. Here goes:

In the file /includes/adminfunctions_template.php, locate the function called
"write_css_file"

At the beginning of this function, add this line:

$contents = process_replacement_vars($contents);

Save the file and you're done with the code modification.

Now, go back to the Replacement Variable Manager and add these final
two replacements:

Search for: url(http://(your server name)/images
Replace with: url(http://cdn.example.com/static/images

Search for: url('http://(your server name)/images
Replace with: url('http://cdn.example.com/static/images

Note that although these two replacements look similar, they differ by the
placement of a single quote (') mark, which is necessary.

Next, make sure that the folder /(forum home)/clientscript/vbulletin_css exists and that it is writable by the web server. I just did a 'chmod 0777' on mine.

Next, go into the Admin CP and choose Settings->Options and then choose
Style and Language Settings

Under Style and Language, look for "Store CSS Stylesheets as Files".
If this is set to 'Yes', change it to 'No' and then click 'Save'. Then,
change it to 'Yes' and click 'Save' again. The transition from 'No' to 'Yes'
causes vB to write out all of the CSS files to the "vbulletin_css" folder and
in the process, run them through the replacement variable filter. This is
why you must click 'No', followed by 'Yes', if you were already using this option.
Otherwise, just change from No to Yes and then Save.

If you examine the CSS files in the /clientscript/vbulletin_css/ folder, note that all of the
"url()" settings reference the your CDN server. If not then something went wrong.

If everything went well, then upload the /(forum home)/clientscript/vbulletin_css folder to your CDN so that the clients will start using the modified CSS.


Note: should you make any style changes from the AdminCP you'll need to toggle the "Store CSS Stylesheets as Files" option OFF and then back ON to rewrite the CSS files, and then re-upload the vbulletin_css folder to the server.

Also note that I have set "Allow Users to Change Styles" to NO, because I didn't want to investigate how their changes would need to be uploaded to CDN. Having just one style does simplify things. I don't know if multiple administrator defined styles would work, but I suspect that it would.

Want to see how well it's working? Two things you can check: your server's access.log
(if available), or, get Firefox and pull up your web page. Right click on the page and
choose 'Page Info' and then choose the 'Media' tab. There, you can see which images
(hopefully all of them) loaded from your CDN.

As I mentioned before, this worked great for me, although I did spend 2 days figuring it out. Your mileage may vary :-)

[sivaganeshk]

I can use the same for using google storage?
https://sandbox.google.com/storage/
(Google storage is in beta version available on request. I have an account)

--------------- Added [DATE]1295769269[/DATE] at [TIME]1295769269[/TIME] ---------------

Also How to configure cdn.mysite.com to Google or Amazon S3?

[Sadikb]

Many many many thanks for this sparky... u just saved me a day's work...

Thank You!

[Brandon Sheley]

thanks for the writeup, I had a CDN enabled but disabled it recently because it was slowing the site down for some of the members.

[Roonis]

The first part went with out a hitch. Many thanks!

but the second part is not yielding the results im looking for. I added the script as seen below.

function write_css_file($filename, $contents)
{
$contents = process_replacement_vars($contents);
// attempt to write new css file - store in database if unable to write file
if ($fp = @fopen(DIR . "/$filename", 'wb') AND !is_demo_mode())
{

And i used the rewrites exactly as posted
When i turn on the store css sheets as files on and off the links in the files are still the old forum links. NOT the cdn links

Any ideas??

[prandah]

hello
thanks for writing this tutorial
how to use cdn for the style ?
because my style on root "digitalvb/pacify/"

[tbworld]

Thank you for sharing. I am going to look into your method and compare it to mine. I will post the results to reciprocate. Thanks again