Problems with setting up separate mobile & desktop cache - Magento 2.4.3

[julianne4987]

Hello,

First things first - I am a novice site owner, not a developer. So, please be patient as I may be a bit confused with some of this. (most of it)

I am using a theme that requires desktop cache & mobile cache be separate in order to achieve good Google Web Vitals.

So, the initial problems were that the site was (is) slow & after clearing cache or saving anything - the mobile version would show on the desktop & at other times the desktop would show on mobile. This would go back & forth. In reaching out to the theme's maker I was told that the cache was not set up properly. Mobile had to be separate from desktop. He kept pointing me to instructions for Varnish cache. (even though I told him I was using LiteMage.) Anyhow, I found instructions to do so for LiteMage here: https://www.litespeedtech.com/suppo...che:litemage:seperate-mobile-versions-magento & here: https://www.litespeedtech.com/suppo...ed_wiki:cache:common:seperate-mobile-versions. After following these instructions the desktop seems to show ok but Mobile is still acting very peculiar. It shows correctly until I check it with lighthouse or refresh cache - the banners go crazy + the site is still slow. If anyone is willing to take a look & offer any suggestions how to get thi setup correctly - the site is www.dvineinspiration.com. Any help will be greatly appreciated.
*Please note that there is a lot of this I just don't understand - so, explain as if you're talking to a 2 year old. I will not be offended

Thank you.

 

[Pong]

LiteMage 2 itself doesn't allow you to separate themes to desktop and mobile. It will just respond to one responsive theme.

If you have desktop and mobile theme setup, you may try to set write rule in .htaccess to set cache vary on mobile. The question is what's the right mobile agent detection by your current Magento module, you may need to investigate and interpret to the correct rewrite condition.

For example,

RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk/|Kindle|BlackBerry|Opera Mini|Opera Mobi [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]

https://docs.litespeedtech.com/lscache/devguide/advanced/#rewrite-rules

You should tweak the rewritecond for HTTP_USER_AGENT to cover all mobile situation to match your current detection, if it deson't cover/miss something, you may still see issue on that user agent.

You should further check your Magento developer especially the theme developer if you have trouble to work out the rewriteconf for correct user_agent list.

 

[julianne4987]

Hello - I am still wrestling with this. No matter how I have "tweaked" the user agent it is still at times serving desktop cache on mobile. Does anyone know how to correctly set this up in the Magento's backend & in the .htaccess???

 

[serpent_driver]

@julianne4987

I don't know if you already solved your problem, but as @Pong already described there is no one and only solution for your isssue. It needs a custom way to solve it. There are a huge methods to try to dectect devices. Not every one is perfect, but almost every one works different. To solve your problem it is necessary to synchronice the way of detection how your theme detects with .htaccess rewrite rules. It sounds tricky? Yes, it is tricky, but only if someone doesn't know the code and how detection in your theme works. If it is known, it is easy.

 

[jamesnoor1955]

Please try out Installing sample data after Magento 2 setup, Clearing theme/CSS cache, Re-indexing, or trying out Magento Performance Optimization to find the exact solution to your problem.