wp_is_mobile not working

Hi @jorgehoffmann,
Unfortunately, wp_is_mobile() will not work with this plugin out of the box considering how page caching works. You see when a page gets cached in Cloudflare CDN after receiving the first few requests, it doesn’t know about the device from when the page is being accessed. As CF just caches the page HTML.

So, after the page is cached when another user requests for the same page, instead of sending the request to the origin server, the page HTML gets served from Cloudflare CDN. This is an oversimplified explanation of how CDN-level page caching works.

Now once the page is cached, as I said the requests never come to the origin server at all, so no PHP gets executed to check what kind of browser the user is using, as a result, any device-specific function like wp_is_mobile() will not work. In order for this to work, you need to ensure that there is no page cache and that all requests are handled and served by your server’s PHP engine which leads to a slower web page load.

As a result, if you want to run some code of logic that is device-specific, generally it is highly recommended to do so at the JavaScript level, as JS runs on the client side and has no effect on whether the page is cached or not.

Alternatively, if you use a theme where you have a separate design/theme for the desktop users and a separate theme/design for the mobile users, in that case, I would highly recommend you to take advantage of the new Cache Rule support added by the latest version of the plugin.

If you are using the latest version of the plugin with default page rule mode (if you are using worker mode, then disable worker mode in order to use this), then simply go inside the plugin settings > other tab and scroll down to the end of the page where you will see a new option named Remove Cache Buster Query Parameter. There you will also find the link to the Implementation Guide (https://gist.github.com/isaumya/af10e4855ac83156cc210b7148135fa2).

Make sure that you have read the implementation guide thoroughly and added all the Cache Rules mentioned in there inside your Cloudflare account before enabling the option inside the plugin settings.

Now when you will look at the implementation guide and especially Cache Rule No. 4, there you will see an option is there to enable Cache By Device Type. Enable that option and then Cloudflare will have different page cache at the CDN level for different device type. This will solve your problem of having different theme/design based on device types.

Note: When you enable the Cache by device type option inside the Cloudflare Cache Rules, the device checks will be done at the Cloudflare CDN level and not at your origin server. So, basically if someone if accessing your webpage from a mobile, the CF CDN will see that it’s a mobile device and then check if CF has a cache for the webpage for mobile devices. If it does then cache will be served if not then the page HTML will be fetch from the origin server and cached inside Cloudflare CDN.

Do Note: As you are asking Cloudflare to create cache key based on device type, your cache HIT ratio might decrease after turning on this option. This is why generally it is highly recommended to have a responsive design website so that you don’t have to cache pages based on device types.

Thanks for the answer. I’ll follow the steps and come back to you.

Unfortunately I followed the steps with attention but the cache still gets or mobile or desktop e shows for everyone. I had to unistall the plugin for now. I’ll try to remove all the wp_is_mobile in my code, but metabox makes it almoust impossible. Thanks anyway.

Hi @jorgehoffmann,
So, in the Cloudflare Cache Rule when you have selected the option to have device specific cache, that did not work? Huh! That seems wrong and impossible. Did you purged the whole cache after implementing the cache rules?

In the fourth cache rule you are supposed to enable this option which is not enabled by default as per the implementation guide.

• This reply was modified 2 years ago by iSaumya.

Yes, I paid attention to every step, creating the rules and selecting “by device type” option, enable “remove cache buster” plugin option and clearing all cache. Maybe I miss something, but it really didn’t work for me.

I replaced all wp_is_mobile() functions from mycode for equivalent CSS or JS, installed this plugin again witout the set of rules and etc. It really is very nice plugin and my site is loading really fast.

Hi @jorgehoffmann,
I’m super happy to hear that. ??

Hello, thank you for the detailed instructions on how to accomplish this goal. I have a news website with tagdiv newspaper theme, which I believe makes use of the wp_is_mobile() function to determine the device and then load the mobile or desktop theme. I followed all the steps in this thread but I still get a mobile or a desktop versione cached for everyone. Ok, this is the expected result with themes using wp_is_mobile(), but is there a way for cloudflare to cache the correct page? Maybe sending a user-agent or something like that? Thank you, Michelangelo.

Hi @playerone86,
When you set the cache by device type option in your cache rules, Cloudflare is supposed to cache pages separately for each requests checking if the request is coming from desktop or mobile. It already looks at the user agent to achieve this. Read more here: https://developers.cloudflare.com/automatic-platform-optimization/reference/cache-device-type/

If the cache by device type is not working, then you need to check if you can use the theme without using the wp_mobile() or you need to send a support ticket to Cloudflare asking them why it is not working. But it is supposed to work.

Hello @isaumya your helpful reply made me do a double check of how I set up everything, and it turns out that I had written my hostname without www. Added it in every rule and now it works perfectly. Thank you! This plugin is a lifesaver for those heavy-a** websites!

Hi @playerone86,
So happy to hear that. If you love using the plugin, please consider sharing a review in the review section of the plugin. ??

Sure, I made a well deserved review. As for now, I still have a issue with this setup: in the cache behavior settings, if i flag just “Purge cache for related pages only” the mobile website is never updated and is always showing the cached version. The homepage had the articles of 3 days before. The only way to have the mobile site updated was to flag the second option “Purge whole cache”. But on a news magazine with many updates daily, this means purging the whole cache a bit too often. Is there a way to achieve the same result only purging cache for related pages?

Thank you

Hi @playerone86,
I know, that is why I personally never recommend using the device-based page caching option. This is because when you are enabling it, Cloudflare is creating separate cacheKeys for each device type and for each URL. So, when the plugin purges cache, it only purge the cache of the main URL and not the device type cache keys (as it is computationally impossible and useless), as a result you see that problem where other device type cache is not getting purged.

As a result you are forced to use Purge Whole Cache option in order to purge the entire cache which will include the device type cacheKys as well. But if you have a high traffic news website this will then lead to high cache MISS. But there is nothing that can be done about it.

Honestly, that device based caching option is given just for site like yours as in 2023 no website should have such thing. We have come a long way in terms of web development and all websites should be fully responsive so that we have 1 URL that works across devices and there is no server level device type checking needed.

If you have a good responsive site, you won’t have any issues with this plugin as there is no need to create cache keys based on device type. So, I’ll suggest you rebuild your website (if possible) is a fully responsive manner without using any server level device checking logic.

Otherwise, if you want to use device based cacheKey you have to use purge whole cache.

Dear @isaumya , yes you are right, to me having a mobile theme is a lot more effort and something that in 2023 shouldn’t be required. Our theme, tagdiv newspaper, which is quite popular for news webistes, is indeed responsive if the mobile theme is disabled. So why are we still using its mobile theme plugin? Short answer: because Google is forcing me to do so. When we try using only the responsive version of the theme, we get a performance score of about 80 for mobile pages, with core web vitals tests not passed, instead of 99 when the mobile theme is activated. And even so, we still have in our search console, some warnings of LCP longer than 2,5s for some hundred of pages. We can only imagine what crazy warnings we would get using the responsive version. For the SEO of news websites the performance is crucial, and that’s why we still have it configured like this.
The purge whole cache is not a big problem, the preloader does a good job of recreating the cache. Though I still have one issue which is randomly happening: sometimes, when we publish a new post, a random article is displayed in place of the mobile version of the homepage. Purging the cache makes the mobile homepage come back at its place, but we don’t always notice it that fast, so it may stay some hours like that before we do purge the cache. Do you have any idea of why this would happen? Or something we could try to fix this?
I already tried without luck:
– disabling w3 total cache (which anyway was used for anything but page caching)
– adding the homepage to the preloader
– excluding amp pages from caching

If you don’t happen to have anything coming to your mind, is there maybe a way to exclude mobile pages from caching, and having them (and only them) cached by disk, even with a 3rd party plugin? The mobile version is quite fast, so the great benefit we are having with cloudflare super page cache is by having the desktop version being cached. Thank you for your help, Michelangelo.

Hi @playerone86,

If you don’t happen to have anything coming to your mind, is there maybe a way to exclude mobile pages from caching, and having them (and only them) cached by disk, even with a 3rd party plugin?

Unfortunately that is not possible

I personally don’t like newspaper theme as it is not created performance in mind. Any theme should first be created with mobile performance and CWV in mind and then make the desktop version. But Newspaper is not like that.