Poor Bandwidth Savings

I’m relatively inexperienced, so sorry in advance for my naivity. Thanks in advance to anyone who may respond.

I have a simple blog (www.FrugalProfessor.com). As such, it’s my understanding that caching is optimal given that the content doesn’t change very often.

I’ve experimented with several caching plugins over the years, but I’ve converged on “Smush” for compressing images, “WP-Fastest Cache” for caching (which I have set to integrate with Cloudflare CDN, and “WP-Optimize” which I have configured to clean up the databases periodically.

It’s my understanding that I’ve created the correct page rule within Cloudflare to “cache everything”. I also have Cloudflare configured to AutoMinimize everything (and appropriately unchecked the corresponding setting in “WP-Fastest Cache” to avoid conflicts).

When I look at the Cloudflare analytics, it looks like a fairly high percentage of requests are cached, but when I look at bandwidth, it’s cached bandwidth is very low. I was under the impression that, once everything was configured appropriately, that the cached bandwidth percentage would be quite high.

Sorry in advance for my ignorance. Thanks in advance for your time.

Below is relevant the screenshots:

  • Cloudflare => Analytics => 50% of requests are cached. Cool.

  • Coudflare => Speed => Optimization: I’ve selected “Javascript”, “CSS”, “and HTML” under the Auto Minfy setting.

  • Cloudflare => Page Rules => frugalprofessor.com/ Browser Cache TTL: a day, Cache Level: Cache Everything

  • WP Fastest Cache => Dissallows “Minify” of HTML, CSS, JS because I do this in Cloudflare and don’t want to create conflicts.

  • WP Fastest Cache => I’ve set up integration with Cloudflare.

  • Google Domains: Points to appropriate Cloudflare name servers.

  • Smush => Have configured to compress images. However, I haven’t upgraded to their CDN feature.

Surely the disparity between relatively high cached request and very low cached bandwidth comes from my poor understanding of how images (the largest files on my blog) are cached. It was my understanding that I could cache a static version of this content on Cloudflare so that it wouldn’t have to be served by my server (BlueHost). Perhaps I’m misunderstanding that functionality within Cloudflare or perhaps I’ve got it configured wrong?

Thanks again,
Frugal Professor

Hi,

Your images are being properly cached.

Your HTML pages are not being cached, despite the Cache Everything caching level setting because your page rule has the wildcard but not the point. It should be *.frugalprofessor.com/* if you really want to cache all subdomains, or simply www.frugalprofessor.com/* for the www only.

HTML not being cached will interfere with TTFB, but does not mean much in terms of bandwidth.

My suspicion would turn to constant crawling or even attacks by bots, and if that’s the case, create Firewall Rules to try to stop them. Check your origin server logs to identify any persistent bots. Have a look at your robots.txt file and adjust it to prevent crawling by irrelevant bots.

You may also want to use Cloudflare’s Hotlinking Protection feature, at Dashboard > Scrape Shield.

1 Like

Also set the Edge Cache TTL for (N)days as fits your needs in conjunction with the Browser Cache TTL in that page rule. And consider adding the setting Origin Cache Control and manually set it to OFF. Because as it stands currently, your cache header is: max-age=0, no-cahce, no-store, must-revalidate and your Expires header is set for Mon, 29 Oct 1923 20:30:00 GMT (as of time of checking it).

Here’s an example:

1 Like

How much traffic do you get to all Wordpress pages/posts ? You have WP Fastest Cache set to preload cache, so it’s trying to warm up the cache by visiting pages first. This is only beneficial if you have alot of traffic long term and consistently over time when it comes to Cloudflare savings.

The reason why is because to warm up the cache, it has to request the page and assets I assume. So first time request is uncached on wordpress site and also if not in Cloudflare edge cache, would request page and assets at your origin server = cache bypass/non-cache hits. Then next request for same page/assets will be cached.

But if you page/posts don’t get any more traffic or very low traffic, then the cache hit request to requests ratio will be around 1:2 at the lowest point where there’s no subsequent traffic so ~50%. I wouldn’t be too concerned about bandwidth savings as the metric could be skewed - 100 frequented pages/assets get 90% cached but 1000 pages which only got accessed twice (for preload cache from plugin) at 50% cached but never again accessed would have an combined average for those 100+1000 = 1100 pages of 46.27% cached. That is still better than those 1000 pages getting no cache hit at all which then average for 1100 pages would be alot less ~0.818%

If those pre-cached less frequented pages are bandwidth heavy, then yes it can skew your cached bandwidth versus cached request metrics.

This also applies to regular page requests not just pre-cached ones - so requests with little traffic where 1st request is non-cached, 2nd request is cache hit and there are no 3rd or subsequent requests during the caching TTL period.

Also cache hits are per CF datacenter region too. So if you have lower or less traffic to some CF datacenter geographic regions.

Instead focus on your page load metrics provided by webpagetest.org / google lighthouse - see my guide at https://community.centminmod.com/threads/how-to-use-webpagetest-org-for-page-load-speed-testing.13859/ and also CF Browser Insights https://blog.cloudflare.com/introducing-browser-insights/

You can also inspect your servers local access logs to figure out which are most commonly requested files and check their caching ability

2 Likes

In this particular case, however, the site does not load on an iPhone 6 Plus, so there is a definite issue with speed as affected by caching. It loads fine on a Linux workstation and the latest iPad. I’d assume the experience is the same accross similar device tiers of various makes.