Blogs arrow How to setup a cost effective CDN for Images using S3 and CloudFlare ?

How to setup a cost effective CDN for Images using S3 and CloudFlare ?

line

Oct 28, 2020

Most of us are building web applications and/or mobile applications. If you care about performance, then you might have come across Pingdom or Gtmetrix or Google Pagespeed.

The objective of any performance analysis tool is to speed up the loading of your DOM in browser. Most commonly, all web applications be it e-commerce or real estate or social apps, involve a heavy use of images.

Our Goal

Setup a CDN for 15$ and keep it running with 0$ cost as much as possible, assuming you don’t keep changing GB of images everyday — which is quite unlikely.

What does an Initial Analysis say ?

s3bugket

Coutesy of freepik.com

80% of HTTP Requests in any random web application is for images.

So, 80/20 rule : fix your images to load fine and you already have a very fast website. Fix the cost for loading images and you are even better

The ideal solution is to set up an image handling library like https://imagekit.io/ which has cool image handling features. (there could be other frameworks too). Image handling requires automatic optimization — using modern formats like the web, the transformation of images in the right size, and reliable storage. However, this has a fixed monthly cost

What if we want a lighter version of image kit without image transformation and optimization ?

You know the answer now. We need a reliable origin to serve the images and a professional CDN to cache the images. What are the different aspects of cost ?

  • Storage of images in S3
  • Transfer of images between S3 and CDN — aka CloudFlare
  • Transfer of images between CDN to your browser

Storage of images in S3

Being an AWS fan, I strongly recommend using S3 for your original needs. You can find the details of pricing here. Roughly, we will spend 2$ a month for 100GB of storage.

Transfer of images between S3 and CDN

Whenever the browser makes a request to a CDN endpoint, say cdn.example.com, the CDN needs to make an intelligent choice of how frequently the latest data from origin should be pulled into the Edge locations of your CDN.

cdn-s3

How CDN (CloudFlare) and Origin(S3) work together to handle data transfer?

As we see, if we set proper Expiry header to our files in S3 under the corresponding buckets, then the unnecessary data transfer between CDN and S3 will be avoided. This will reduce a major cost.

Let’s take an example of 100GB of images stored and 20% of the images are frequently accessed. This means 20GB of your image data will be stored in CDN Edge locations for every region your users are present. For example, if you have users from India, the U.S, Mexico, and Singapore each of these locations will have a copy of your S3 data in the nearest region possible to provide the best experience for the user (Of course ! That’s the whole purpose of CDN!)

How frequently do your images change? Rarely!

How frequently is your image accessed? Very frequently!

Imagine the kind of data transfer that would happen between CDN and S3, if Expires header is not set. 20GB a day! wow!

What will be the cost with the above setup ?

With S3, we have a cost of 9$ per 100GB on data transfer. However, with long expiry periods, we can literally bring this to Zero from second months and ensure only changes are pushed into CDN. So, I ideally expect us to pay only for the first time we setup data from origin to CloudFlare

Transfer of images from CDN to Browser

I am a big fan of AWS and in recent days a very big fan of CloudFlare. It has super impressive interface to control your data in CloudFlare edge locations.

The best part is there is no limit on the outgoing data and is completely free of charge with CloudFlare. Remember its pricey and easy to use AWS CloudFront as your CDN as tempting it may be.

Overall, somewhere between 10–15$, you can set up a reliable CDN system that runs in a high performance ecosystem. As of today, I can confidently say that Cloudflare does a super good job of providing free bandwidth.

Everything looks green ? What is the catch ?

1. You need to be knowledgeable and have control over what data/images change. Also, if you are not checking yourself against the expiry date for your images, your bill can be a solid bill from AWS.

2. I can vouch for the support from AWS but not from Cloudflare. I did not have a need, but I see a lot of queries in CloudFlare forums and not sure how much of them are resolved. So, AWS is way mature in this area.

So, its pretty simple to keep this under control. AWS has the possibility to check and set budgets and whenever you exceed the budget you get an email. What more can you ask for

abinaya-pic

WRITTEN BY

Abinaya G

More Blogs

line