A fast site is good for a variety of reasons, but two that keep me striving to make my site faster every day are:
- Google has stated that they now take site speed into account when ranking your sites (though the emphasis isn’t particularly strong); in broad terms, the faster your site, the higher your site should rank.
- The more important reason is that people’s time is more and more precious, so if your readers are waiting around for your site to load, they’re likely to go elsewhere to find the information. Not only have you lost a reader, but their perception of you and your site has been lowered.
What is a Content Delivery Network (CDN)?
A content delivery network is a system of servers placed strategically around the world which host many of your site’s files. This helps speed up your site in two ways:
- Depending on the hosting package that you have, your server may not be well configured to handle large number of requests on the same domain at one time. So if you need to load 100 images on your front page, your server might not be as good at taking in those 100 requests and churning out all the images, while simultaneously executing your PHP and the rest of your files as a CDN would be. CDNs are built to perform these functions and will spew out the files much quicker.
- Because the CDN hosts your site files on several servers all over the world, it can deliver files to you much quicker because the data doesn’t have to be retrieved from as far away. For example, the server for Do It With WordPress is located in Texas, USA; a reader in India, for instance, would normally have to request files to be sent to them from the other side of the world in order to see my site, but if my CDN has a server much closer to them, it will send them the files from there instead.
Creating a CDN with Amazon S3
Amazon S3 is Amazon’s Simple Storage Service, which allows anyone to host files (of any kind) “in the cloud”. It can be used for a variety of purposes such as online backup of your vital files, but we’re going to use it to host your static website files so that they can be delivered to your readers quicker.
As such, we’re going to set up an account with Amazon AWS (Amazon Web Services) account. AWS is the parent company that provides S3 and is owned by Amazon (yes, the one that sells books, DVDs, jewellery, cable ties and dog bowls). As such, you can use your existing Amazon account to help create your AWS account when you go to sign up.
Now for the fine print; Amazon charges for its S3 service, but it provides a “free tier” for the first year so that you can try it out. Even if you use more than the free tier, or you get to the end of your first year of use, the cost of running your CDN through Amazon S3 is still very reasonable. You can check out all the details on Amazon’s Free Tier page.
Once you’ve created your account, you can sign in to the AWS console. Make sure you’re on the Amazon S3 tab (as opposed to all the other services that AWS offers). Next you’re going to create a “bucket”. A bucket is just a fancy name for a top-level folder. However, the bucket has to have a unique name and when I say unique, I mean unique from all other Amazon S3 buckets (not just your own buckets). It’s not terribly important what the bucket is called, it will just help you to identify it if it’s labelled appropriately (note that mine is called diww for Do It With WordPress).
Once your bucket is created, you’ve done all the set up you need to do in the console. Now, you need to head to your Account Settings and click on Security Credentials. From here, you want to create a new a new Access Key. This will provide you with an Access Key Id and an accompanying Secret Key. This is like your username and password for accessing your buckets. Leave that page open, as you’ll need to copy them later on.
Install W3 Total Cache
W3 Total Cache is one of my two favourite plugins (the other being WordPress SEO by Yoast). It has so much functionality for caching and minifying your site; the developers really aren’t kidding that you can expect a 10x improvement in site performance. I plan to cover the other functions of W3 Total Cache in a future tutorial so that you can all experience the huge benefits it has to offer, but for now, I’m just going to show you how to use it to get your site on a CDN.
Install the plugin, activate it and head over to the Settings. Because the settings are so vast, they’re split across about nine pages. First off, you’ll need to go to the CDN Settings page so that you can set up how we want the CDN to operate.
Set up the CDN
First of all, go to the General Settings page, scroll down to the CDN section and select Amazon S3 as the CDN type (but do not enable the CDN yet). Once you’ve done that and saved your settings, head over to the CDN Settings page. Under the General section, select all of the options for hosting files on the CDN (attachments, wp-includes, theme files, minified files and custom files). Leave the next option (Force over-writing of existing files) unchecked unless you start having problems once you activate the CDN.
The next section is where you’re going to enter your S3 account information so that the plugin can upload your files to the S3 servers. Enter your Access Key ID, Secret Key and bucket name that you set up in your AWS account. Set SSL Support and for Replace site’s hostname, enter bucketname.s3.amazonaws.com, where bucketname is the bucket name that you set up for your CDN. To ensure that you put all of your information in correctly, you can use the Test S3 Upload button.
Under the Advanced section, check Export Changed Files Automatically, so that when files change, they’ll automatically be updated on the CDN. use the following settings as a starting point for your upload intervals; your auto upload should be 3600 seconds, the re-transfer cycle interval should be 900 seconds and the re-transfer cycle limit should be 25 files. For wp-includes files, use:
For the the theme files, use:
And for the file types to import, use:
The next field is a custom file list, where you can choose extra files to upload to the CDN. We’re going to include static file types that might be in your plugins, so use the following for the custom files. You can of course add to the list if there’s more you want to add:
favicon.ico wp-content/gallery/* wp-content/uploads/avatars/* wp-content/plugins/*.js wp-content/plugins/*.css wp-content/plugins/*.jpg wp-content/plugins/*.gif wp-content/plugins/*.png wp-content/plugins/*.po wp-content/plugins/*.mo
You can leave the Rejected Users Agents and Rejected files empty unless there’s particular files or user-agents that you need to exclude from using the CDN.
Now check the option to Set Cookie Domain to yourdomain.com and save your settings.
Go to the Browser Cache Settings page and scroll down to the bottom to the Media & Other Files Section. Check the Enable HTTP Compression option and save your settings.
Now you’re in a position to upload all your files to the CDN. Head back to the CDN settings page and in the General section are several buttons that allow you to upload files to your CDN. Go through each one and upload all the files. Head back to the General Settings page and you can now enable the CDN.
Once you’ve done that, make sure you’re not in preview mode (top of the Settings page), log out (in case you’ve got a setting selected which bypasses the CDN for logged in users) and refresh your home page. See if you don’t notice a considerable increase in your site speed. To check whether your images are being served from your CDN, right click on an image and copy the image URL; the URL should include s3.amazonaws.com, rather than yourdomain.com like it normally would be.
And that should cover it. You should now be running through a CDN and your site speed should have improved markedly (you can always check by monitoring your site speed). Did it all make sense? Did you get it running successfully?