After the fantastic tips in edbaxter’s post on Optimizing Page Speed, I decided it was time for a beginner’s guide on one of the most effective methods to increase speed that was only mentioned in that post: a Content Delivery Network (CDN). The purpose of a CDN is to put your website’s static or unchanging files on very fast servers all over the world, so that requests to view the content by visitors to your site have the shorter possible trip to get your data. An example of these static files are images, css, and javascript files.
Think about it like a bowl of candy in your kitchen. When you want a piece of candy, you have to make the trip from somewhere in your home to the kitchen, and that may take longer than you would like. You can instead put multiple bowls of that same candy in every room of your home. This would make the trip to receive the candy much faster, though it would do nothing for your waistline.
This post will specifically concentrate on using two services that are under the label of Amazon Web Services (AWS): Amazon Simple Storage Service (S3) and Amazon CloudFront. CloudFront is the CDN, and S3 is a fast location used to store your static files, where CloudFront goes to get the most up-to-date file. While these services do have costs associated, there is a free usage tier which will cover much of the costs of S3. CloudFront costs will vary, but for some perspective, I have a site that has 450,000 pageviews per month, and the costs involved are $3/month. This was $4 last month, but I reduced HTTP Requests by removing unnecessary images, combining files, using sprites, etc.
What is the benefit? Using these methods alone, you can see a reduction in load times between 50% and 75%, and when combined with the tips by edbaxter, you can have pages loading in less than two seconds. Let’s get started!
Creating your Accounts and Downloading Software
Before we get into the detailed steps for creating your account, you will want to download the free CloudBerry S3Explorer for Windows. I’ve found this software to be the strongest, but if you don’t have access to Windows in some fashion, then there is a Firefox plugin called S3Fox that can be used in combination with the AWS Management Console to accomplish these same tasks.
Now, it’s time to create your accounts. Go to the AWS Free Usage Tier page and sign-up with the link in the top-right. Once completed, you will receive an email confirmation that will include a link to getting your Access Identifiers. Click on this link and note both your Access Key ID and your Secret Access Key (click Show); both of these are needed later to use CloudBerry with your account.
Now it is time to sign-up for S3 specifically by heading to the Amazon S3 page and clicking Sign Up in the top-right. This step will require a credit card be provided to Amazon and a billing address selected. Once both of those bits of data are entered, you will click ‘Complete Sign Up’. The following message will be displayed.
Time to rinse and repeat the process for Amazon Cloudfront sign-up. As usual, click ‘Complete Sign Up’ to wrap things up. Same message, and usually within 10 minutes you will receive two emails to let you know things are all setup for both S3 and CloudFront.
This would be a great time to install CloudBerry, and if the emails have arrived by the time you are done, you can then create your new account within CloudBerry. Launch the application, and under the menu select File > Amazon S3 Accounts. Double-click on the New Account icon, enter in a nickname such as your domain name, and then pull out those credentials you noted earlier and copy/paste them into the appropriate boxes.
Make sure you click ‘Test Connection’ before clicking OK. Once you are back to the main screen, you should have a new tab. One side should be setup to your new S3 account, and the other to My Computer (see image below). The next step is we need to create a bucket, but first let’s talk about the files themselves and your website.
What Files?
First and foremost, if you just want to use a CDN to speed up your Wordpress blog, then the files of interest are the contents of wp-includes and wp-content. You can then use a plugin like WP-Super-Cache or W3-Total-Cache to do all the heavy lifting. However, doing this for a Wordpress blog is a complete post in itself, and I have not been 100% thrilled so far with my configuration and plugin testing, so I’ll let someone else write that one. I am going to concentrate on everyone else.
The files you want to move to a CDN are your javascript files, Cascading Stylesheets (CSS), and images. These items are static and rarely change on your website, and if you do change them in the future, you will need to update the file on Amazon S3. For now though, let’s assume you are a good organizer, and these files are all in subfolders like javascript/, stylesheets/, and images/. Great! That makes it easy to copy them over!
Pro Tip: Is one of your javascript files a library, such as jQuery? Let Google’s CDN do the work for you (it’s really fast, and free)! Check out the full list of available libraries hosted by Google and update your website links appropriately.
Buckets, ACL, and CloudFront – Uploading the files
Time to create a bucket. A bucket is a container for all the files, and a great way to organize files together when you are managing multiple websites and want to keep things a little separated. Click the blue button noted in the above image in CloudBerry Explorer to create your first bucket. I recommend naming your bucket something like: cdn.yourwebsite.com (it’s clean and easy). The bucket location is a minor detail, so for now, just set it to the location closest to you.
Click OK and create your bucket, which will be listed now inside CloudBerry. Double left-click on the bucket to open it. It will be empty, but now it is time to copy over your files. Use the My Computer side to search your computer for those static files. Select all of the folders/files, right-click, and choose Copy.
The time will vary, depending on the number of files you are moving over, but once everything is completed, we can setup the Access Level (ACL) Settings. Select all of the files on the Amazon S3 side of CloudBerry, right-click, and select ACL Settings.
The ACL Settings represent who is allowed to view the files. If this step was skipped, the files would not be accessible by your website visitors. Therefore, it’s critical to set this up. After selecting ACL Settings, you will be provided with the following window.
Click Public (everyone) on the right-side, then check the box in the bottom-left to Apply for all subfolders and files. This ensures all of the files inside of your folders are processed. Finally, check the box in Authenticated Users > Read. Before clicking OK, everything should look like the image below.
At the bottom of CloudBerry, you will see the status as it processes all of your files. This may take a while, but let it work. If there are errors, you will see the option to Retry any that failed. Simply click Retry and it should go fine the second time around. You’re almost there… excited?
The last step inside AWS is to push these files to Amazon’s CloudFront. Click the up arrow just above your folders on the S3 side, leaving it displaying your bucket (e.g. cdn.yourwebsite.com). Right-click on the bucket and select CloudFront > New CloudFront Distribution Wizard.
Moving through the wizard, press Next, then leave the default Download option and click Next again. Leave the Origin is Amazon S3 Bucket and make sure your bucket is selected in the drop-down. Before clicking Next, we need to pause a moment and talk about the CNAME option.
CNAME and DNS
A CNAME record is setup on your webhost and allows you to have a subdomain such as cdn.yourwebsite.com represent another URL. When you setup CloudFront, Amazon issues you a URL similar to abcd1234.cloudfront.net to represent your files. However, by setting up a CNAME record for your website, you can have cdn.yourwebsite.com point to abcd1234.cloudfront.net (example!). This is not only easy to remember, but keeps things looking like they are located on your website. Depending on your domain, the steps will vary to set this up, However, if you do wish to set this up on your own, now is the time to decide on the URL, and set that into the CNAME box inside the wizard.
Step through to the Next step, leaving the default No Logging setting and clicking Next again. Don’t check Enable Private Content Distribution, just click Next again. The next screen allows you to Enable Distribution immediately. You will want to check only that option and click Next. The final step is a review of all of your settings, so double-check things and click Finish.
It takes 10-15 minutes to finalize the CloudFront creation, but you can check out the status by checking the Properties of the bucket using the icon above or right-clicking and selecting Properties.
There are two areas of interest under the Distribution section at the top of the Properties window. The Status row will either display In Progress or Deployed. Be aware that it may be Deployed before it shows in the Status, and you can double check that directly on the web through the AWS Management Console. The other area of interest is the Domain name. You will want to copy this down to either use later on your website to point to your files, or if you are setting up a CNAME, you will point your cdn.yourwebsite.com CNAME to the listed Domain name (e.g. abcd1234.cloudfront.net). Now is a good time to go setup that CNAME record.
Advanced User Tip: You can setup HTTP headers on your files to improve speed, with the most common being setting up Cache-Control headers for 31 days (2678400 seconds). This helps repeat visitors load less files. To do so, right-click your bucket and select Set HTTP Headers. Click Add in the top-right, select Cache-Control in the top drop-down menu, and enter the following into the bottom textbox (no quotes): ‘public, max-age=2678400‘. Click OK and it will update all of your files so there is a 31 day cache expiration.
You’ve completed all the steps necessary to put your files into AWS. Congratulations! Now to update your website to use your new files.
Setting Your Website and Testing
First and foremost, if you want to manually update all of the links on your website to point to the new location, more power to you. Here is an example:
OLD LINK: http://yourwebsite.com/images/loading.gif
NEW LINK: http://abcd1234.cloudfront.net/images/loading.gif
OR
NEW LINK: http://cdn.yourwebsite.com/images/loading.gif
Of course, you may want to do something more advanced. The least effective method is to use a redirect. Yes, this is a good temporary measure, but should not be used forever. If you use an .htaccess file and mod_rewrite on your server, here is a quick rule for you:
RewriteRule ^(images|javascript|stylesheets)/(.*).(gif|jpg|jpeg|png|css|js) http://cdn.yourwebsite.com/$1/$2.$3 [R]
You will need to update the bold area with your domain link (cloudfront or CNAME). Once this is setup, you can easily see what files are being caught by the rewrite rule by heading to http://tools.pingdom.com/ which offers a file-by-file speed test for your website. A green arrow appears for files that were redirected. It is a great way to make sure you didn’t miss anything! Make sure you consult an expert if you are not comfortable with mod_rewrite rules or you are using another web server than Apache and your case varies.
For PHP developers, you can make use of ob_start() to do a callback to a function, which will replace all links with the new CDN links. At the top of your pages, change ob_start(); to ob_start(‘CDN’); Then, you can use the following CDN function, replacing the bold areas:
function CDN($buffer){
return (preg_replace(“/(href|src)=(“|’)(/|./|http://www.yourwebsite.com/|./|/)([^'”]*.)(gif|jpg|jpeg|png|css|js)(“|’)/”,”${1}=${2}http://cdn.yourwebsite.com/${4}${5}${6}”,$buffer));
}
Final Note
If you still aren’t sure about the value of a CDN, consider that when you view the source of SEOmoz.org, you will find that the static files are all served from a CDN URL. Secondly, to reinforce the point, all of the images used in this tutorial are also being served from my Amazon CloudFront account. The benefits are great, and there is a lot of benefits to SEO and your users by speeding up their experience with your website. Good luck!
About the Author
Mario Lurig is an author, entrepreneur, and awesome. A hobbyist PHP developer, he has two previous YouMoz posts. His most recent project is an Airline Schedule Notification service, FlyTimeNotify.com.
