Autoptimize is the one of the best free caching plugins for WordPress. It minify, combines and cache the static resources like JS and CSS files on your site. The problem with any caching plugin is that it will disturb your testing and troubleshooting efforts by serving cached content. If you are looking for bypassing Autoptimize caching, here is a simple way to do that. Learn how to setup Autoptimize plugin properly for best results.
Bypass Autoptimize Caching without Deactivating Plugin
Most users delete the cache or deactivate the plugin for testing purposes. However, you do not need to do those things. Simply open the page by adding ?ao_noptimize=1 parameter at the end of page URL to bypass Autoptimize caching. This works on any page using Autoptimize and you do not need to login to admin dashboard for this purpose.
Testing Bypassing Autoptimize
Below is how the source code of the default page cached with Autoptimize looks like. To view the source code prefix view-source: in the URL and open it like any other page. Alternatively, right-click on the page in Chrome or other browsers and select “View Page Source” option.
In Chrome, you can use the line wrap (click the check box showing on top left corner while viewing the source) to fit the page content within browser’s view port.
As you can see in the above screenshots, the content is congested as Autoptimize minified and combined the files. Now, simply add ?ao_noptimize=1 at the end of the source code you are viewing and press enter. It should look clean as shown below so that you can easily find the CSS, JS or the HTML you want to check. This time you should disable line wrap to view the linked files clearly.
You can press “Control + F” or “Command + F” and search for .js or .css to find how many JS or CSS files are linked in the page. I use this to understand the files used on a webpage which is not possible with the minify and combine enabled.
Other Options for Bypassing Caching for Site Owners
If you are the site owner having access to WordPress admin panel or hosting account or FTP, then you can easily exclude caching of pages, files and sections from Autoptimize caching.
Using <!–noptimize–> Tags
Let’s say, you do not want to cache a widget embedded in the post. All what you need is to include the custom HTML code between <!–noptimize–> tags. It should look like below in the source code:
<!--noptimize--> Your content or file URL here… <!--noptimize-->
You can bypass CSS or JS files by including them between the <!–noptimize–> tags to avoid breaking the layout.
Exclude CSS and JS Files in Autoptimize Settings
You can exclude both CSS and JS files in plugin’s settings by file name or parameter. This is the option you should use if the site layout is broken.
- Go to “Settings > Autoptimize” and then to “JS, CSS & HTML” tab.
- Add the file names or parameter in the text box.
- Similarly, you can add CSS file name or parameter under “CSS Options” section.
- After that scroll down to the bottom and click on “Save Changes and Empty Cache” button.
Disable Caching for Administrators
By default, the plugin will enable caching for administrators and other logged in users. You can disable this for testing the site without caching and other features. You can use two browsers to check the layout with and without caching enabled.
- When you are in Autoptimize settings page, scroll down to the bottom and check under “Misc Options” section.
- Uncheck the option “Also optimize for logged in editors/ administrators?” option.
Note that Autoptimize plugin also does not work in the “Appearance > Customizer” section of WordPress admin panel as well as on the published AMP pages.