↑ Return to CDN

C04 How to use CloudFlare and MaxCDN together


Page no: C04

Page no: C04

Reference: findurlaptop.com

 

Website speed is becoming one of the crucial parameter day by day. Slow webpage loading is bit irritating for users, developers are conscious and paying serious efforts forwebsite speed optimization. I discussed about CloudFlare and MaxCDN CDN in my earlier articles but my focus of discussion was about specific CDN operation and efficiency.

I used both these CDN and observed that both have some specific way of dealing with content. MaxCDN is purely a CDN which serves your static content only but at superfast speed. On the other hand, CloudFlare has a different way of dealing with your web resources. CloudFlare can store your html pages also in addition to static resources. CloudFlare can cache your html pages and serve them directly to users without asking again to your web server for anything.

Advantage of using CloudFlare and MaxCDN together

The primary objective of using CDN is superior speed, whereas website security is added advantage. MaxCDN is undoubtedly good in delivering static content at fast speed. Static content can be CSS files, JS files, Images or videos. CloudFlare offers better security as the website requests are struck at CloudFlare CDN in place of webhost. Secondly CloudFlare can deliver your HTML files also in addition to static content.

We know that MaxCDN serves static content at superfast speed therefore transferring static content through MaxCDN is a reasonable decision. Now the remaining part is HTML content which we can deliver through CloudFlare. Now a days, delivery of web content is through dynamic websites which store content in database but there are several options to maintain cached html content in place of database generated content on each request for faster website response.

So your cached HTML pages can be delivered through CloudFlare and static content through MaxCDN.

There is one added advantage in financial terms. MaxCDN offers paid services but CloudFlare offers free services also. When you subscribe for MaxCDN then you get most of CDN features for static content delivery through their CDN.

The free account in CloudFlare puts few limitation like speedy protocol, only three page rule etc but the purpose of html content delivery is very well fulfilled through free account in CloudFlare CDN.

How to use CloudFlare and MaxCDN them together

The diagram gives broader idea of using MaxCDN and CloudFlare together.

How to use CloudFlare and MaxCDN together

Look at the steps to achieve the objective of using MaxCDN and CloudFlare together.

Setup MaxCDN to deliver static content

Setup MaxCDN to host all your static content.Test your website for delivery of static content through MaxCDN. Enter your website URL in Pingdom and test loading of different files for complete webpage loading. You will notice html file is delivered from your primary domain while static content is delivered from MaxCDN URL.

Setup CloudFlare to deliver html content

Now we will proceed one step forward to our previous setup where MaxCDN was tested. As we know that CloudFlare has different approach for content delivery. When you configure CloudFlare, all the request for your webpage are struck at CloudFlare CDN which look for cached content and non-cached content. Request for non-cached content is directed to their corresponding webhost URL while cached content is delivered directly from CloudFlare. CloudFlare do not store html in general setup but it can do so if we create specific page rule with condition to cache everything. In CloudFlare, when you say cache everything means it caches all the elements of that webpage including html.

You must know that CloudFlare cache resources which are on your website. It does not cache other domain resources like Google, Facebook. Here we get advantage that our static resources hosted at MaxCDN are not cached by CloudFlare so they are served directly. So in cache everything setup, CloudFlare serves only html.( When MaxCDN is already active).

page rule settings in cloudflare

You can create page rules from CloudFlare setup window. You enter the URL for which you want to create rules. Look at the examples.

Case- I

If you want to cache all the pages in your domain, you can enter URL like *yourdomain.com/* . Here * represent all. So everything before and after “yourdomain.com/ is acceptable. Now click on create page rule. In the page rule setting, set Custom caching as Cache everything.

Case-II

If you don’t want to cache some URL structure like *yourdomain.com/admin/* then enter this URL and create page rule. In the settings for Custom caching, choose Bypass cache option.

custom caching option in cloudflare

This way you can avoid cache of certain URLs and you can cache everything also. In the performance stings page of CloudFlare, you do not have option to cache everything so HTML cache can be done through page rules only.

Precaution while using CloudFlare and MaxCDN together

  • Be careful that CloudFlare should not cache your backend HTML page.
  • Be careful that admin pages are not caches.
  • Be careful login pages are not cached.
  • Be careful that your User login pages are not cached

These are all related to each other but remember to check them individually. There may be several page rule conditions which you may decide as per your website architecture. But you must remember to exclude these pages while creating page rule for HTML cache.

 

See more for CDN