W3 total cache (W3TC) is a superior class caching solution for WordPress site owners at free of cost. The plugin offers exhaustive options which can boost your site’s performance. But the problem is that you need to understand what you are selecting and test your site to confirm the readability. Missing to do this will completely break your site and hurt the user experience though you will be seeing the high page speed score in tools like Google PageSpeed Insights. In this article, we will explain various methods to fix W3 Total Cache mobile responsiveness issue.
Table of Contents
W3TC and Mobile Responsiveness
One such a problem is that the site may loose its mobile responsiveness after enabling certain settings in W3TC plugin. You may not notice this when viewing the site in desktop but the sidebar and the content will be congested within the smaller width on the mobile devices. You can find the problem in one of the following ways and ensure you are viewing the post / page with sidebar to see the issue.
- Resize your browser horizontally reducing the width to the minimum.
- If you are using Google Chrome then use “Developer Tools” option to toggle the display to mobile mode.
- Simply view your site in any of the mobile devices like iPhone.
- Use online mobile site viewers showing mobile screenshot like Google PageSpeed Insights tool or Google mobile friendly tester tool.
Remember, mobile caching issues are common even with premium plugins like WP Rocket. For example, WP Rocket will not cache WooCommerce pages when using with GeneratePress theme. You have to install a help plugin to resolve the issue. Therefore, do not get panic when facing such issues with free plugins like W3 Total Cache.
How to Fix W3 Total Cache Mobile Responsiveness Issue?
You can easily resolve and enable mobile caching using one of the below solutions.
The major reason for the mobile responsive issue is the CSS minification settings. Though minifying helps to reduce the file size, it often create problems if you are not testing properly. W3TC offers two minify mode options – Auto and Manual. Most people use auto mode as it is easy to enable without any manual intervention.
If you have selected Auto mode then change to Manual mode in order to resolve mobile caching issue with W3 Total Cache. You can change this option by navigating to “Performance > General Settings > Minify > Minify mode” section.
Select manual mode and save your settings. Make sure to empty your cache and check the site in any of the mobile browser. It should mostly come back to normal responsive view.
If you are already set the minification in manual mode then check the CSS files added under “Minify > CSS > CSS file management” section. Remove all theme CSS files from the list and check whether the site loads properly on mobile devices. If this works, you can add the files one by one again to narrow down the file that causing the issue. After finding the file causing issue, you can add it in exclusion list to solve the problem.
If manual CSS minification does not solve your problem then the next check is with JS minification. JS minification is one of the real headaches for site owners since it will frequently break the site. Disable JS minification and check the mobile responsiveness of the site.
Enable User Agent Groups
One other setting for mobile agents in W3TC is to enable mobile user agents to serve correct cached pages. If this is not enabled then the same desktop cache may be served to mobile bots and causing issue. Enable all listed mobile bots listed under high and low group names under “User Agent Groups” tab and check your site again.
Though W3 Total Cache is a popular plugin, it will easily create problems like mobile responsiveness if not setup properly. We hope one of the above explained method would have worked for you to resolve the problem. If you have found any other solution to enable mobile responsive back, let us know by commenting below.