Why developing widgets at MFY we’ve to make sure that once our customers embed our widget, we’re not slowing down their website. Our widgets mainly consist of a JavaScript file (hosted in Netlify) and an API call to our NodeJS server (hosted in Google Cloud). This guide is about how I reduced our response time of API-endpoint from 800ms to <100 ms using Cloudflare

Our servers are located in San Francisco and I’m located in India. Due to latency, we saw that it’s taking around 800ms to 1000ms to get the response here.

without Cloudflare (941ms)

with Cloudflare (78ms)

Why Cloudflare

I was already a big fan of Cloudflare. I use it for my every single project. It’s

  • Free
  • Super Fast
  • DDoS protection
  • CDN
  • DNS

So my next thought was, why not cache the response in Cloudflare?

They’ve around 165 data centres all around the world.

If you could cache the response in these edge servers, it would be super fast! Plus, these requests never hit your servers

Cached requests that are not reaching my server

How to Cache JSON API response in Cloudflare?

By default caching is ON for static files. But for application/json GET requests, cache it’s disabled.

Let’s enable it for our end-point by going to Page Rules -> Create Page Rule

The endpoints I need to cache is something like https://api.mfy.im/widgets/XXXX

By this rule, you tell Cloudflare to cache the response in their servers for a month (TTL). Once 1 month is over, they’ll send the next request to your server and cache again.

Note: Whenever cache expires (or it’s not cached yet) the next request will always hit your server

How to check whether Cloudflare has cached your request or not

Open Network panel in your Chrome dev tools (Ctrl+Shift+J or Ctrl+Option+J). Now open the URL that’s set to cache.

On clicking the corresponding requests from the bottom list you can see ‘Response Headers’.

cf-ray indicates that the request was proxied by Cloudflare

cf-cache-status indicates the request needs to be cached and it’s the current status

  • HIT – Response was from Cloudflare’s CDN
  • MISS – Retrieved from the origin server, will be cached soon
  • EXPIRED – Somehow cache got expired, will be cached soon

How to Clear Cloudflare’s Cache

The next thing that has come to your mind might be “What happens if data changes, DB updates, how can I clear cache?”.

You can tell Cloudflare to clear the cache by sending a delete requestPurge Files by URL (Or you can manually clear it from the “Caching” tab inside Cloudflare) Here is how I wrote:

Clear Cloudflare cache through API