Optimal Configuration For Autoptimize WordPress Plugin in 2018

Optimal Configuration For Autoptimize WordPress Plugin in 2018

  • 6
    Shares




Since you have already searched for Such a tutorial on Google, you are certain you want to know how to configure Autoptimize WordPress Plugin to make your website faster.

Hence in this post, there is no beating around the bush and I will go straight to the important actions you should perform to configure Autoptimize plugin because I value your time.

Remember that I will explain only about the optimal configuration I have achieved after several tests and I believe you will get an amazing site performance with that configuration.

If at any point in time, while reading this tutorial, you will feel lost or confused, please send me your feedback via the contact form or comment down below.

I will happily reply your genuine feedback into this blog post, so future readers will have even better website creating the experience.

Before we proceed to the configuration, let me introduce some reviews about the plugin from real people, who are currently using it.

autoptimize-wordpress-plugin-review

These are some example that some people love to use that plugin as they find it works better than other plugins specifically on their website.

But one or two reviews can’t prove that Autoptimize will always work well with you. Some people even find it difficult to run/open their site after installing the plugin. For example,

This is the reason why you should be very careful while setting up the plugin with WordPress. After reading this guide, I hope you can complete the setup easily and able to achieve a faster site speed as well as better performance in many types of network.

So let’s get started.

(during the testing I was using Evolve WordPress Theme.)

Install The Autoptimize WordPress Plugin

Either install the plugin from WordPress admin panel > plugins >add new > Autoptimize or download the plugin from WordPress repository and upload to your WordPress.

When the installation is done activate the plugin and proceed to settings > Autoptimize. On the main tab find “Show Advanced Settings” on the top right corner and active it.

Autoptimize-Options

Configure HTML Options

html-settings-autoptimize-wordpress

*** You can enable and disable the HTML comments and check if it does affect your website or not? If not required you can disable it but I recommend to keep it enabled.***

 

Configure Javascript Options

autoptimize wordpress-javascript-options

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

 

Configure CSS Options

css-configuration


Should you inline all CSS?

  1. Back in the days CSS optimization was easy; put all CSS in your head, aggregating everything in one CSS-file per media-type.
  2. 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, Pagespeed Insights will complain of “roundtrip times”.

 

Configure CDN Setting

cdn-setting

 

MISC configuration

misc-configuration

Extra Settings Configuration

extra-autoptimize-settings

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

*** Autoptimize 2.4 beta 3 includes image optimization ***. So keep that enable.

You can also read our previously published guide on: How to reduce server response time

Install Async JavaScript Plugin

When Autoptimize 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. When the installation is done activate it and follow the given configuration.

async-javascript-plugin

async-javascript-plugin

When done click on save and test your website.



 

CriticalCSS.com Power-Up

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

It charges $2/month to provide the service.

CriticalCSS fully automates the extraction of high-quality critical CSS and the creation of rules for that critical CSS. It can work 100% automated, but also allows semi-automated jobs and manual rules.

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

crtitcal-css-settings

 

Critical CSS Alternative:

In case, you don’t want to go with premium critical CSS addon you can use “Speed Up – Optimize CSS Delivery” plugin. This is an automated plugin and purpose of using this plugin is to load your vital stylesheets synchronously and non-vital CSS files asynchronously.

Non-vital CSS-files can be for example fonts, icons, before the fold template-specific CSS, etc. Additionally, you can choose which files to load synchronously with a filter in your function.php file. To do that just modify(add) the function.php file with 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');

 

One Last Step: Keep Your Database Optimized

Removing all the unnecessary data is precious. A junky database takes more time to respond to any queries. So its better to keep your database clean, compact and de-fragmented.

To shape your data tables cleanly, install WP-optimize.

When activated you will get WP-optimize link on the bottom of your WordPress left-bar. Once you click on there a dashboard will appear with all the cleaning option with priority. It’s better for you to follow their recommendation.

screenshot-wp-optimize

 

*Consider installing WP-draft to backup your site before cleaning your database. It will keep you safe from losing precious records.

When you are done with these settings, go to GTmetrix and check your domain name. (you can consider checking any other pages too).

For this website, I’m having a really good performance. Look at the test result screenshot below.

gtmetrix-test-autopimize-wordpress-plugin

 

So, 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 other readers. Also, send me a review so that I can work more on my crafting.




[wp-review]

Don't miss out!
Subscribe To Newsletter

You will be notified with email when we publish editorial articles in this blog 

Invalid email address
Give it a try. You can unsubscribe at any time.

  • 6
    Shares

Rupam Krishna Bharali

Rupam is the founder of www.rankwordpress.in. He is a web developer, blogger, graphic designer and an MCA student from Dibrugarh University. He also loves traveling, exploring new ideas and connecting with people. Let's connect on: twitter

This Post Has 3 Comments

  1. A highly recommended setup, I have tried it and the site has got a great improvement.
    Thanks a lot.

  2. Thanks Rupam. Site performance is really important and I use autoptimize plugin from the first. But your guide helped me to improve the performance .

  3. Visitor Rating: 5 Stars

Leave a Reply

Close Menu