How To Force Cloudflare To Cache Resources

I’ve spent the weekend speeding up my site with Cloudflare. At the end of the day, here are my pagespeed results from Google’s Lighthouse tool:

As you can see, I’ve scored in the green for everything, and I already know what I have to do to reach 100%. And all of this was due to Cloudflare caching my resources. If you have Cloudflare installed, it’s probably already caching your CSS and JS files. But sometimes, you think it’s caching your resources, and it’s not. In this article, I’ll explain some of the things that can prevent Cloudflare from caching your files, and how to force it to do so.

Check if Cloudflare is Caching your File or Not

The first step is to see if your static files are being delivered from Cloudflare’s EDGE servers. To do this, first make sure that Cloudflare is enabled on your site. You should see it when you’re logged into Cloudflare like this:

Now load a page and take a CSS or JS URL. In this example, I’m choosing the following CSS file:

Now open up a shell command line (either Windows or Linux), and type in the following command:

curl -svo /dev/null [URL of File]

Replace [URL of File] with the filename you just got. In the output, look for the line starting with:

CF-Cache-Status:

You will most likely see a MISS like this:

Which means that Cloudflare has NOT cached your file for this location. Now run the command two more times at the most. If you see a MISS even on the third try, it means that something is wrong and that Cloudflare is not caching your resources.

If you are configured correctly, you will see a HIT on the consecutive tries:

This is how you force Cloudflare to cache a specific file. But what’s happening?

Why MISS and Then HIT?

Cloudflare has EDGE servers located around the globe. At last count, it was over 155. That means no matter where your visitors are, they have a Cloudflare server closeby. The caching process works like this:

1. Visitor requests a cacheable URL
2. That URL is not cached by default on that particular EDGE server
3. The EDGE server requests the URL from your origin server (your main site)
4. Your site delivers the URL to the EDGE server
5. The EDGE server delivers the URL to the visitor
6. For subsequent hits to that EDGE server LONE, the URL will be cached

Now this is a problem. It means that first time visitors from a particular location are actually getting slower page speed times with Cloudflare. That’s because there’s an additional step of the EDGE server requesting the URL from the origin – instead of the visitor requesting it directly.

True, subsequent visits will be faster. But with so many servers, that’s a LOT of visitors who are getting very low page speed times.

Argo is a Possible Solution

In an earlier tutorial, Ryan had written about Cloudflare’s “Argo” service. While he focused mainly on the latency aspect, there is what I consider to be the most important part – tiered caching. With Argo, whenever an EDGE server doesn’t have a file, it checks the other EDGE servers to see if they have one. If they do, then the file is transferred to it from one of Cloudflare’s own servers.

This has two huge benefits:

1. Your site is hit just once for all cacheable resources
2. Cloudflare transfer times between servers is far faster than from your origin server

In fact, I’m going to experiment further with Argo and cache even my HTML. With Argo, HTML caching actually becomes useful since my origin server won’t have to do much work. The tricky part is modifying cache headers for HTML, creating accurate page rules, and figuring out how to bypass the cache when I need to do admin work, or write a new post.

But for now, use the technique above to force Cloudflare to prime a specific EDGE server if you’re expecting visitors from that location!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!