Is your website slow? Are your media files like images, videos, css loading slow. If you are facing these issues you need a good CDN(Content Delivery Network). You can read all Amazon Web Services article from below:
In my last blog I talked about AWS S3 integration with WordPress. Moving forward on similar lines, In this blog I will explain how AWS CloudFront can be setup for caching WordPress media files.
AWS CloudFront is a content delivery network(CDN). It is integrated with various amazon web services like AWS S3. It act as caching engine for media files like images, css, js, videos etc. It distributes content to end users with low latency and high data transfer speeds.
Why AWS CloudFront WordPress Integration?
- Performance of your website will improve.
- It works great specially when your user base is spread all around the globe.
- AWS CloudFront works with AWS S3 out of box. You just need to specify AWS S3 bucket path.
- AWS CloudFront allows you to set different domain aliases for your CloudFront distribution. You can have for example image.hackpundit.com, d1.hackpundit.com, d2.hackpundit.com and d3.hackpundit.com pointing to the same CloudFront distribution, allowing parallel downloads.
- Pricing is cheap. Pay as per your usage. For AWS free tier users you can use it for free until your traffic grows tremendously. Check out pricing in details.
- You have AWS account ready and already using AWS S3 for storage of media files. If not read AWS S3 WordPress Integration blog.
- You have access to AWS CloudFront service in AWS console.
- WordPress “Amazon Web Services” & “WP Offload S3″ plugins are installed and configured with AWS S3.
Steps for AWS CloudFront Setup
- Login to your AWS account and click “Storage & Content Delivery” => “CloudFront“.
- You will be redirected to AWS CloudFront dashboard. Click “Create Distribution“.
- Select “Web” as delivery method and click “Get Started“. You will see “Distribution Settings” in 3 different sections
- Origin Settings.
- Default Cache Behaviour Settings.
- Distribution Settings.
- In origin settings select your S3 bucket where your media files are residing.
- Most of the fields in “Default Cache Behavior Settings” are selected by default. You don’t need to change.
- Most of fields in “distribution settings” are selected by default. You can refer AWS CloudFront getting started guide for more details about each field.
- Click “Create Distribution“.
- You will be redirected to AWS CloudFront dashboard with distribution status “deploying“. It will take some time(5-10 minutes) till your status changes to “deployed“. You can use your AWS CloudFront domain only after your distribution status changes to “deployed”.
- You will see new CloudFront domain name generated(*.cloudfront.net). You will need the domain name below in the WordPress plugin. All your media files will be accessed through this domain.
Step AWS CloudFront integration with WordPress Plugin
- Login to your WordPress admin interface.
- Click “AWS” => “S3 and CloudFront“. Go to “CONFIGURE FILE URLS” section.
- Select option “CloudFront or custom domain“. You will be asked cloudfront domain(*.cloudfront.net) which you created above.
- Save your changes.
Great! you are done with AWS cloudfront WordPress integration with your blog. Let’s test it.
Testing AWS CloudFront WordPress integration
- Open any featured Image url from your blog list.
- Now access the same Image url with CloudFront domain name prefixed with http://*.cloudfront.net.
- Accessing for the first is little delayed for 1-2 seconds.
- If accessing image using CloudFront domain works perfectly, your WordPress integration is complete.
- I made a mistake of using distribution id in CloudFront url instead of CloudFront domain name. Obviously it didn’t work.
Setup Sub Domain for Images with AWS CloudFront
Using Amazon CloudFront for your wordpress website has various advantages except CDN caching:
- It boosts page load time.
- Lowers the bandwidth of the server.
- Consistent distribution across different regions.
Amazon CloudFront gives ugly looking sub domain url for accessing the files. Using sub domain(of your website) for images looks more professional. e.g. image.hackpundit.com is much more intuitive than *.cloudfront.net.
Even Amazon also uses sub domain(g-ecx.images-amazon.com) for accessing images. You can verify url of any image on Amazon website.
- You can set alternate domain of your CloudFront url very easily using below nice descriptive article.
- You will need to update Amazon CloudFront distribution settings after login to account. You can configure multiple alias alternate domains.
- After configuring your Amazon CloudFront distribution settings, make sure to update WordPress plugin configuration with your new CloudFront alternate domain.
Premature optimization is bad. Use AWS CloudFront in your WordPress blog when your website has huge traffic and media files are loading slowly. CDN is not of a much use for low traffic websites. If you are interested in AWS big data services, I recommend reading below articles:
- Amazon Redshift – Working with JSON Data
- Startup Tutorial – Signup Emails with AWS Lambda and DynamoDB
What is your experience with AWS CloudFront? Are you using any other CDN for your website? Feel free to comment your thoughts.If you like my article please like our Facebook page and also follow us on Twitter so that you get regular updates. For regular updates you can also subscribe tohackpundit.com with your email.