Mobile page theme and Cloudflare/caching plugin integration

Hello,

With the last updated Newspaper theme 11.2, I have enable the mobile home page to arrange the elements to my needs when visitors uses their mobile to visit my website.
In production site I use WP fastest Cache and this cache plugin uses a separate caching for mobile themes so its works great with Newspaper theme, it caches BOTH Desktop AND mobile page template without many errors.

With many trials and errors I figure out that Cloudflare enabled websites are much faster than sites with simple caching plugins like mines. So I created a staging website (https://exclusiveweb.gr/) cloned from production and started to implement the cloudflare integration. This thing works but because of cloudflare maybe does not have a separate mobile cashing crawler, after I purge the caching, when I first connect with mobile smartphone after the purge, it keeps the mobile theme cached and it shows the mobile template to BOTH Desktops AND mobile phones. If I first connect with my desktop it keeps the desktop to both devices etc. so I have all the component in the wrong order…

I did a little research with other caching plugins like WP-rocket and I still have the same issue with cloudflare, the plugin does not understand the separation between the 2 templates and it keeps showing me the first cached page according with the device it connects first to the website after the purge.

I want to inform you that https://exclusiveweb.gr/ is a testing/staging environment and we could make all the necessary tests to it until we find a solution to a trouble I think it concerns many of your clients!

Kind regards,

Mike

Hello again,

I also attach the answer of a community member in cloudflare forum.

<><><><><><><><><><>
Hi Mike,
I’m assuming you’re using Cache Everything. In that case, Cloudflare will cache the page based on its URL, and deliver that to any device that requests that URL. So if you theme has any adjustment that changes content based on device, this would only work if you turn off Cache Everything on Cloudflare, making each request reach the origin.
For separate mobile/desktop versions to work properly, you’d need to create them under separate URLs, such that the mobile version would be somehow distinguishable from the desktop one:
https://mobile.example.com/some-page/
or
https://www.example.com/mobile/some-page/ > mobile
or
https://www.example.com/some-page/?device=mobile
So you’d need to contact the developers of either your theme or cache plugin to ask them if they have any way to separate the mobile version into another subdomain, subdirectory, or query string.
If you opt for the subdomain, you can set Mobile Redirect on Cloudflare by visiting:
https://dash.cloudflare.com/?to=/:account/:zone/speed/optimization
An inline JavaScript could be used to perform the mobile redirect based on device, if you only have the options of subdirectory or query string. Since an inline JS would be cached along with the HTML, it would be present in every page and only act after being on the device.
Then of course there’s the possibility of using Cloudflare Workers to control the redirect and caching. Workers is a paid service, but it does have a trial version. Please check the documentation for examples, tutorials, etc.
https://developers.cloudflare.com/workers/

<><><><><><><><><><><>