Hi, I just subscribed to a Cloudflare free plan account and activated caching and minifying.
In the Speed -> Overview section, I performed a test wich looked good. My problem is when I go to pagespeed insight, the results are not the same at all. It’s still the same bad result as usual (maybe even a bit worse) and it doesn’t seem to show any caching since the resources are still loaded from my domain.
I only deactivate SSL just now because I already have a SSL certificate with my host (wich I pay for), and I wanted to see if it made a difference on pagespeed results page. It doesn’t.
So I can reactivate it but I don’t understand how it affects what is cached or not.
From Google page speed, it doesn’t seem to be any caching form cloudflare, regardless of my SSL certificate
You cant do that. The certificate on Cloudflare is unrelated to your server certificate and you need both.
The issue seems to be of the classic non-optimised Wordpress site type. I am afraid that would be rather a topic for a Wordpress specific forum though. For starters I would suggest you follow the advice Google is already giving you on that very page.
I registered on cloudflare in order to follow Google’s advice of using static elements. I see a lot of WP websites using cloudflare. They manage to cache. I’m really confused about why mine won’t let cloudflare display css and js files
Ok, that’s what i saw on the CF status page. So if they are cached, why are they still loaded from my server instead of CF when I test my url on Pagespeed? (Thank you for your time btw). Plus I had to manually hit “Test again” on the status page for each resource to be cached. I had an error on every first trial. It’s ok for now, but how come it is’nt automatic?
I can’t be having to do that everytime I purge the cache after editing my site…?
That shows the hostname of the URL, not that it was actually loaded from that host when you ran the test. You’d need to check your server logs at the time when you run a test. Only if a matching request shows up you can say for sure that it was not cached by Cloudflare.
As evident from my earlier screenshot, your files do appear to be cached (i.e. jquery.js).
You really shouldn’t look at the overall scores but the metric’s values measured over time to get your relative page speed. Field data origin summary would be that over time measurement rather than the lab data scores which is what the score rating is measured from.
When I have at least 6 resources that should (I think) be cached and be static. It’s like I’m using no CDN at all.
The only tiny sign of Cloudflare’s presence is the “cloudflare-static/email-decode.min.js” line wich doesn’t seem to be of any use.
I also use astra as my theme. I know that I have some js on my website, slowing it down. I’m not looking for a 100 score.
And I know there are other parameters to take care of
But I’m just kinda annoyed that the cdn doesn’t seem have any impact on browser caching and static content on my website and not having a clue why, and being able to fix it. I know that I have other optimizations to make, but if I just decide to take care of other problems when I can’t figure out how to fix the first one, I’ll end up fixing nothing
have you read the insights linked documentation on how to properly set browser caching on your origin web server ? The browser cache listing of resources is dependent on what you set for your web server’s browser caching for static assets and such cache control header is then read and passed on by cloudflare to visitors
The third way to control Cloudflare caching behavior and browser caching behavior all in one go is by using the s-maxage Cache-Control header.
Normally we respect the max-age directive:
But if a customer would like to specify a cache timeout in the CDN which is different from the browser we can also use s-maxage:
Cache-Control: s-maxage=200, max-age=60
This will tell Cloudflare to cache the object for 200 seconds and the browser to cache the object for 60 seconds. Basically, s-maxage is intended to be followed ONLY by reverse proxies (so the browser should ignore it) whilst on the other hand, Cloudflare gives priority to s-maxage if present. Note that we will respect whichever value is higher: the browser cache setting in Cloudflare or the max-age header.
where max-age set on your web server origin end is what controls browser cache time reported for assets in pagespeed insights where criteria is max-age needs to be greater than 30 days
example of cache-control header set on origin web server which is read and passed on by cloudflare to visitor’s web browser where max-age in seconds is 365 days for Astra theme’s font
By default, Cloudflare honors the cache expiration set in your Expires and Cache-Control headers. Cloudflare overrides any Cache-Control headers with values set via the Browser Cache Expiration option in the Cloudflare Caching app if:
The value of the Cache-Control header from the origin web server is less than the Browser Cache Expiration Cloudflare setting, or
the origin web server does not send a Cache-Control header.