How to: Prevent Jetpack’s mobile theme or WPtouch to get cached by W3 Total Cache

How to: Prevent Jetpack’s mobile theme or WPtouch to get cached by W3 Total Cache

Honestly the problem statement is more like: “How to prevent W3 Total Cache from serving the mobile theme to all my clients”. The issue arises when the first client that visits a page is a mobile client. W3 Total Cache (or another cache plugin/mechanism potentially) will cache the page and therefore include the .css files for the mobile theme. Now, when a full featured client visits the site it is served the cached page which is using the mobile theme. WP Super Cache plugin has a child plugin that deals with this situation, but W3 Total Cache doesn’t. Now, you are probably wondering why I don’t use WP Super Cache instead. Although I think it is more robust and like it better W3 Total Cache minifies the html and gives me more options with New Relic so I went that route. I still use Better WP Minify to minify JavaScript and CSS files as W3 Total Cache simply won’t.

But getting back on topic: W3 Total Cache is not smart enough to handle this situation. The recommendation here is to indicate W3 Total Cache to not cache pages served to mobile clients. Now, in my case only a small percentage of my visitors come from a mobile device and my server even without cache is able to serve pages at an acceptable speed. If your case is different and you need cached pages for mobile visitors then consider changing to another plugin like WP Super Cache.

If you wish for mobile devices to not get cached pages then you need to leverage the user agents feature to exclude them in W3 Total Cache. This means that Page Cache, Minify and CDN need to be configured to exclude mobile devices.

A new feature in the latest release called “User Agent Groups” also provides further flexibility to address this issue. It comes with pre-loaded groups that identify High End clients and Low End clients. Take for example any IOS device is considered a High End client as the browser can render comparably with a full featured desktop browser. This new feature allows W3 Total Cache to serve different cached pages: One default cache and One cache for each User Agent Group.

So my recommendation is to use this feature to address the issue with mobile themes getting cached for all clients. In order to activate this follow this simple instructions:

1. Go to the User Agents Group setting under the Performance tab
   1. Scroll to each Group and Enable both default groups
   2. You might get an error when you save indicating that “bb10” is in both lists. Simply remove it from one of them… I want to believe it is more of a High end client, but who knows. Once you remove it from one of the lists you can save and be done!
   3. The Theme section should be left to — Pass-through — if you are using JetPack’s Mobile Theme (currently known as minileven). If you have another theme installed you want to use you may select it from the list.

If you are using a previous version simply disable a few User Agents as mentioned previously. People like to use the previous version as some things work better on it. Below are the instructions you can follow:

1. Go to the Page Cache settings under the Performance tab
   1. Scroll down to the Rejected user agents box and paste the user agents you want to exclude. Below are a few suggestions. Save changes.
2. Go to the Minify settings page under the Performance tab
   1. Scroll down to the Rejected user agents box and enter the user agents you want to exclude. Below are a few suggestions. Save changes.
3. Go to the CDN settings page under the Performance tab
   1. Scroll down to the Rejected user agents box and again enter the user agents you want to exclude. Below are a few suggestions. Save changes.
4. Finally, go to the General Settings page under the Performance tab and click empty all caches.

Suggested user agents to exclude:

iphone
ipod
ipad
aspen
incognito
webmate
android
dream
cupcake
froyo
blackberry9500
blackberry9520
blackberry9530
blackberry9550
blackberry9800
webos
s8000
bada

User Agents included in the High End list:

acer s100
android
archos5
bada
bb10
blackberry9500
blackberry9530
blackberry9550
blackberry 9800
cupcake
docomo ht-03a
dream
froyo
googlebot-mobile
htc hero
htc magic
htc_dream
htc_magic
iemobile/7.0
incognito
ipad
iphone
ipod
kindle
lg-gw620
liquid build
maemo
mot-mb200
mot-mb300
nexus 7
nexus one
opera mini
s8000
samsung-s8000
series60.*webkit
series60/5.0
sonyericssone10
sonyericssonu20
sonyericssonx10
t-mobile mytouch 3g
t-mobile opal
tattoo
touch
webmate
webos

 User Agents included in the Low End list:

240×320
2.0 mmp
bppcb
alcatel
amoi
asus
au-mic
audiovox
avantgo
benq
bird
blackberry
blazer
cdm
cellphone
danger
ddipocket
docomo
dopod
elaine/3.0
ericsson
eudoraweb
fly
haier
hiptop
hp.ipaq
htc
huawei
i-mobile
iemobile
iemobile/7
iemobile/9
j-phone
kddi
konka
kwc
kyocera/wx310k
lenovo
lg
lg/u990
lge vx
midp
midp-2.0
mmef20
mmp
mobilephone
mot-v
motorola
msie 10.0
netfront
newgen
newt
nintendo ds
nintendo wii
nitro
nokia
novarra
o2
openweb
opera mobi
opera.mobi
p160u
palm
panasonic
pantech
pdxgw
pg
philips
phone
playbook
playstation portable
portalmmm
proxinet
psp
qtek
sagem
samsung
sanyo
sch
sch-i800
sec
sendo
sgh
sharp
sharp-tq-gx10
small
smartphone
softbank
sonyericsson
sph
symbian
symbian os
symbianos
toshiba
treo
ts21i-10
up.browser
up.link
uts
vertu
vodafone
wap
willcome
windows ce
windows.ce
winwap
xda
xoom
zte