Mobile cache

The Mobile cache feature is used to serve fast pages to visitors who are using a mobile device to navigate your website.

This feature is activated by default upon activating WP Rocket.

This article includes some details of how the feature works, and other general instructions.

Feature overview

With the Mobile Cache feature, WP Rocket applies the page caching and all the additional optimizations to mobile devices.

WP Rocket will create a separate set of cache files for mobile devices. With this approach, any mobile-specific content will be cached and served independently.

Also, if the Preload cache option is active, the mobile-specific cache files will be generated in addition to the desktop-specific cache files.

How to check if Mobile Cache is working

If you visit the cache directory in /wp-content/cache/wp-rocket/yourdomain.com/, you should see the mobile-specific cache files:

  • index-mobile.html_gzip
  • index-mobile-https.html_gzip

If the WebP Compatibility option is enabled, the cache files have -webp appended to the filename:

  • index-mobile-webp.html_gzip
  • index-mobile-https-webp.html_gzip

Important! Check the hosting compatibility article to see if your hosting provider uses its own page caching option. In those hosting companies, WP Rocket's cache folder will be empty.

Treat tablets as mobile

By default, the Mobile Cache feature works on phones only. It does not consider tablets as “mobile” in the context of page caching, therefore, the default cache (for desktop) will be served to tablet devices.

You can modify this default behavior to treat tablets as mobile with this helper plugin:

📥 Download (.zip): WP Rocket | Set tablets as mobile
Developers: you can find the code for this plugin on GitHub.

The helper can be useful if your theme or plugin uses the wp_is_mobile() function, which treats tablets as mobile devices.

How to deactivate this feature

If you have issues, and you need to deactivate this option, you can use the following helper plugin:

📥  Download (.zip):  WP Rocket | Customize Mobile Cache Options
Developers: You can find the code for this plugin on GitHub.

Upon activation, this helper will:

  • Deactivate the mobile-specific cache, so mobile devices will receive the default (desktop) cache instead.

  • Deactivate the Optimize Critical Images and Automatic Lazy Rendering features, as it's not safe to optimize the critical images, or below the fold elements, without taking into account the device type

And if needed, you can also further customize this helper plugin to:

  • Deactivate the Mobile Cache option altogether, by uncommenting the line 35, as shown here.

Risks of deactivating the mobile-specific cache 

Deactivating the mobile-specific cache can potentially cause issues if you have mobile-specific content on your site.

The following problems within WP Rocket options can occur:

Also, any custom or third-party feature that depends on the  wp_is_mobile() function may be affected.

How to activate this feature if it's disabled

In case you updated to WP Rocket 3.16 from a previous version, while the  Mobile Cache option was deactivated, you can go to the Tools tab, and click on the Mobile Cache > Enable Mobile Cache option, as shown here:

Mobile cache option in the tools tab

This is a one-time action, so, once you've clicked on the Enable Mobile Cache button, the Mobile Cache section will disappear from the Tools tab.

Please note that when using the option in the Tools tab to activate the Mobile Cache option, its default behavior of creating mobile-specific cache will be enabled too.

Additional cache layers

If you are using an additional layer of cache, such as Varnish, NGINX, Cloudflare's Cache Everything, etc., that is not configured to distinguish between mobile and desktop visitors, then you may run into these problems:

To avoid this type of issues, it's recommended to deactivate those additional layers of cache, and let WP Rocket handle caching for desktop and mobile.

Hosting providers managing page caching

Some hosting providers with automatic compatibility manage the page caching themselves instead of using WP Rocket's caching.

Among those compatible hostings providers, WP Engine and Kinsta are known to be configured to have a separate cache for mobile, therefore, the layout issues related to additional layers or cache shouldn't happen.

However, this is not the case for all hosting providers. So, in case you have issues with hosting providers that manage page caching (instead of WP Rocket), you should reach to their support team, ask if their page caching is configured to separate device types, and request further guidance.

Cloudflare APO

When using Cloudflare APO, please make sure to enable their caching by device type option.

For more information about the compatibility between WP Rocket and Cloudflare APO, please check this guide.

Technical details

  • Mobile phones get detected by the HTTP user agent. You can find the complete set of user agents WP Rocket will detect and treat as mobile in this file.

WP Rocket versions older than 3.16

The Mobile Cache option can be found in the Cache tab. 

When this option is active, WP Rocket can serve page caching and optimizations to mobile devices, just as it does for desktop devices.

Also, when the Mobile Cache is active, a sub-option called Separate cache files for mobile devices can be found too. Only when this sub-option is active, WP Rocket will create and serve mobile-specific cache to the mobile devices.

Treat tablets as "mobile"

For the WP Rocket | Set Tablets As Mobile helper plugin to work, the Separate cache files for mobile devices sub-option must be enabled.

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.

Separate cache files for mobile devices

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.

This can be useful, or even necessary in case your site provides any features for mobile devices only, such as an additional navigational toolbar loaded via JavaScript. If WP Rocket would not create a dedicated file for that view, those mobile features could get cached and be visible on desktop devices as well—or the other way round: the desktop view would get cached and served to mobile devices as well, hence no mobile features would be visible.

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") :

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:

A
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.
B
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.
C
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"

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.

Cloudflare APO

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.

Varnish

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.