How we use Amazon CloudFront for dynamically generated content

There are well documented requirements to the resources Amazon CloudFront will cache. For our use-case most interesting HTTP headers would be the Cache-Control, Date, Last-Modified and ETag.

Amazon CloudFront uses Cache-Control header to control how long it should cache given resource. There is another Expires header available in the HTTP spec, however Cache-Control is preferred by CloudFront.

Apart from that we need to serve Date and Last-Modified headers that are required to compute expire value from Cache-Control header.

How to use Amazon Cloudfront to speed up your wordpress site.

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.

Full-Site Delivery with Cloudfront

Cloudfront is a CDN designed for global content delivery. However, recent improvements allow it to act not only as a CDN, but also as a cache similar(ish) to Varnish.

People originally had to use Cloudfront by uploading their media to Amazon S3. Cloudfront then served those static assets from the S3 bucket. This means that within a coded application, developers needed to upload assets to S3 and then point URLs within their HTML (and perhaps in user-generated content) to a Cloudfront URL.

.. For instance, if you have a file example.com/css/styes.css, your Cloudfront URLabcxyz.cloudfront.net/css/styles.css will grab example.com/css/styes.css and then serve a cached version of that stylesheet for future visitors.

Within your own HTML, of course, you set the URL of styles.css to be your Cloudfront URLabcxyz.cloudfront.net/css/styles.css.

Why you need a CDN for your WordPress Blog?

  • Speed – Once we started using a CDN on our site, the site got faster.
  • Crash Resistance – Thanks to you guys for sharing our articles, we have received huge spells of traffic from social media on some of our articles. If it wasn’t for the proper CDN and caching setup, then our site would crash so many times. CDN allows us to distribute the load to multiple servers instead of having 100% traffic to our main server thus making it less likely to crash.
  • Improved User Experience – Since we started using a CDN, we have noticed a decline in bounce rate on our site. Furthermore, we have also seen increased in pageviews and numbers of pages viewed by each user. So clearly a fast site means improved user experience.
  • Improvement in SEO – Google has clearly stated that faster sites tend to rank higher in Search Engines. We have noticed our site ranking higher once we did the optimization on our site.