Become a Bandwidth Master with Your Own Subdomain CDN

Back when my company was paying out three times our monthly plan allowance in bandwidth overage fees to Volusion, I wrote a guide to offloading content to Amazon’s Cloudfront CDN. While this method has saved e-commerce store owners a ton of money, there is still more to be done to cut costs and give your site a truly professional touch. Let’s break free and make our very own subdomain CDN!

Note about HTTPS

Before we start, you should know that CloudFront doesn’t support CNAMEs with HTTPS. More information is available on this AWS help page. Depending on how you set up your store, and how your e-cart provider works, this may or may not affect you.

Step 1: Organize Buckets

I won’t go into much detail here because I covered this in my first article. Assuming you’ve read that, start organizing your buckets for use with your CDN.

My recommendation is to create one bucket for a short subdomain, like cdn.example.com, and then create SUBFOLDERS as needed within that bucket. This will make data come from cdn.example.com/SUBFOLDER

Going forward, we’ll use this method and my apmc bucket on S3. Go ahead create your bucket and subfolders and meet me at the next step.

Step 2: Link Your S3 Bucket to Cloudfront

Again, I wrote about this already. It’s not hard.

Step 2: Create DNS Records for Subdomains

If you have a hosted e-commerce solution like 3D Cart, Volusion, Big Commerce, etc. then you’re in luck – these people can assist you with editing your DNS records. Usually you can submit a trouble ticket or service request and get it done in 24 hours. Some providers will allow you to manage your own DNS settings – this expedites the process but in the end, you must wait for the DNS changes to propagate no matter what.

Submit your ticket like so; we’ll assume your site is example.com, your subdomain is CDN, and your Cloudfront distribution is d11111111111.cloudfront.net:

“How are you gentlemen? Please create a DNS record so that my content at d11111111111.cloudfront.net can be accessed through cdn.example.com. Thank.”

Now let’s move on the to next step while we wait for DNS.

Step 3: Integrate Subdomain

By now you should have your Amazon S3 bucket set up (as instructed here), some subfolders, and you should have requested that your subdomain be linked up with your Cloudfront Distribution. It’s time to create your CDN.

Navigate to https://console.aws.amazon.com/cloudfront/ and select your distribution. The “Origin” will display your S3 bucket.

Click the “Distribution Settings” box at the top.

Now click “Edit” and type in your CDN address with subdomain. Also take a moment to make sure you’re on the correct distribution and that it is deployed.

cloudfront-cdn-400

When finished, click the large blue “Yes, Edit” button to finalize your changes.

Test the results

In my apmc bucket, I have a photo of a cat nested under some subfolders. The path is:

/apmc/images/products/cat.jpg

We can test that it’s available here:
https://s3.amazonaws.com/apmc/images/products/cat.jpg

Next, let’s test using the CloudFront URL to access that same image:
https://d1e41orfkrjn0h.cloudfront.net/images/products/cat.jpg

Those are both ugly URLs aren’t they? Now! Let’s try retrieving that image via the short and sweet Allparts dedicated CDN:
http://cdn.allparts.com/images/products/cat.jpg

Pretty nice, yes?

It puts the image on CDN or else it gets the fees again.

Remember what I said – or rather, what Amazon said – about HTTPS: it doesn’t work with CNAMEs. As you can see above, those HTTPS URLs work fine because of Amazon’s SSL, but there’s no way to avoid getting error messages or broken padlocks on your browser when you try to use the CNAME and HTTPS:
https://cdn.allparts.com/images/products/cat.jpg

Use and Application

My previous article about moving static content to the cloud has been very well received by e-commerce store owners of all sizes. I continue to receive e-mails thanking me for the guide and tips, but I’ve also received questions from people who have moved their content and are still going over their bandwidth allotment. The problem: the inability to use off-site product images.

This has been a big problem for Volusion store owners who, according to my research, are subjected to the least amount of bandwidth on a plan and the highest bandwidth overage fees – up to $7 per gigabyte! Ouch. The Volusion software automatically generates several smaller version of product images for use throughout the store. However, this convenience doesn’t apply to off-site product images.

Volusion store owners can specify 1 Large and 1 Small off-site product image per product, and only those two sizes will be used for that product across the site. I have seen stores design their templates and pages around this successfully, but most store owners want the flexibility of dynamically-generated image sizes and the freedom of off-site images.

Enter 3D Cart, where you can have the best of both worlds by specifying off-site images that are automatically resized as needed.

Specify an off-site large image and an off-site thumbnail, and 3D Cart will do the rest.

Combine this with your new, professional, reliable, and inexpensive AWS CloudFront CDN on your subdomain and bandwidth overage fees will be a permanent thing of the past. And if you’re looking to move from Volusion to 3D Cart, get ready for an enormous increase in speed and substantially lower response times. Put it all together to deliver a screaming fast shopping experience to your visitors. As a bonus, you may even rank better in search engines now that site speed has become a factor in SEO.

Global averages for response time – this company’s response time dropped by half a second overnight after switching from Volusion to 3D Cart.

What are you Waiting For!?

Another bill with huge overages, right? Don’t wait for that! Visit my contact page and put me to work saving you money. Trust me – it will pay for itself.

About Dean Peckenpaugh

Dean offers small business consulting services at DeanP, LLC - specializing in e-commerce and operations. Visit the contact page to request a consultation.