Mobile content shows on desktop

Resolved vega
(@customprecious)

5 months, 1 week ago
Hi,

I’m using the Avada theme on a SiteGround server.

Previously, I was using SiteGround’s Speed Optimizer plugin, but my PageSpeed Insights scores were quite low. I noticed that Avada recommends W3 Total Cache, so I switched to W3 Total Cache. After switching, my PageSpeed Insights scores improved significantly.

However, I’m now having a serious issue with device-specific content rendering.

I’m using Avada’s Rendering Logic to display different content for desktop and mobile:
- Device type = Desktop
- Device type ≠ Desktop (for mobile)
The problem is:
- After I purge the cache, if the first visit is from a desktop device, then mobile users will see the desktop version.
- If the first visit after purge is from a mobile device, then desktop users will see the mobile version.
It seems that W3 Total Cache is generating only one cached version per URL, and it’s not properly separating desktop and mobile cache.

I have already tried:
- Performance → Cache Groups → Manage User Agent Groups
- Setting both Tablets and Phones to “Pass Through”
- Setting only Phones to “Pass Through”
- Setting only Phones to “Avada Child”
None of these configurations solved the issue.

Can you help? Thanks!

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Contributor Marko Vasiljevic
(@vmarko)

5 months ago

Hello @customprecious

Thank you for reaching out and I am happy to help!

You need to make sure that the cache is actually created for the mobile and Desktop separately.
First, enable the Cache Groups for Phones, set “Pass Through”, and from the dropdown menu select the current active theme!

Once this is done, save all settings and purge the cache. Visit the website from your mobile browser, and also a couple of pages. If everything was set up correctly, the files will be cached separately for mobile and you can check this in

yoruwebsite.com/wp-content/cache/page_enhanced/yourwebsite.com/ where the cached files will be created as:

_index_slash_phones_ssl.html_gzip
_index_slash_phones_ssl.html

and if for the desktop:

_index_slash_ssl.html_gzip
_index_slash_ssl.html

This confirms that the cache has been created. This being said, I do see that you have multiple layers of caching as I can see the following headers:

x-cache-enabled True
x-cdn-c static
x-proxy-cache
x-proxy-cache-info 0 NC:000000 UP:
x-sg-cdn 1

This means that besides the W3TC Cache, you also have other caching layers, and most likely the cache page was cached as a desktop before the W3TC had a chance to create a separate Cache.

Can you please check if the separate Cache is created and also make sure to clear all server-side cache and CDN Cache?

Please let me know if this helps!

Thank you!

Thread Starter vega
(@customprecious)

5 months ago

Hello Marko,

Thank you so much for your guidance! I’m happy to report that I was able to successfully implement your plugin on my website, and the content for tablet, mobile, and desktop devices is now displaying correctly.

I cleared all caching from Speed Optimizer and SiteGround. Initially, I kept the SiteGround CDN enabled, but I found that the website content only displayed correctly across devices when the CDN was in Development Mode. I have now fully disabled the SiteGround CDN, and everything is working perfectly.

I have a follow-up question: if I want to further improve my website speed, would I need to switch to a different CDN?

I’m writing in detail because I hope this helps others who might face the same issues.

Thank you again for your support!

Vega

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.