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.
You probably have your SSL mode set to “Flexible”, which is strongly discouraged. Change it to “Full strict” and make sure you have a valid certificate on your server as well.
From what I seem to be able to tell you should have a valid certificate anyhow, so just switch to “Full strict” and the site should load, which should also fix the error on Google.
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 issues Google is referring to seem to be mostly JavaScript related and this is something Cloudflare cannot and will not influence. You can try to enable Rocket Loader, but thats not a guarantee either.
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.
So (sorry I’m trying to understand), you’re telling me that there’s no way to cache those resources (exept for the googleapis ones), slowing down rendering?
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).
Google PageSpeed Insights v5 is heavily weighted towards interactive and speedindex and first contentful paint metrics on 3G moto g4/nexus 5 device emulation. So for dynamic and javascript heavy sites, 3G mobile score or heavily render blocked asset based sites, the score will be lower. From v5 API this is the weighting used to determine the score
interactive 5
speed-index 4
first-contentful-paint 3
first-cpu-idle 2
first-meaningful-paint 1
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.
Cloudflare CDN and features can speed up some aspects of your site but if you have alot of 3rd party javascript which isn’t hosted and served off your domain, then Cloudflare and any other CDN won’t be able to help accelerate those files and PageSpeed Insights score won’t change due to either amount of javascript you are serving and/or how it is served i.e if it’s render blocking or not - which comes down to the layout and theme of your site which Cloudflare won’t be able to 100% fix as it’s a style specific factors that you decide on.
Yes for Wordpress the choice of theme also matters some themes are javascript heavy so Google PageSpeed Insights will be poor and page load speeds will be bad. This is my optimised Wordpress blog behind Cloudflare free plan using Astra theme - it removes all jquery from the theme = automatically much faster base to work with due to reduced render blocking
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:
Cache-Control: max-age=1000
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
on my nginx server origin backend I set my cache control header for web fonts to expire 365 days - if you use apache web server, you would have it own method of setting cache control headers via mod_expires https://httpd.apache.org/docs/current/mod/mod_expires.html
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.