I’m having a strange issue and I hope one of you could help me please. I’m using the plugin APO from Cloudflare in my Wordpress website, and I have applied to the recommended settings of the plugin.
I’ve been having the CLS in random pages of my website, however, when I see my website on Wordpress - preview I don’t see any problem. The CLS issue appears only on some pages, and when I purge this pages the problem is gone. Because I don’t see the issue on my Wordpress-admin area and because when I purge the pages the are fixed I think that it is some time of conflict with the cache.
I don’t have the Rocket Loader on by the way, as I realized that it didn’t help in performance but made the website a bit slower.
The only way to temporarily fix the problem that I have found is to check my entire website every single day, page per page (I have about 170 pages) and purge the ones that have the issue.
My website is: https://mayangateway.com/ but as I said, it is necessary to explore it to find a page with the problem.
I really hope someone can help me here with this very strange issue. I’m not an expert and I am a no-coder by the way.
To help you on this we would need to see a site while it does have the CLS problem and analyse it before and after you purged the cache. So as soon as yxou encounter this problem the next time, just post the direct link here and do not clear cache untill we analysed it.
Thank you Martin for your reply. I have had problems with the cache for two months already. I will try to explain you as short as possible here:
I upgraded my plan to Business in order to be able to use the Page Rule - Cache Everything - with Bypass Cache on Cookie. Because I have a Wordpress website. But it broke pages of my website daily, so I created several page rules to bypass the files that were creating problems but this solution was not sufficient. I contacted customer support for weeks, the ticket has many messages but I couldn’t find a solution either with them.
I uploaded APO and disable the Page Rule - Cache Everything - with Bypass Cache on Cookie. I know that APO also applies this rule, but I thought APO could handle it in a better way so pages were not broken. The issues continued, broken pages and lately CLS, so I downgrade my plan to PRO so that APO didn’t apply this rule anymore.
However, the problems continued, CLS and broken pages, so yesterday I disabled APO and the problems disappeared. Perhaps what happened here is that even though I downgrade from Business to PRO, APO somehow kept using the page rule Cache Everything?
The issues are now fixed, but the performance of my website has decreased considerably. I don’t have any other cache plugin at the moment. I’m scared of installing APO again, what do you think? Should I try to install it again?
I’ve also spent many hours looking for the best Page Rules to improve performance for a Wordpress website. But I don’t find an official document from Cloudflare - only recommended page rules but in general. I did find this YouTube video, and it seems that it is from the channel of Cloudflare: Page Rules for WordPress - YouTube
Would you recommend any page rules to improve performance for a Wordpress website? At the moment I have this page rules: (most of them I took from the Youtube video)
Thank you Martin, I appreciate it. Yes my GPSI values are good actually. However, I’ve not been able to find a solution for all the issues caused by APO. My website performs better when I use APO or the Cache Everything page rule with Bypass Cache on Cookie - I have visitors from different countries, and that’s why I am trying to have APO (and before when I was in the business plan the Cache Everything page rule).
The customer support advised me to create a page rule with has fixed the problem with broken pages:
Some CSS/JS re-generated Elementor files were causing the issues when CloudFlare caches them.
The other problem with the CLS, I have not been able to fix it yet. It seems that it comes also from Elementor files. It seems that Elementor is generating different files for different devices. When visitors access my page via mobile device some different CSS/JS are loaded and when they access the page via desktop some other files get loaded. Let’s say that the first request of a page X on my website comes from a mobile device and hence CloudFlare caches a page X with whatever content and HTML structure it had. Now when the same page is being visited from a desktop, the PHP is not getting parsed anymore and Elementor is not able to add the new dynamic styles for the desktop instead the page is served via the CloudFlare CND cache. Now as CF initially cached it for the mobile, it delivered the page as it received it initially causing the CLS issue, and for this reason it is necessary to purge the cache to fix it. This is what I think it’s happening.
Obviously, I don’t see the CLS issue on preview in Wordpress-admin, and as I said, I can fix it easily by purging every single page that I find with the problem - but I need to be checking all the website daily to do that. The easy option is to disable APO, but the website looses significantly performance.
Do you have any idea what I can do about this?
Thank you again,
