Combine Amazon Cloudfront with Cloudflare?

Question

Has anyone tried to combine Amazon Cloudfront with Cloudflare, as below:

1. In Cloudflare, add example.com to Cloudflare and update the DNS to proxy the website.
2. In Amazon, add a Cloudfront distribution and add www.example.com as an origin.
3. Rewrite the URLs of the static files on example.com to use the URL of the distribution instead of example.com, with a WordPress plugin, such as WP Rocket.

In such a way:

1. The dynamic generated pages are proxied by Cloudflare CDN.
2. The static assets are proxied by Cloudflare CDN, and then cached by Cloudfront CDN. And the visitor will finally retrieve the assets from Cloudfront Edge server. If Cloudfront Edge server miss the asset, it will try to obtain it from Cloudflare Edge server, if Cloudflare Edge server miss the asset, it will try to obtain it from the original server.

I have searched online but cannot find any other articles or posts discussing about this. But based on my tests, due to two level of CDN caches, the static assets in 2) are faster than just using one level(such as Cloudflare CDN).

But will there be any issues on such a way?

Update

Based on my tests:

1. For small file(24.6kb), Cloudfront has the best performance. Better than Cloudfront + Cloudflare.

2. For large file(12.2MB), Cloudfront + Cloudflare has the best performance, about 8% faster than Cloudfront.

I perform test as below:

1. Min TTL/Default TTL/Max TTL of Cloudfront set to 30 days. There are no way to set the edge TTL in Cloudfront.
2. Set Edge TTL for Cloudflare to 14 days.
3. Clear all the cache for both Cloudfront & Cloudflare.
4. Immediately after step 3, run test from 227 servers around the world, and record the total download time.
5. After 3 days, collect the data and analyze them.

One possibility of improvement in combining Cloudfront + Cloudflare is the route, which may use a better route than using Cloudfront or Cloudflare individually. And the route is more prominent for large files?

Update 2

After studying the statistic data further, I find some interesting points:

1. In most of the checkpoints, the performance of the Cloudfront + Cloudflare(abbreviation to C+C) vs Cloudfront(abbreviation to CF) are close. But in such checkpoints such as Jakarta, the C+C is 1.6s while CF is 12.39s. As the final result is generated based on average, a exceptional bad data makes the final result of CF worse than C+C.

Answer 1

Layering up two CDNs at once is like layering up two raincoats at once - it's redundant because it's not designed to work in layers like that. Like a single raincoat keeps you dry, a single CDN keeps your resources fresh at the edge.

Any speedup you see by using both CDNs could be more directly achieved by using one CDN with properly set cache expiration settings. If you think about it, why would one want to purposely create a situation where they have a CloudFront miss but a CloudFlare hit? That just means that their CloudFront cache expiration is set to be sooner than it needs to be, because it ends up doing some useless work of re-retrieving the stale asset from the CloudFlare CDN, which has still not pulled an update from the origin yet.

The optimal cache expiration setup would be to have both of the caches expire simultaneously - but in that case it's clear that the "middle" CDN is redundant and does nothing but increase CDN costs and cache miss retrieval times. Thus a single-CDN setup should always be optimal assuming it has cache expiration controls, which both CloudFlare and CloudFront do.

If you're seeing increased performance for the two-CDN setup, I believe that means that one of your CDNs is sub-optimally configured. Test to see which CDN is better for you (test HITs against HITs and MISSes against MISSes), then pick a single one for the best performance.

Lastly, any positive routing effect of the two-CDN setup should be negligible unless a good portion of your users' visits are cache misses, because requests to your origin server are only made while fulfilling a cache miss. Even on a cache miss I would be skeptical that it could ever be faster for a packet to route from CloudFront -> CloudFlare -> Origin and back than to take a simpler route from Cloud[Flare/Front] -> Origin. That kind of routing could only be more optimal if both the user has a noticeably faster route to CloudFront than CloudFlare AND CloudFlare has a noticeably faster route to your origin server than CloudFront does, AND those gains are not undone by the extra latency in the additional hop from CloudFront to CloudFlare, a situation that is very unlikely imo.