Keep Your WordPress Secure - Check Out My Ultimate Guide To WordPress Security...

Click Here

How to Use Amazon S3 To Set Up A CDN In WordPress

Studies show that if your web site takes more than 5 seconds to load, you are going to lose about 50% of your viewers and sales. What you can do to speed up your WordPress blog is by employing a CDN to display content to users faster and more efficiently. We will first see what is a CDN, why you need a CDN for your WordPress blog and then go on to see how to implement CDN on your WordPress blog.

What is a CDN?

CDN stands for Content Delivery Network which is a large array of servers that help to deliver static content for websites to its users in a cached form, mostly based on where the user is located on the globe. The goal of CDN is to serve content with minimal latency. Most CDNs have deployed servers across the globe to minimize the latency based on the location of the user. On the whole, it improves performance of the website and reduces the page load times.

Pretty confusing? Let’s try to break it down into some user friendly words.

Normally when a user keys in your URL into their browser,  they will be directed to your web host’s server (i.e HostGator). Your web host’s server may be located at a central location i.e. Houston, Texas. So every user on your website must access this single server to browse your website. But if you experience a high volume of traffic, then you might overload your server which leads to slow loading or even a server crash.

This is where a CDN comes in handy because it is a network of servers, but most importantly, spread throughout the world. When you use a CDN, your static content is cached and mirrors of these are stored on all of these servers. Static content includes images, stylesheets, Flash, javascripts, etc. This speeds up the connection process noticeably.

CDN technology allows to redirect your visitors to the closest server from their location. For example: If your main server is hosted in Houston, Texas, and a person from Durham, England tries to access it, then they will be redirected to their closest server available to them, which may be located in London. Technically, this minimizes the number of hops needed to transmit the static files to your end user.

Why you need a CDN for your WordPress Blog?

In the above section, you can clearly see that having a CDN can make a huge impact on your website. Below are some of the advantages that we have seen on our site by using a CDN:

  • Speed – User’s proximity to your web server has a big impact on load time. In simple words, the closer the CDN server is to where your user is, the faster the user gets the content. Once we started using a CDN on our site, the site got faster. This will increase delivery speed and avoids network congestion on your own server.
  • Crash Resistance – CDNs offers 100% availability, even with large power, network or hardware outages. By distributing your content across a large number of geographically dispersed servers, you can make your website totally crash resistant. CDN allows us to distribute the load across multiple servers instead of having 100% traffic to our main server thus making it less likely to crash.
  • Better User Experience – Since we started using a CDN, we have seen a notable decline in bounce rate on our site. Furthermore, we have also seen increased page views and numbers of pages viewed by each user.
  • Improvement in SEO – As Google has clearly stated, faster sites tend to rank higher in Search Engines. We have noticed our site ranking has increased quite a bit once we did the optimization on our site.

Setting Up a Content Delivery Network in WordPress

This tutorial describes how to use a content delivery network in your WordPress blog. It will detail the requirements needed to install the CDN properly and also cover how to configure the CDN in WordPress according to your requirements.

First of all, by default, WordPress does not have options to enable a CDN. However, by using plugins and third party tools, we can enable that functionality. Here are the steps needed to configure the content delivery network as we did here at WP Buddy:

#1 : Set up your CDN account

Though there are tons of CDN services being offered, we have brought down the choices to just one. That is, Amazon Cloudfront. It is one of the most highly recommended content delivery network that even we use ourselves. It may not be the cheapest one available, yet it is easy to configure and maintain.

The first thing we need to do is create an Amazon S3 account. It can take several hours before the account actually becomes activated. Now switch to the AWS Management Console and create a new distribution. Select the bucket that had been created earlier as the origin and enter a CNAME that you plan to us for the CDN. This is essential for your users to see a vanity URL such as cdn.yourblog.com instead of gd45fhy4ewr.cloudfront.com while accessing your website. You can pick any CNAME you want at this stage.

Keep all the other parameters unchanged. The new distribution should appear in the listing. When the status reads enabled and the state deployed, you are good to go. Once this has been done, you can test the configuration using the Test S3 Upload button. If it says that everything is up and running, you can proceed to the next step.

#2: Update Your DNS Settings

Editing the DNS records for your domain name can be tricky if you have  not done it before. The way to do this also varies depending on the particular hosting company or registrar you have registered your domain name with. Switch to your web host or server now as we need to create a new CNAME for our CDN. We will be telling you how we did it using our domain hosted at Godaddy.

Log into your Godaddy account and click on Domain Manager from the overview page. Click on the D icon next to the domain name that you want to configure the CDN for. This opens the dashboard for managing your domain. Choose More Settings and click the Manage button right next to the Total DNS or MX entry. Select to Add a CNAME entry like this:

  • Host: cdn.myblog.com
  • Points to: [the URL provided by Amazon when you created you CDN account]

Make sure that you provide the same name that you chose while creating the distribution in the AWS Management Console. If you followed our example it would be cdn. Enter the domain name as shown in the distribution console in the Points To Host Name field. This basically redirects the requests to cdn.domainname.com to your Cloudfront url. In some cases, you should add a “.” at the end of the alias URL when creating the CNAME record, which depends on the registrar. Checkout such an interface from GoDaddy DNS Manager in screenshot below :

 

Please note that any changes made to your DNS records would take up to 48 hours while it propagates throughout the world. You can use this tool to check if the CNAME is active.

Note : If you don’t feel comfortable doing this, please contact your web hosting provider or domain name registrar so that they can guide you properly through the process or even better, they will do it for you.

 

#3 : Install the WordPress plugin

In order to use WordPress with CDN, you will need to get the W3 Total Cache plugin. W3 Total Cache plugin is undoubtedly one of the best caching plugins available, with hell lot of options that competing  plugins – such as WP Super Cache – fail to offer. This plugin has the features to add CDN support to WordPress. This support, though disabled by default, can be activated and configured with ease.

W3 Total Cache effortlessly manages Amazon Cloudfront, Amazon S3, and other well-known CDN distributions such as MaxCDN, VPS.net,  Akamai, etc. We shall not go into details about installing a WordPress plugin as it almost a standard procedure.

#4: Configure the W3 Total Cache plugin

Once you’ve activated the plugin, switch to the W3 Total Cache configuration and change the CDN network to Amazon Cloudfront. Do not enable the CDN yet. Click on Performance tab in the side menu on left. Under General, disable the following features:

  • Page Cache
  • Minify
  • Database Cache
  • Object Cache
  • Cloudflare
  • Varnish
  • Browser Cache

Right now, we only need to ensure that everything would work perfectly with Cloudfront and that nothing would be causing a problem. You can re-enable these features to experiment with them later.

Now switch to CDN settings and enter the access key and secret key generated in step #2 into the settings. A bucket needs to be created, which is basically a folder on the Amazon Cloudfront network. As we couldn’t find success doing this from within our WordPress dashboard, instead we used an awesome Firefox add-on known as Amazon S3 Firefox Organizer  to create the bucket. You can also use a third party tool to create the bucket and then enter its name in the bucket field now.

Leave the SSL support value by default. Enter cloudfront domain name and the CNAME you created in step #3 and hit Add CNAME. To see that  the CNAME DNS resolution works flawlessly, just click on TestDNA. If the NetDNA test shows success, then you’re all set!

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 using the WordPress plugin W3 Total Cache plugin.

#5: Moving files to the CDN

If the upload test was successful then you are all set to transfer data to the CDN. Now move your media library, theme files, include files custom files and even minify files to the CDN space we created. This can done using the WordPress admin interface. This can take some time depending on the amount of data that needs to be moved.

Once all the data has been transferred to the CDN, we are ready to activate our CDN. For this, switch to the General Settings tab. Check the Enable CDN option to get the content delivery network up and running. You should now test your blog every way you can. The main aim of which is to see if anything is broken. This includes accessing those blog posts, trying to leave comments and using proxy services to try accessing your site from other locations around the world.

#6: Testing the W3 Total Cache/CDN configuration

If everything has been setup according to the script, your WordPress blog should now have its images, CSS and Javascript files served by Amazon Cloudfront. To verify this, simply point your web browser to a post on your blog and view its source. The URL for the above mentioned types of files should now begin with “http://cdn.myblog.com/…”.

In some cases, there might be hard coded URLs in your WordPress theme files that points to “http://www.yourblog.com/…” even if we had moved the files physically. To rectify this,  you will need to edit them manually so that they too point towards the new CDN, that is : “http://maxcdn.yourblog.com/…”.

Conclusion

It takes somewhere around 5 hours to set up and configure a CDN on your WordPress blog. Though the bigger portion of the time spent is for waiting for the DNS to propagate, the account to become active and the data to be transferred.

Webmasters can now monitor the loading speed of their website using Google Webmaster Tools (or other tool) and compare with their previous values to see if the upgrades have considerably decreased the loading time for the users of the site.

[magicactionbox id=”2010″]

Copyright @2015