I’ve just moved all the images from macintoshhowto.com over to Amazon Cloudfront. The bottom line is that you should notice macintoshhowto.com speed up. If you want to know how to do it, read on.
How to make your wordpress site real fast using Amazon Cloudfront.
Cloudfront is a way to speed up your web content delivery. Amazon has fast servers all round the world and they are letting people (for a price!) use their infastructure to serve up copies of their own files such as pictures, backgrounds etc. These static files are stored on the Amazon Cloudfront servers. When someone visits your website the main part of your page (the bits that need to actually run php code and so on) come from your own server, but all the images and so on come from the Amazon Cloudfront. This speeds up you site in two ways. 1. Amazon delivers your pictures real fast. 2. This reduces the demand on your own server, making it faster as well.
There are two ways for Cloudfront to work.
1. You upload all your wordpress static files (you wp-content and wp-includes folders) onto Amazon S3, then tell Cloudfront to get your files from Amazon S3 as it needs them.
OR
2. You tell Cloudfront to get the files directly from your site as it needs them. This second way is called ‘Origin Pull’.
The advantage of 1 is that if you ever change your wordpress host, your entire wp-content folder is stored off-site at Amazon S3, so you don’t need to even copy your wp-content folder to your new wordpress installation. The new S3 wp-content folder becomes your wp-content folder – you can even load images directly to S3 and then insert them into your wordpress posts.
The advantage of 2 is that it’s easier and cheaper, and you don’t need to upload the files to Amazon each time you make a new post.
Here is how to setup your wordpress site to use CloudFront via Origin Pull (the second of the above two options). You need to set up an Amazon Cloudfront account, and install one of two cache plugins, WP Super Cache or W3 Total Cache. The Cache plugins will redirect your browser to get the static content from Amazon instead of your site. It’s really quite simple, you just need to put the Cloudfront details into your Cache plugin, and then put your wordpress URL into your Cloudfront account.
STEP 1: SET UP A CLOUDFRONT ACCOUNT
1. Go to Amazon Web Services – http://aws.amazon.com and sign up for Amazon Cloudfront content delivery. If you already have an amazon.com account it can be linked to that account for payment.
2. Go to the Cloudfront Management Console – https://console.aws.amazon.com/cloudfront/home
3. Click on ‘Create Distribution’. The following window will appear.
4. Press Continue and on the next page leave everything blank except fill in the comment with something meaningful then press continue.
5. Press Create Distribution.
6. The new distribution will appear in the console. Copy the domain name.
STEP 2: PUT THE CLOUDFRONT DETAILS INTO WORDPRESS
Now you will need to go into your wordpress admin and set up the cloudfront server as the place wordpress will go for all your static content files. You do this from the Super Cache or W3 Total Cache plugin.
In WP Super Cache, go to the CDN tab and enter the URL from the cloudfront into the ‘Off-site URL field, and select the ‘Enable CDN Support’ tab. Press ‘Save Changes’
In W3 Total Cache go to the ‘Content Delivery Network’ page, then enter the details under “Replace Site’s hostname with:”
Unfortunately in W3 Total Cache you will need to fill in the Access key ID and other fields even though these are not needed if you are using Origin Pull. They are only needed if you want to use Amazon S3 as a bucket to load the cloudfront files. We are using Origin Pull so these settings are not needed. Just put in anything like this:
Also you can ignore any messages like this one below. They don’t apply for Origin Pull. They are telling you that you need to update the files in the S3 bucket, but you’re not using the S3 bucket.
Give it a try!
To test that it’s working, go to your webpage, then from Safari click ‘view source’. You should see the URL of the images in the HTML file are now coming from the cloud server:
img src="http://d3hnrcqh47hd0x.cloudfront.net/wp-content/themes/dpc/images/logo.png" alt="dpc.com"
That’s it. The images and other static files are now coming from the Amazon Cloudserver. It’s all automatic. If you want you can tweak the cache settings to change what files come from the Cloudserver and what come from your site.
ADVANCED: Once cloudfront is working you can also set up a c-name record so you don’t see the ugly ‘http://d26sdfsdfsdrftrgx2.cloudfront.net’ URL on every picture.
1. Go to ‘Cloudfront Distributions’ in AWS console and add ‘Alternate Domain Names’ and add the domain e.g. cache.yourdomain.com
2. Go to web server Domain Manager ZONE EDITOR (eg Bluehost), Add Record of type ‘c-Name’ e.g. cache.yourdomain.com and point it to your AWS distribution
eg HOST RECORD: cache
POINTS TO:d26sdfsdfsdrftrgx2.cloudfront.net
This looks like this:
3. Go to wordpress W3 Total cache and add the CNAME under ‘Offsite URL’ (Not under ‘Add C-NAME’!!!!) and Save settings.
NOTE: Your files on the CDN will be cached and will not update with a Supercache ‘delete cache’. This is not helpful if you are editing .css files etc.
To manually delete a file from the CDN cache go to AWS: ‘Distribution Settings’ and ‘Invalidations’ and type the path of the file you want to delete eg “http://cache.yoursite.com/mythemes/style.css”
Close
Leave a Reply