With the last updated Wordpress 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!
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:
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.
Unfortunately the mobile page of the website does not have any subpage or subdomain to separate, its embedded into the newspaper theme and probably it depends on the client device to recognize it .
I found this article from the documentations but it offers very old and not workable plugins!
Even the Cloudflare plugin cannot do the job as the article describes!
In the speed tab of the Cloudflare dash the optimize delivery Automatic Platform Optimization (APO) I think it can help as it enables Changing Cache By Device Type as I read, but its not free and I want to test it before purchase.