Autoptimize is an amazing caching plugin for WordPress developed by Frank Goossens and ever since I have tried almost hooked on it. I tried to compare the impact of Autoptimize on my website with other WordPress caching plugins and I observed that Autoptimize works best for my site.

That result made me write this post and basically, it will reflect the plugin configuration process that I have tested on four different websites to increase performance. However, it’s true that depending on discrete sites the settings may change a little bit, although most part of the configuration will hopefully remain the same.

I will go straight to the point of how you should configure the Autoptimize plugin to get the best performance from your website. Moreover, I will include some other tricks using which you can use to boost your site speed 2x times.

If you want to skip the initial part you can directly go to the autoptimize WordPress plugin configuration tutorial by clicking here.

Please note that I will describe only about the optimal configuration which I have achieved after several tests and I believe you will get an amazing site performance with this Autoptimize plugin settings.

If at any point, while reading this tutorial if you feel confused please send me your feedback in the comment section below or via the contact form. I will reply to your query as soon as possible so that you can experience the best performance with the plugin.

Before I proceed to the autoptimize plugin settings, let me include some reviews about the plugin from real people who are currently using it, just to let you know that it is the most userfriendly performance plugin for WordPress but you should configure it properly.

autoptimize-wordpress-plugin-review-1

Optimizing WordPress is an important task for any webmaster + the website should be kept on monitored and improved.

Though website loading speed depends on various conditions, there are few components that should be taken as the main priority, like optimization of CSSJavaScript, HTML, and image optimization as well.

To make these optimizing things simple, you can use Autoptmize WordPress plugin to compress or minify the Javascript, CSS and HTML files. This plugin has the ability to do all the jobs for you and decreases the website load time. For me, this is one of the best minification plugins, though it should be well configured.

I would like to share my site performance test with this plugin properly configured so that you can figure out what kind of result you are going to achieve.

gtmetrix-test-result

So let’s get started with the configuration tutorial. Also, note that during the testing I was using Evolve Theme.

Install The Autoptimize WordPress Plugin

Install the plugin from the WordPress repository. To do that go to your dashboard plugins >add new > and download the plugin from WordPress repository and upload it to your WordPress.

When the installation is done activate the plugin and hover on settings > Autoptimize. This plugin comes with the basic default settings which are good enough. So, the website gets optimized automatically as soon as the plugin is activated.

On the main tab, you need to find “Show Advanced Settings” on the top right corner and activate it.

autoptimize-plugin-settings

Configure Javascript Options

Your website features are being developed by using javascript. So it’s clear that a lot of javascript has to load in the backend for your website. That could be an obstacle to load your site faster.

So optimizing all those scripts could be essential and luckily can be done in just a few clicks with the Autoptimize WordPress plugin.

autoptimize-wordpress-plugin-settings
  • If you detect render-blocking on tools like Gtmetrix or Pingdom then enable the Aggregate JS-files.
  • For faster page loading active the aggregate inline js but practice to clear your cache regularly.
  • Javascript in the head can lead to a slower loading page due to rendering blocking.
  • Enabling the catch-wrapping can fix the javascript problem of your website.

Configure CSS Options

To enable CSS optimization, check the first box. It will compress all the CSS in your WordPress site. And this will decrease the WordPress site loading time.

css-configuration-autoptimize-wordpress-settings
  • Check the second option as well, it will aggregate all the CSS files which are far better than minifying each CSS files individually.
  • If you want to aggregate CSS which are inside the HTML codes then you should enable this option. My recommendation is you should enable this option.
  • Enable generate data URLs for images option to include small background-images in the CSS itself instead of as separate downloads, which can be useful for some site or maybe an issue for some others. Test it one-two times with your site and keep the better option.
  • Inlining all CSS has one clear advantage (better PageSpeed score) and one big disadvantage; your base HTML-page gets significantly bigger and if the amount of CSS is big.

Configure HTML Settings

You will see only two options here to Optimize HTML settings, The first one will be checked by default. You should check the keep HTML comments as well to remove the comments from the HTML.

html-settings-autoptimize-wordpress-plugin

Autoptimze Plugin CDN settings

You can configure your CDN root URL to enable CDN for Autoptimized files. The URL can be HTTP, https or protocol-relative (e.g. //cdn.example.com/). If you have connected your site with Cloudflare then including this CDN URL is not required.

cdn-configuration-autoptimize-wordpress-plugin

MISC Option Configuration

To make autoptimize plugin settings complete you have to look for the MISC options as well.

Keep the three options checked, if your hosting doesn’t support the compression at all. If you are not sure of it, check the box, because of these days most of the webserver able to handle the compressions of the web content.

MISC-settings-for-autoptimize

Do not forget to save the settings and clear the cache. Saving these settings will automatically refresh your plugin cache.


Image Optimization With Autoptimize WordPress Plugin

This is a new feature that is included in the recent update of this plugin. However, it is an important feature too because it will save you from installing a separate plugin for image optimization + you can serve images from Shortpixel’s global CDN which is great.

image-optimization-settings

Important: If you notice a huge drop in performance score due to multiple content delivery networks, then disable the ShortPixel Optimize Image.


Autoptimize Plugin Settings – Extra Configuration

The extra settings can improve your site’s performance even more. You can choose whether to use, remove or combine google fonts, you can remove emojis, remove query strings from static resources and pre-connect some selected 3rd party domain as well.

extra-autoptimize-wordpress-plugin
  • Google Fonts looks great and gives your website a unique and modern look. And at the same time, you also compromised with website performance.
  • Checking removes emojis will remove WordPress core emojis’ inline CSS and javascript which will improve site performance.
  • Check the remove query string from static resources to improve the GTmetrix performance score.
  • You need to install async javascript because this will give you more advanced control to async or defer js file during site loading.

Install Async JavaScript Plugin

When Autoptimize WordPress plugin is all set up then install another plugin to extend the java-script control. This plugin is developed by the same producer of Autoptimize so it will totally work with the main plugin.

Go to the WordPress repository and download the plugin and install it. After that activate it and follow the given configuration.

autoptimize-wordpress-plugin (1)

There are some more settings in this tab. Mostly they are for mentioning some individual plugins or script to apply to defer/async or exclusion.

Scripts to Async: You can mention any scripts which you would like to apply the ‘async’ attribute.

Scripts to Defer: You can mention any scripts which you would like to apply the ‘defer’ attribute.

Script Exclusion: Mention any scripts which you would like excluded from having async or defer applied during page load

Plugin Exclusions: When you mention any plugin which is installed in path /wp-content/plugins/some-plugin/ then and JavaScripts contained within this path will be excluded.

Theme Exclusions: This will exclude any JavaScript files which are contained within the files of the selected Theme. However, external JavaScripts loaded by the selected theme are not affected.


After saving all these settings test your website once and you should already achieve great improvement on site performance and speed.

CriticalCSS.com Power-Up

There’s another plugin you can add for more high-level optimized performance. The Autoptimize criticalcss.com Power-up is available in the WordPress plugin repository. This plugin combines with Autoptimize WordPress plugin and extends its efficiency. It integrates with criticalcss.com, a premium service that uses a “headless” browser to extract real critical CSS.

The premium version requires $2/month to provide the service. CriticalCSS fully automates the extraction of high-quality critical CSS which greatly improves site load time. It can work 100% automated, but also allows semi-automated settings and manual controls.

When activated it will appear inside the Autoptimize settings and gives you the following features.

critical-css-settings-for-autoptimize-wordpress-plugin

Critical CSS Alternative

In case, you don’t want to try the premium version of critical CSS add-on you can use “Speed Up – Optimize CSS Delivery” instead. This is also an automated plugin and the primary purpose of using this plugin is to load your important stylesheets synchronously and non-essential CSS files asynchronously.

Additionally, you can choose which files to load synchronously with a filter in your WordPress function.php file. To do that just edit the function.php file and add the code below.

// exclude main and child stylesheets from delivery optimization function exclude_from_delivery_optimization($handle){ return in_array($handle, array('main-stylesheet', 'child-stylesheet')); } add_filter('speed-up-optimize-css-delivery', 'exclude_from_delivery_optimization');

Manual Way To Inline Or Defer CSS

Well, if you hate the idea of installing so many plugins on your site then you can take the help of another method which almost does the same thing as critical CSS plugin but not as effective as it. Not effective in the sense that sometimes it fails to deliver smooth user experience but significantly improve page loading time.

  • First, find the CSS file generated by Autoptimize WordPress plugin.
  • It should be something like this https://yoursite.com/wp-content/cache/autoptimize/autoptimize_fd12d39d23d6f77df0d324c250f58456.css
  • Open this link in a new browser tab and copy all the codes in it.
  • Then go to the Critical Path CSS generator and follow the steps as described in the image below.
Critical Path CSS Generator
  • Now copy the generated CSS codes from the page.
  • Go to your autoptimize CSS configuration and check inline and differ CSS.
  • Then paste the copied codes into the blank box appeared after checking inline and differ CSS.
Critical Path CSS Generator

Wrapping up: These are the settings I have found useful for performance improvement as well as better user experience. Try these settings if you are using the Autoptimize WordPress plugin and see the output. Also, keep testing your page speed and performance to make sure your site is not losing user impact due to bad performance.

If you find this article helpful send me your feedback & don’t forget to share your experience with other readers.

Follow our social media profiles on Twitter and Facebook 🙂

Need help with getting stuff done? Try Fiverr! You can find content writers for your website at a reasonable rate.