Optimize WordPress with WP Super Cache and Autoptimize

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)

WP SuperCache

Easy Caching for WordPress with 2 plugins - WP Super Cache

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.

Easy Caching for WordPress with 2 plugins - WP Super Cache settings

Once the plugin is installed, here is how we are going to configure it:

Easy Caching for WordPress with 2 plugins - WP Super Cache settings 2

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.

Easy Caching for WordPress with 2 plugins - WP Super Cache settings 3

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.

Autoptimize

Easy Caching for WordPress with 2 plugins - Autoptimize

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:

  • Combine all CSS and JavaScript files
  • 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.

Autoptimize Settings
Autoptimize Settings

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.

JavaScript Options

  • Optimize JavaScript Code – Enable this option to minify the JavaScript files. This will compress and reduce the size of the script files on your site.
  • Aggregate JS-files? – enable this option to combine all JavaScript files and server asynchronously when loading pages on your site. This will help you to remove render blocking script problem in Google PageSpeed Insights tool. However, in most cases it will break your site. The best option is to enable this and provide the exceptions so that the page can load without breaking. But, it will lead to render blocking issue in PageSpeed Insights. You can disable this option and enable only “Optimize JavaScript Code” to only minify the files.
  • 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.  
JavaScript Options
JavaScript Options
  • Force JavaScript in? – the best practice is to load JavaScript files in footer so that they load at the end of page loading. This will effectively remove the render blocking and script related problems shown in the speed measuring tools. However, if you see the previous options break your site then enable this to load scripts in header to test whether it helps. Again, loading scripts in header will show render blocking warning in PageSpeed Insights tool.
  • 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.

CSS Options

CSS options are almost similar to JavaScript options.

  • Optimize CSS Code? – enable this option to compress and minify CSS files on your site.
CSS Options
CSS Options
  • 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.
  • Exclude CSS from Autoptimize – if you find the site is breaking, you can exclude the specific CSS files in this text box. Similar to JavaScript files, you need to provide the relative path by ignoring the domain name. Autoptimize will also exclude the cache, icons and other CSS by default. You can also provide the relative folders like “wp-content/uploads/” to exclude all CSS files in that folder.   

HTML Options

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.  

HTML Options
HTML Options

CDN 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.

CDN Options
CDN Options

Cache Info

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.

Cache Info
Cache Info

Misc Options

  • 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.
Misc Options
Misc Options
  • 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.    

Images

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
Image Optimization
  • 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.

[social_warfare]

Leave a Reply