If this support question falls out of the scope, please let me know.
We are using the Cloudflare free plan and a 3rd party plugin to convert all our images to WebP (EWWW Image Optimizer). We have enabled a “JS WebP Rewriting rule” and a “Picture WebP Rewriting rule” in the settings of the plugin.
I’ve cached the Cloudflare cache, and tried to load the site and inspect how the images load via the inspect tool in Chrome. First I received an “EXPIRED” in the cf-cache-status (which I can read is normal behaviour after purging the cache), and after refreshing the site I received a “HIT”. I also did a GT-Metrix waterfall analysis on the front page, and there it gets all “HIT” on images. However, upon browsing around the website, some images receives a “MISS” even after refreshing the page.
The configuration we have made seems to work inconsistently. Do you have any idea of this inconsistent behaviour? I suspect it has something do something with the headers, but I am not sure.
The first rule is all you need. Try removing the second rule and see if it works better as far as HIT/MISS ratio goes.
In any case, keep in mind that support for WebP has increased considerably and the benefit of keeping even the JS WebP Rewriting rule will be marginal (mostly needed for old IOS users). Last I checked, this plugin’s JS WebP Rewriting rule would add both a small base64 image and a not so small JS code to every HTML page of your website, even pages without any pictures on them. You need to consider how much of your website’s audience comes from old IOS devices to see if using the JS rule still justifies.
We removed the Picture WebP rewriting rule, and I am not able to identify any MISS anymore. However, we did notice a lot of “EXPIRED” along with an equal rate of “HIT” for WebP images. Is there any logical explanation as to why some images are HIT and some EXPIRED? I tried to refresh the page a few times, but it remains the same.
EXPIRED is a common result if your origin is sending certain headers, such as Cache-Control with a “must-revalidate” directive, or Expires. From the visitor’s perspective it’s the same as MISS.
I’ve checked one of the WebP images that returns EXPIRED, and the cache-control is set to “public, max-age=604800”. Upon reading the Cloudflare cache control documentation I noticed that there are several directives that can be set on the origin. I’ve also looked into the Cloudflare Cache rules which can be set up from the dashboard. Would you happen to know which directive and Cloudflare cache rule that could potentially return a HIT on all our WebP images?
There’s never a guaranteed HIT from Cloudflare cache, because it depends not only on the Cache-Control from the origin, but also on Cloudflare’s caching and eviction policies. Less often requested files will face more MISSes and EXPIREDs, while files that are often requested tend to get a HIT. Then you have the fact that regular Cloudflare cache is done at each datacenter, meaning that 2 requests that happen to reach Cloudflare through different colocations (say, IAD and ORD) may both get a MISS.
You can override Cache-Control with Cache Rules using the Edge Cache TTL (which controls cache at Cloudflare) and Browser Cache TTL, and that may help elevate, but not guarantee, the number of HITs. However, since WebP is a static file that is cached by default, and considering you have said it comes with a a max-age directive, you shouldn’t need to worry about it for this specific case.
Also, APO for WordPress (paid add-on for Free Plan) will cache HTML pages in all colocations, and Cache Reserve (paid add-on) will do the same for static files.