So, I set up cache everything rule like this: www.example.com/ and I can see the JS, CSS, Fonts, Images are getting cf-cache-status: HIT. However, HTML get cf-cache-status: MISS.
When I visit the page the second time or refresh the page it gets hit status. is this normal ? If not how to make it get hit just like the JS, CSS, Fonts, Images?
The first time, it’s not in the cache yet, so it’s a MISS, and it gets added. The second time, it’s in cache, so it’s a HIT. This sounds like expected behavior.
so is it browser caching that depends on the visitor’s browser? I do not think it is normal behavior, I have seen a website get hits all the time I think the settings are not correct or something. I see all other things get hit but not the HTML.
The first time a file is requested from a particular Cloudflare POP, it will hit the origin server; that’s what MISS means. (If the file wasn’t meant to be cached it would not say MISS.) Then the file gets cached and the next request should be HIT.
This is how it will work for all files; the reason it may look different for your CSS or JS is that you’re probably loading the same CSS and JS files on multiple pages, so when you hit a new page, those are already in the cache while the HTML isn’t.
I agree and this is how I understand it. CSS and Javascript are used on many other pages that they always get HIT because it is not the first time visiting them but not the case with HTML. However, I noticed that even using incognido mode and visitng the site for the first time “after clearing the browser cache” CSS and JS still get HIT but not the HTML.
I checked another website, and the HTML get hit ALL THE TIME regardless. Do you think using APO will help in this case instead of using page rules?
The browser cache is completely separate and has nothing to do with it. If a file isn’t in cache at the POP you’re hitting then the first request will be a MISS, and at that point it will be added to the cache. The next request should be a HIT. You can’t have a cache hit if the file isn’t in the cache yet.
CSS and JS often have longer cache expire times set. You can check your origin server’s Cache-Control headers for that.
When you check some other site, that site’s files may already be in the Cloudflare cache. Also, when a Cloudflare cache fills up, free accounts are likely first in line to be removed from cache.
You can enable more advanced cache products like Tiered Cache and Cache Reserve and so forth (not for free) that can increase your cache hit ratio.