Optimize WordPress with WP Super Cache and Autoptimize
There are a tons of ways to improve performance in WordPress. I had made several articles on how to improve performance but there are times when you just want good performance with minimal overhead, that is, the least amount of plugins and a safe method that can be easily recreated to other blogs and sites you own. In this article I’m going to show you the best and safest method to implement a very good caching and optimization for WordPress with minimal overhead. That is, with just 2 plugins.
This optimization will give you an active HTML caching plus CSS, JS minification and Google Fonts optimization. Those two plugins are WP SuperCache and Autoptimize. Leran how to Optimize WordPress with WP Super Cache and Autoptimize (tutorial below)
Optimize WordPress with WP Super Cache and Autoptimize
WP Supercache has always been my favorite. This is no coincidence, it’s not that I’m fond of Super Cache or that I didn’t tried other mechanisms, it’s that WP Super Cache has proven time and time again that it’s one of the safest and most stable caching plugins on the market. While there are tons of good caching plugins like WP Rocket, Fastest Cache, Comet Cache and so on, each and every one of them has proven to be incompatible with some theme or plugin in some way. WP SuperCache is the best caching plugin when compatibility is your main objective.
One thing is to make a plugin work, another thing entirely different is to keep it functional for long. Updates in WordPress, plugins and themes are the main reasons why caching plugins stop working. They need help from their developers to keep being functional, which is something Automattic has done all these years.
Once the plugin is installed, here is how we are going to configure it:
The first thing we are going to do is to enable/disable this checkboxes. We would want to uncheck the Don’t cache pages for known users as this method will improve backend (Dashboard) performance several times. If you experience weird behavior, this is the only checkbox option you should enable.
The Cache HTTP headers with page content is also necessary for optimal performance. The 304 Not Modified option will enable browser caching. We are not going to use the “supercached static files for known users” though as that could break dashboard funcionality on some themes.
There are times when WP Supercache could break functionality because of caching but we are making sure this does not happen. As we will want the most compatible caching implemented we will check the Clear all cache files when a post or page is published or updated.
This will complete the setup for WP SuperCache. Once you’ve done it you can set and forget, this configuration is guaranteed to work without you having to touch a thing afterwards.
What Autoptimize Does?
First, you need to understand that Autoptimize is not a caching plugin like WP Rocket or W3 Total Cache. It is an optimization plugin that helps to do the following things:
- Minify the compressed files and cache them, also minify the HTML by removing comments and spaces
- Add expiry header to the files to serve the cached version
- Move CSS to header and scripts to footer
Later on, the developer also included the image optimization for lazy loading and serving WebP images to speed up media files. As mentioned in the plugin page on WordPress.org, HTTP/2 servers can automatically do many of the things what this plugin does. Therefore, you should test with trials to ensure the plugin actually adds any value for your installation.
How to Properly Setup Autoptimize in WordPress?
Autoptimize is one of the simplest plugins to setup. After installing and activating the plugin, go to “Settings > Autoptimize” menu. It has the options to optimize JS, CSS, HTML and images on your site.
JS, CSS and HTML Settings
This tab has multiple options to segregate and optimize the files on your site. Autoptimize will aggregate and minify scripts, CSS and HTML from your theme and plugins. Therefore, choosing some of the options may break your site especially you use jQuery based theme.
- Also aggregate inline JS? – we recommend you to disable this option when your theme or plugin inject lots of scripts dynamically. Enabling this may lead the cache size to grow faster and bigger thus affecting the performance instead of improving.
- Exclude script from Autoptimize – the plugin by default fill this box with jquery.js and other important files on your site. If you notice any specific theme or plugin files is breaking your site, you can include the file here. Remember to fill the relative path of the file by ignoring the domain name. also, as mentioned in the description, the plugin will still minify the excluded files unless you exclude them in the “Misc” section. After testing with different themes, we recommend you to exclude jquery.js in order to avoid any layout breaking problems on your site. Sometimes, you may not notice the problem on the site, however you can see the console error in Google Chrome developer tools. The error will show something like “$ or jQuery is not defined” or “unknown function”.
- Add try-catch wrapping? – enable this option when you find the plugin breaks your site. We recommend you to disable this option and exclude the file that breaks in the exception.
- Optimize CSS Code? – enable this option to compress and minify CSS files on your site.
- Aggregate CSS-files? – enable this option to combine all CSS files on your site and serve as a single compressed and minified CSS file.
- Also aggregate inline CSS – enable this to include inline CSS for aggregation. If your theme or plugin inject lots of inline CSS then this option will increase the size of the cache.
- Generate data: URIs for images? – enable this option so that Autoptimize can inline the small images downloaded by your theme and plugins.
- Inline and defer CSS – in order to enable this option, you should first know the critical CSS for your site. Unfortunately, it is not easy to get critical CSS as each template on your site needs separate critical CSS. For example, when you have WooCommerce on your site then you can’t use the post or page critical CSS for WooCommerce product pages. In our opinion, you should disable this option in Autoptimize. Otherwise, you can get the premium API from criticalcss.com and integrate with Autoptimize under “Critical CSS” tab.
- Inline all CSS – enable this to inline all CSS instead of linking as a file. After enabling this option, you can view the source code of your site to see the huge amount of CSS. Inlining CSS can will drastically improve the speed, however it may adversely affect if you have huge CSS file.
Similar to JS and CSS, enable the “Optimize HTML Code” option to compress and minify the HTML content on your site. You can also enable or remove the comments by using “Keep HTML comments?” option. We recommend to enable both these options.
If you are using CDN that create zone URL, then you should enter the root URL here in the “CDN Base URL” text box. However, you can ignore this if you are not using CDN or using Cloudflare or any other CDNs that use DNS nameservers.
Under “Cache Info” section you can find the status of the Autoptimize caching. It will show you the path, size and number of cached files.
- Save aggregated scripts/CSS as static files? – this should be enabled by default as the compressed files need to be served as a static resource to improve the speed. As mentioned in the description, if there is a display problem then disable this option and try that helps.
- Minify excluded CSS and JS files? – the plugin automatically minify all CSS and JS files though you have excluded specific files in CSS or JS settings. Disable this checkbox, if you want to disable the minification of the excluded CSS and JS files.
- Also optimize for logged in editors / administrators? – we recommend to disable this option so that you can view the actual site without Autoptimize when logged in as an administrator or editor. Otherwise, you may notice problems working with page builder plugins.
Save all your changes for the plugin to start working on your site.
The “Images” tab offers options for optimizing images.
- Optimize Images – this option helps you to use Shortpixel global CDN to optimize and serve your images on the go. Shortpixel is a premium image compression solution that allows you to optimize 150 images per month. You can view the current status and quota usage in this section.
- Image optimization quality – you can choose one of the glossy, lossy or lossless options. You can check the differences between these options and test your images on the Shortpixel page. This will help you to select the best option for your need.
- Load WebP in supported browsers? – choose this option to serve WebP images for Chrome and other supported browsers.
- Lazy-load images? – lazy load will defer the off screen images and load only when the user reaches the image position on the browser. Enable this option to improve the loading speed and improve the score on Google PageSpeed Insights tool.
- Lazy-load exclusions – here you can enter the image types or file names to exclude them from lazy loading.
Note that most of the plugins and themes come with lazy loading as an in-built option. For example, Newspaper theme, Jetpack plugin, WP Smush plugin and SG Optimizer plugin for SiteGround users all have the lazy loading option. We recommend you to use lazy loading only when you don’t use similar options on other plugins or theme on your site. Similarly, enable Shortpixel only when you don’t have external CDN for image caching. Also, use this with caution as this has restriction on usage.