The Mobile cache feature enables the serving of cached and optimized pages to visitors who are using a mobile device to navigate your website. This article includes some details of how the feature works, and other general instructions.
In this article
What does “mobile” mean for WP Rocket?
Usually the term “mobile device” would be used for smartphones as well as tablets, and every screen size in between. WP Rocket, by default, applies the term “mobile” to phones only. It does not consider tablets as “mobile” in the context of page caching. Mobile phones get detected by HTTP user agent.
Only phones, not tablets are treated as “mobile” by WP Rocket by default.
If you’re down with code, look at wp-rocket/inc/classes/dependencies/mobiledetect/mobiledetectlib/Mobile_Detect.php around line #360 for the complete set of user agents WP Rocket will detect.
Treat tablets as "mobile"
You can modify this default behavior to treat tablets as mobile with this helper plugin:
The helper can be useful if your theme or plugin uses the
wp_is_mobile function, which treats tablets as mobile devices. Also, note that both the Enable caching for mobile devices option and Separate cache files for mobile devices sub-option must be enabled for the helper to work. More about those options below.
Should I enable cache for mobile devices?
Yes, as a rule of thumb, you should enable caching for mobile devices.
Don't enable mobile caching if your website is not responsive, i.e. does not adapt to and fit onto smaller screens automatically.
Note: If no mobile cache option is enabled, WP Rocket will not serve any cached documents to mobile devices. Visitors viewing your website on their phone will receive (slower) page views directly from the WordPress database.
What does “Separate cache files for mobile devices” mean?
When this option is enabled, WP Rocket will create a dedicated cache file for mobile devices for every document that gets cached. As a result, WP Rocket will serve an entirely different cache file to mobile phones than to tablets, or desktop computers.
If you use any of the following plugins, this option will be enabled by default (and you will see the checkbox in the settings "grayed out") :
- WP Touch (Free Version)
- WP Mobile Detect
- WordPress Mobile Pack
- WP Mobile Edition
- Device Theme Switcher
- Easy Social Share Buttons for WordPress
- Jetpack, when its mobile theme is activated
If you visit the cache directory in wp-content/cache/wp-rocket/[example.com] (with example.com representing your domain), you will see 2 types of file names for each document:
- index.html(_gzip) —cache files for tablets and desktop
- index-mobile.html(_gzip) —cache files for phones
Should I enable both mobile caching options?
Depending on how responsive your design is, you would either just enable the first option, or both options in case your site provides any features loaded only on mobile devices.
Here’s a good rule of thumb on how to use these 2 options:
- Do you have another layer of cache, like Varnish, NGINX etc? If so, it's safe to activate Enable caching for mobile devices, but Separate cache files for mobile devices may not be. You must first check if the other cache layer can distinguish between mobile visitors and desktop visitors (ask your host). If it cannot, use only Enable caching for mobile devices. If it can, proceed with the below.
Use the first option
(Enable caching for mobile devices)
alone if your design is fully responsive and scales up and down seamlessly.
🛠 WP Rocket will serve the same cache file for a page request that a tablet or desktop computer would receive.
Additionally enable the second option
Separate cache files for mobile devices
) in case you use one of the plugins mentioned above or in the option’s description, or in case your site loads any resources on mobile devices only.
🛠 WP Rocket will serve a separate cache file to phones, different to the one tablets and desktop computers would receive.
Themes requiring the use "Separate Cache for Mobile Devices"
- Woodmart theme - uses a separate menu for mobile/desktop
- Newspaper theme - when the optional mobile theme is enabled
- Avada theme - uses different backgrounds, classes for mobile (hard coded)
Not sure what to do? 😰
When in doubt, always enable both options. This can result in twice as many cache files on your server, but it will in any case fit your needs, no matter how responsive your site is exactly.
Can separate mobile cache files be preloaded?
Yes. If you have enabled the Separate cache files for mobile devices option, mobile cache files will also be generated by preload in addition to desktop cache files.
Separate cache for mobile devices and 3rd party cache
When other caching layers are activated (server cache, DNS cache), they must be able to serve a separate cache for desktop and mobile in order for the feature to work.
Cloudflare Cache Everything
When using Cloudflare Cache Everything page rule, Cloudflare will cache whichever device version will come first, and will serve it to all following visits.
It needs to be turned off if it is mandatory to have a different cache version for mobile and desktop.
When using Cloudflare APO at the same time as the "Separate Cache for Mobile Devices" option, make sure to enable Cloudflare APO's caching by device type. Here is where you can find it:
- The setting from the Cloudflare dashboard's APO card
- or from the WordPress plugin version 4.4.0 or later
This will force Cloudflare APO to cache and serve the right version of the page.
By default, Varnish stores and serves the same cache for both desktop and mobile.
An additional configuration is required to help Varnish distinguish between different types of cache.
The following additional customization for the
default.vcl is a good starting point.