In order to improve connections for users from all over the world, Ghacks enabled a content delivery network (CDN) yesterday.
A CDN basically stores files and information on mirror servers all around the world in order to serve data to users from locations closest to them.
This speeds up the connection process noticeably. In its simplest form a content delivery network is nothing more than additional servers that are serving data necessary to access the website.
The first part of this tutorial describes how to use a content delivery network in WordPress. It details the requirements needed to install the CDN properly. The second part will cover the configuration of the CDN in WordPress.
Setting Up A Content Delivery Network In WordPress
WordPress does not have options to enable a CDN, however plugins and third party tools can be used to enable that functionality. Here are the scripts and services needed to configure the content delivery network as we did here at ghacks.net:
- Install the WordPress plugin W3 Total Cache. This plugin is one of the best caching plugin available for WordPress, with lots of options that other caching solutions – such as WP Super Cache – do not offer. This plugin adds CDN support to the WordPress blog. The support is disabled by default but can be activated and configured relatively easily. Note that there are other plugins available that allow you to use a content distribution network such as CDN Enabler, Easy PageSpeed, or WP Fastest Cache.
- W3 Total Cache supports Amazon S3, Amazon Cloudfront, self hosted and other CDN distributions such as VPS.net, Akamai, MaxCDN and Rackspace. These solutions cost money, and the price can range from $0,10 to $0,25 per gigabyte of traffic served. The cost per gigabyte usually goes down if the website has lots of traffic. Amazon Cloudfront users, for instance, pay $0.15 per gigabyte for the first 10 TB but only $0.03 per gigabyte for every gigabyte over 1000 TB.
We have selected Amazon Cloudfront as our content delivery network. It may not be the cheapest available, especially for webmasters with low traffic websites, but it is easy to configure and maintain with the help of the W3 Total Cache plugin.
The first thing that system administrators need to do is to create an Amazon S3 account. It can take several hours before the account becomes activated. In the meantime, the system admin can install the WordPress plugin W3 Total Cache and verify that the blog is working as it should be.
Although we only concentrate on the CDN configuration in this article and not the caching configuration, you may want to configure the caching as best as you can. Retrieve the access key and secret key from the Security Credentials page once it has been activated. Make sure the status is set to active there.
WordPress Configuration
Open the WordPress settings, switch to the W3 Total Cache configuration and change the CDN network to Amazon Cloudfront.
Do not enable the CDN yet. Now switch to CDN settings and enter the access key and secret key in the settings. A bucket needs to be created in the next step, which is basically a folder on the Amazon Cloudfront network.
As this did not work for us from within WordPress, we used the Firefox add-on Amazon S3 Firefox Organizer to create the bucket. If you have used a third party tool to create the bucket then enter it’s name in the bucket field now.
AWS Management Console
Now switch to the AWS Management Console and create a new distribution. Select the bucket that has been created earlier as the origin and enter a CNAME that you plan to us for the CDN.
This is necessary if you want your users to see a URL such as cdn.yourdomain.com instead of dx7ffewrewr.cloudfront.com when connecting to your website. You can pick any CNAME you want at this stage. Keep all the other parameters in their original state.
The new distribution should appear in the listing. It is ready when the status reads enabled and the state deployed.
Web server or host
Switch to your web host or server now. We need to create the new CNAME for the CDN. We are going to show you how it is done if the domain is hosted at Godaddy.
Update: Godaddy recently changed it homepage to a new design and layout. The functionality provided is still available, but in different places.
Once you have signed in to your account, you need to click on Domains to display the list of domains. There you need to find the domain and click on manage to open its control panel.
Switch to DNS-Zone on the page that opens and select the add record option. Pick CNAME (Alias), enter dns under host and the cloudfront domain under points to. End
Log into your Godaddy account and click on Domain Manager once the overview page has loaded. This is the page that is displayed after login. Click on the D icon next to the domain name that you want to configure the CDN for. This opens the dashboard for that domain. Select More Settings and click on the Manage button next to the Total DNS / MX entry. Select to Add a new CNAME and enter the same name that you selected during the distribution creation in the AWS Management Console. If you followed our example it would be cdn.
Enter the domain name shown in the distribution console in the Points To Host Name field. This will basically redirect requests to cdn.domainname.com to the Cloudfront url.
It takes some time before the redirection becomes active. You can use this tool to check if the CNAME is active.
Enter the cloudfront domain name and the CNAME in the CDN configuration in the WordPress blog. Save the settings before continuing.
Recap
So far we have performed the following steps:
- Created an Amazon S3 account
- Installed the W3 Total Cache plugin
- Copied the access and secret key and entered it into the CDN configuration screen of the W3 Total Cache plugin
- Created a bucket
- Created an Amazon Cloudfront distribution
- Configured a new CNAME pointing to the domain name of the new distribution
Once this has been done, it is time to test the configuration by clicking on the Test S3 Upload button. If this returns that everything is running fine then you are ready for the final step. If not, you need to retrace the steps done so far to find the problem.
Transferring files to the CDN
If the upload test was successful then you are ready to transfer data to the CDN. Now transfer your media library, include files, theme files, minify files and custom files to the CDN. This is done in the WordPress admin interface. Depending on the amount of data that needs to be transferred, this can take some time.
Activate the CDN
Switch to the General Settings tab once all the data has been transferred to the CDN. Place a checkmark in the Enable CDN box to activate the content delivery network. You should now test the blog to see if everything is up and running as it should be. This includes accessing various blog pages, leaving comments and using proxies to connect from other locations around the world.
Conclusion
It takes between one and six hours to configure and activate a CDN on the WordPress blog. Most of the time is spent waiting for the DNS to propagate, the account to become active and the data to be transferred. Webmasters should check the speed of their website in Google Webmaster Tools (or other tool) to see if the changes have decreased the load time for the users of the site. They should also monitor the costs over at Amazon.