We all are aware of CDN and how it helps to decrease the
page load times. But what hinders its popularity is that most of
CDN services
are paid. As we discussed in our previous article, Amazon S3 is considered to
be one of the most cost-effective CDN solutions for WordPress. But then again,
you need to pay for S3 account. What if there was a free CDN?
This is where you may actually start to consider using
Dropbox as a free CDN to serve all those static files in your WordPress blog.
Since recently, people have been using Dropbox as a free CDN for hosting their
WordPress static content like the JS, CSS and image files. Here is a short
walk-through on how you can use your free Dropbox account as a CDN.
The first steps involve downloading all of your site’s
static files (i.e. the files inside wp-content and wp-includes folders in
WordPress). Then need have to upload all these files to your Dropbox. Then you
can link to particular files from your site. But the linking thing is pretty
much lengthy that you may need a Plugin to do that. WP Super Cache is an
amazing plugin that can be used for this purpose. I guess all the WordPress
users use it, so it would be easier working on it. But if you don’t, or you
need better integration with Dropbox and a hassle free setup, then you can use
the new Dropbox CDN plugin for just that. Depending on which plugin you want to
use, we have split the procedure into two:
#1 : Using WP Super Cache plugin
In case you don’t have it already, download the WP Super
Cache plugin from here and install it.
Download the wp-content and wp-includes folders (you can
skip .php files) from WordPress.
Create a new Directory e.g. CDN in your Dropbox public
folder. (If you don’t have a Dropbox account sign-up here) and upload all your
WordPress files into this folder.
Create a new sub-domain e.g. cdn.example.com. (Learn why to
create a sub-domain and what to do if you don’t want to create sub-domain in
the following section).
Open your site’s file manager and locate the directory CDN.
Once inside it, create a new file named .htaccess and add the following code
into it. (Replace ID with your Dropbox ID)
"Redirect 301 / http://dl.dropbox.com/u/ID/cdn/"
Open the Super Cache plugin’s settings page and click on the
CDN tab. Enter the url to sub-domain you created in step 3.
Click on Save button
and you are done.
Why a Sub-Domain? I don’t want to create a sub-domain!
The sub-domain thing is entirely optional. But we prefer you
use it because it keeps the URLs clean and is also better for branding. Though
if you are sure you don’t want to create a sub-domain then you can do the
following:
1. Skip 3rd and 4th step.
2. Open the Super Cache CDN settings page, navigate to
Off-site URL, and give the path to your folder in Dropbox where all the files
would be uploaded.
#2 : Using Dropbox CDN plugin
There’s a new WordPress plugin in town that can help you
deploy all those static files associated with your WordPress theme to Dropbox
effortlessly. It works something like this. You will make a new folder inside
the Public folder of your Dropbox. Now you should duplicate your WordPress
theme folder structure within this folder. Next, copy the URL of this public
folder and enter this info in the Dropbox CDN plugin page. Follow these steps:
1) Install the Dropbox CDN WordPress plugin. Click to
activate it.
2) Navigate to the Public folder of your Dropbox and create
a new folder with the name you have chosen, e.g. cdn.
3) Now go to the Cpanel of your web host and download the
entire directory wp-content to Dropbox.
This can be done easily if you could locate that folder from within the
file manager, compress that folder and download it. You can then extract that
zipped folder into your Dropbox CDN folder.
4) You need to copy
the url of the public folder in Dropbox to which you uploaded you blog files
and paste it in the plugin.
Note:
Dropbox CDN plugin may not support WordPress themes in which
the file paths are hard-coded. Check the header.php file of the theme in use to
make sure that they use standard functions like
bloginfo(‘stylesheet_directory’), etc. to echo static file names.
After completion of these steps, all of your static files
would then be hosted on Dropbox. Whenever you make any changes to wp-content
and wp-includes folders (except those in php files), you must also propagate
these changes to the files hosted on Dropbox. For example, if you upload any
image to your WordPress site, you must also upload the images to the Dropbox
folder.
Conclusion:
You will be surprised to know that Dropbox lowers the site’s
load time by upto 4 times. In my site which often took around 6.2 seconds to
load, after using Dropbox CDN, the load time got lowered to just 1.6 seconds.
That’s exactly 4.08 times lower. Some other advantages of using Dropbox as CDN
are that, since it is free, it lowers down the site’s bandwidth.
Look at the screenshot below to see the how fast our site on
Dropbox loads compared to other CDN servers.