Mobile caching not working as intended

Hello @beats247

Thank you for your inquiry and I am happy to assist you with this.
As I can see you don’t have the W3 Total cache enabled at the moment. I’ve checked your website and I can confirm what you are saying. However, since the W3 Total Cache is not enabled and the issue is still there, this means that the issue is not related to W3 Total cache but your Theme appears not to be mobile responsive.
This being said, the issue is not related to cache so you should check with your theme devs about this issue.
Thanks!

Hello Marko,
thanks for your quick reply. However, the W3 Total cache is enabled. Where do you see it’s not enabled? https://prnt.sc/106rsro
The issue only appears with your caching plugin enabeld. My theme also is responsive. I never said anything differently?
When the caching plugin is disabled, why do you think it would show the desktop theme on mobile? Well, it doesn’t… ?? Only when your plugin is enabled as it is right now.

I know you want to solve issues and help out as quickly as possible, but sometimes it’s better to take a bit more time. The issue is not resolved.
Thanks though.

Hello @beats247

Thank you for the information.
Can you please share the screenshot of the Performance>Cache Groups?
Have you created new groups or used default?
You should not use Pass through if you don’t have any mobile plugin, so you need to select your current theme.
Thanks!

Hello Marko,
I have enabled your default mobile cache group. As mentioned, I have tested both, pass through and my current theme Martfury child. Both settings have no effect.
Settings: https://prnt.sc/106xrjx

Hello @beats247

Thank you for the information.
I’ve tested and checked this and I am unable to replicate the issue (Have not tested with the theme you are using)
However, yes I was able to see the behavior after a first visit and after the page is reloaded, the correct header and footer are served.
I can confirm that the User-Agent Groups feature is working, but it appears that there is a conflict with the theme you are using.
Just to be clear, the mobile version of the website is showing except for the changed footer and header which changes after reload or after some product is visited.
Which user agents have you tried adding to ‘Rejected user agents’ in the page cache option?
Thanks!

Hi @vmarko ,
thank you very much for checking again. Yes, that’s exactly the issue. The first load on mobile is always the desktop version and you have to reload the page so the correct footer and header are served. Enabling or disabling user agent groups (mobile) makes no difference, unfortunately.
I don’t know whats the conflict with the theme though? I already contacted the developer of the theme to find out how he implements the footer/header/cart in the mobile option. So far he only replied this though:

You need to ask your cache plugin about a Mobile device support option like WP Super Cache. Almost all cache plugins support this option
https://docs.drfuri.com/martfury/3-mobile-troubleshooting/

I asked him for more info on that again though.

Currently, I have not added any rejected user agents in the page cache option because then there won’t be cached pages served for them. If I add e.g. ‘android’, ‘iphone’, etc. the issue is gone but then it’s becoming slow on mobile as caching will be bypassed. Thank you very much again for your help.

Edit: Ehm, looks like it’s the other way round now, lol? I didn’t change anything though but purging the cache (+CF). Now it’s loading the mobile layout on desktop first, omg… Can you confirm this? Thanks again.

Hello @beats247

Thanks for the info. I was just about to ask you if you are still experiencing the issue because I’ve tried on mobile (cleared cache) and I am not seeing the issue anymore.
I’ve checked the website on Desktop (different browsers) and I am not seeing the mobile version loading.
Thanks!

Hey @vmarko,
I just tried it a couple of times with cleared cache and inkognito browsers (chrome, opera) on desktop and it’s always showing me the mobile version on first load now.
This is so weird :/

See: https://prnt.sc/107pcht

Thanks again!

Hello @beats247

So it appears that the User-Agent Groups option is not working in this case for some reason. What happened is that once you purged the cache, you visited the mobile page first, and it was cached for desktop also.
This may bne the compatibiliyty issue with the theme you are using and W3 Total Cache.
Try purging the cache again and visiting the website from your Desktop first (non logged in)
Thanks!

Hello @vmarko,
yes, you are right. I purged the cache again and acessed the site from my desktop without being logged in. It’s gone back to the standard issue and loading the desktop layout everywhere on first load again ??
So is there any way we can solve this? I will let you know as soon as the dev of my theme gets back to me. Thanks again for your help, I very much apprciate it!

Hello @beats247

Thank you for the information.
I’ve tested this over and over again and I was not able to replicate the issue.
Have you heard back from your theme dev?
Thanks!

Hello @vmarko,
thanks again for your reply. Yes, but he didn’t reply anything that would help us. Just that I should use WP Super cache or WP Rocket…. The theme support isn’t very helpful in that regard, unfortuantely :/

I just found online though that Varnish could be the issue?

Separate cache files for mobile devices
If you have activated the Separate cache files for mobile devices option (on the Cache tab), you must make sure that your Varnish configuration is set up to distinguish mobile requests from desktop requests. Otherwise the wrong version of the cache could be served. This is a known issue with Cloudways Varnish configuration.

Do you think that could be the problem and how would it needed to be configured? I couldn’t find anything in that regard. Thanks again!

Hello @beats247

If you do not have a varnish cache that is not the issue. And as I can see you are not using Varnish.
I do however see that you are using some other caching plugin now and the issue is the same regarding the mobile caching and Lazyloading. So it means that it’s not W3TC related issue specifically.
Thanks!

Hey @vmarko ,
I am on Cloudways and I am using Varnish. Varnish is also currently enabled. I am currently testing WP Rocket because the theme developer said it would work with his theme. It has the same mobile issue though so it’s caused by Varnish. Disabling Varnish solves the mobile issue. Unfortunately, I just found out that Cloudways still refuses to add a device detection feature to Varnish although it has been requested from users for years. That’s really disappointing.
The lazy load for some images on my website that didn’t work with your plugin is working fine with WP rocket though so maybe you saw an old cached version of the site. There seems to be some kind of incompatibility with your lazy load function then, unfortuantely. Thanks again!