Helllo, I don’t work for Cloudflare, I am just one of their users, who has spent a long time doing optimization on my own site - so I am writing with a few tips that have helped me improve Page Speed.
Speaking from my own experience, I definitely feel it is worth persevering with Cloudflare as it will help page load times, particularly for users who are geographically a long way away from your hosting server. For example, if you’re in the US and get visitors from the Far East or Europe, Cloudflare will be significantly speeding up the load times of your site’s assets. But on its own it’s no magic solution to a slow loading site.
What Cloudflare won’t do is eliminate all the render blocking code which may be running on your website. Common problem areas include render-blocking stylesheets and Scripts, both of which can significantly worsen load times. Your Total Blocking Time (TBT) implies that render-blocking by scripts or stylesheets could be an issue on your site.
There is a setting in Cloudflare that you could try which optimizes JavaScript delivery (this may improve page load times). You can find it in your Cloudflare Control Panel under “Speed” > “Optimization” > “Rocket Loader”. Rocket Loader reduces the number of render-blocking Scripts. If you enable it, be sure to test your website thoroughly afterwards to ensure that functionality is unaffected and nothing is broken.
Another feature to consider is Cloudflare APO, which I am playing around with myself. It costs $5 per month, but offers speed benefits by also caching HTML, as well as site assets. In addition, caching performance is improved to the Edge servers. Caching HTML alone helps, as it prevents the round trip delay to your web server to fetch a web page. This improves Time To First Byte.
You don’t say what platform your site is built on. If it’s Wordpress I have had great success using two plugiins alongside Cloudflare. These are WP Rocket and Asset Cleanup Pro. When configured correctly, these plugins further reduce unwanted stylesheets and Scripts and will give you greater control over which assets load on which pages. They seem compatible with Cloudflare. On my bought Wordpress Theme it was amazing the amount of unwanted junk that was loading, including so many unused Fonts, stylesheets and unnecessary scripts.
The Google Chrome Developer Console (part of the everyday Chroms browser) is a useful tool too. It has a feature called “Coverage” which identifies unused styles in stylesheets. In my case this helped reduce the bloat from the main Theme stylesheet, reducing its size down to 70KB from 410KB. I then went to town with some of the bloated plugin stylesheets and sorted them out too.
I also notice that your Cumulative Layout Shift (CLS) is well above the 0.1 limit for Core Web Vitals. You might want to check that you have width and height dimensions specified for all above-the-fold images and that any advertisements that load with the page have space reserved for them, to prevent layout shifts. If you’re using stylesheet optimization, make sure styles which load the top half of your page are not deferred as this can cause layout shifts. Ideally Critical Path CSS should be generated and deployed to ensure layout shifts caused by late loading styles are eliminated, I had a big problem with CLS myself, which I solved by applying minimum heights to various page sections to avoid them changing height at load times. I also turned off WP Rocket’s CSS optimization setting as that was a primary cause of CLS. My CLS is now <0.07.
In summary, I came from PageSpeed Insights mobile scores in the 30’s like yours and now have scores in the 80’s for the most part. Some even in the 90’s. The mobile score will always be more challenging as it emulates a throttled back 3G mobile network.
Good luck, but don’t give up. It takes time to solve these issues.
Steve