WordPress Mobile Caching with Zencache PRO Cache Plugin

This post has nothing to do with embedded systems, but I’ll document some of the changes I made to the website in the last few days for better mobile support. Recently Google sent me a message recommending to “Fix mobile usability issues found on http://www.cnx-software.com” via Webmaster Tools, and a user recently complained about readability from his smartphone.  So I had to fix this issue.

Desktop vs Mobile (Click to Enlarge)
Desktop vs Mobile (Click to Enlarge)

This involves WordPress cache plugins and WPtouch Mobile Plugin, the latter automatically generates a mobile version of the website as shown on the right in the screenshot above. In theory, it’s very easy, you simply install WPtouch Mobile plugin, and mobile user agents get served the mobile page while other get the desktop version. But when you mix it with a cache plugin, it can become more complicated, and desktop user may be served mobile pages, and mobile user may get desktop pages. The easiest way to work around this is have a list of mobile user agents that the cache plugin simply ignores, but the downside is that mobile pages are not cached, and add load on your server.

In the past, I’ve tried different cache plugins including W3 Total Cache, Super Cache, but I’ve found they would not always work as expect, so last year I finally settled on Quick Cache Lite (Now Zencache Lite) which I’ve found to work reasonably well. The only problem is that the free version does not have a user-agent  exclusion list, which is why so far I did not enable WPtouch Mobile on CNX Software. W3 Total Cache supports this for free, but  since I know changing cache plugin can be a real pain, I decided to upgrade to Zencache PRO for $39, as I figured out that overtime it should probably pay for itself.

CLick to Enlarge
User-Agent Exclusion Patterns in ZenCache PRO

So I copied a list of mobile user agents into the exclusion patterns options of the PRO version, and it worked fine, but that meant that mobile devices did not get served cached file, and the server had to generate the files from PHP/Mysql. Then I found another option called “Dynamic Version Salt” that allowed to generate a different version of the cache based on some PHP code or cookies.

Click to Enlarge
Dynamic Version Salt in ZenCache PRO (Click to Enlarge)

There’s even a code sample to generate cache for iPhone user agent:

((preg_match('/iPhone/i', $_SERVER['HTTP_USER_AGENT'])) ? 'iPhones' : '')

ZenCache will store cached files into WP_HOME/wp-content/cache/zencache/cache/http/domain.com/YYYY/MM/DD/ directories with the default URL, let’s say for example hello_world.html. Version Salt will allow to detect a mobile user agent, and if would will create a new file called iPhones.html into hello_world.html.v directory.

The example is fine, but we need to support multiple user agents. After some research, I found the fucntion to use was preg_match_all, and the code to paste into the field above is:

((preg_match_all('#\b(iPhone|iPod|Android|BB10|BlackBerry|webOS|IEMobile|iPad|PlayBook|Xoom|P160U|SCH-I800|Nexus 7|Touch )\b#i', $_SERVER['HTTP_USER_AGENT'], $matches)) ? 'mobile' : '')

WPTouch list also includes MSIE 10.0, but after playing with User Agent switcher in Firefox and Chrome, I noticed this was also used by Internet Explorer 10 in Windows, so I removed it from the list above.

So far it seems to work pretty well, however the “Mobile | Desktop” option of WPtouch will not work, as mobile devices will also be served the mobile cache, and mobile users need to select the option “Request Desktop Site” or equivalent in their browser if they want to see the desktop version.

Share this:
FacebookTwitterHacker NewsSlashdotRedditLinkedInPinterestFlipboardMeWeLineEmailShare

Support CNX Software! Donate via cryptocurrencies, become a Patron on Patreon, or purchase goods on Amazon or Aliexpress

ROCK 5 ITX RK3588 mini-ITX motherboard

6 Replies to “WordPress Mobile Caching with Zencache PRO Cache Plugin”

  1. I noticed this yesterday while surfing on mobile, was working good in both KitKat 4.4.4 stock browser and in Chrome for Android.

    I have another suggestion for you:
    Try to enable user login/registration or similar. Eg. when I move to another system/browser and if I post comment on that new system/browser with same info I always use on cnx, my post waits for your moderation. I think that would be nice to have fixed either with user registration or some other way 🙂

  2. @Stane1983
    Actually I’ve just disabled caching altogether, as I could see some issues, and CPU usage and page load time, just look as good so far, if not better. Anyway, the desktop / mobile versions of the website should work just fine now.

    I had some subscription before, but I was flooded with spam, so I disabled it.
    I’ve just added your account manually. You should receive an email and be able to change the password.

  3. It would be handy if there would be a link to switch between mobile/desktop site and the reverse.

    Otherwise, do you host this blog on an ARM machine?

  4. @zoobab
    I’m running some experiments. If I decide I don’t need to cache mobile pages, the Mobile/Desktop switch will be enabled. Otherwise you can normally use you web browser to request the Desktop version.

    The website is hosted on a Linode VPS with an Intel Xeon E5-2680 dual core processor.

Leave a Reply

Your email address will not be published. Required fields are marked *

Khadas VIM4 SBC
Khadas VIM4 SBC