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.
What am I missing here?
I get an error message to begin with.
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
Except for the font resources you can cache the others which originate from your server, however these are already being cached now.
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…?
Have you verified that the file is actually loaded from your server when Google is requesting it?
I’m not an expert but I think that’s what it means, right?
I compared to css tricks performance, there is only 2 lines there. Everything else is cached
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).
Where do I check my server logs?
On your server 
Ok, I checked, the resquests are going to my server. I spent hours on this, I give up. I’m gonna look for another CDN. Thank you for your help though
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
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.
My write up on PageSpeed Insights v5 update at https://community.centminmod.com/threads/google-pagespeed-insights-v5-update.16016/
For pagespeed tests, also use webpagetest.org for pagespeed testing - my guide at https://community.centminmod.com/threads/how-to-use-webpagetest-org-for-page-load-speed-testing.13859/
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 
Cloudflare Speed Tab
Google PageSpeed Insights
Hi eva2000. I understand that 3rd party js won’t be cached by CF. My problem is that none of my js or css files and cached properly.
I tested your website. I would be happy if I could at least see some caching rules appearing here for my own website
leading to fast render andthe great score you have for First Contentful Paint.
But instead, what I get is
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
More info on how cloudflare only caches what your origin web server tells it to by default https://support.cloudflare.com/hc/en-us/articles/202775670-How-Do-I-Tell-Cloudflare-What-to-Cache-
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
on nginx
location ~* \.(eot|svg|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
access_log off;
expires 365d;
}
Apache browser cache https://gtmetrix.com/leverage-browser-caching.html
And read https://support.cloudflare.com/hc/en-us/articles/200168276-Understanding-Browser-Cache-Expiration
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.