{UPDATED} How to Configure Autoptimize for Better Performance?

Does your WordPress Site experience high Bounce rate? or Does your GT Metrix report shows tons of suggestion such as minify HTML, CSS, JS / Defer parsing of JavaScript?

Well if you are running though this problem or similar problem of slow loading website, there’s a solution for boosting the speed.

If you have read our article on WordPress Speed Optimization you’ll find that Autoptimize is one of the Important Plugins for Speeding up your website.

And.. This article provides a detailed process to Configure Autoptimize Plugin to make your website blazing fast by implementing various speed optimization techniques that will be discussed in the following section.

Note: Autoptimize is not a Cache Plugin, It is a Plugin that optimizes your website for various factors that contribute to slow loading of a website.

Autoptimize when used with a Cache Plugin, can do wonders.

Autoptimize + Cache Plugin –>> Great combination

You can use Plugins such as Super Cache, Hyper Cache or WP Rocket if you can afford $49 for a single website.

This website runs on WP Rocket

Autoptimize WordPress Plugin

Autoptimize WordPress Plugin

What is Autoptimize Plugin?

Autoptimize is one of the coolest plugin using which, you can make your website fast by implementing various speed optimization techniques in a simple manner.

It does so by minifying and combining all of the CSS / JS files, and load it in a proper order to show the maximum effect.

The Plugins helps you to
  • Minify and combine CSS/ JS files.
  • Minify HTML Codes.
  • Serve Resources from CDN.
  • Optimize Images.
  • Optimize Google Fonts.
  • Remove emojis
  • Remove Query Strings.
  • Remove render blocking CSS

Configure Various Autoptimize Settings

1. Installing the Plugin

In order to Install the Autoptimize Plugin, you can follow the step by step process below.
  1. Login to your admin dashboard.
  2. Click on Plugins -> Add new -> Search for Autoptimize.
  3. Click on Install -> Activate.

If you are a WordPress Beginner, you can refer to our guide on the different ways of Installing a WordPress Plugin.

2. Optimize HTML Code

Once you installed the autoptimize plugin,  Find the plugin on the Plugins page and click on settings.

In order to minify all the HTML code in your website, tick the first box, “optimize HTML code”.

Autoptimize Optimize HTML Code
This will remove all of the white spaces in between the HTML codes, which can ultimately help in reducing the file size of your website.

2. Optimize Javascript Files.

This is the most important part, since most of the errors that might occur is because of the Javascript files. To configure it properly, tick “Optimize Javascript Code” and follow the recommended settings below.

Defer Parsing of Javascript Autoptimize

Recommended Settings

Aggregate JS-files: [ENABLE] – This option will minify and combine all of the JS files followed by making it non-render blocking i.e. loading it at the end of page (footer).
Also Aggregate inlne JS: [ENABLE] – This options helps to combine Javascript code present on the HTML elements of your web page. In case, you face any issue with loading of website/ certain elements, you can disable this option.
Force Javascript in: [DISABLE] –Though enabling this option can make your website error free, but load time increases because of Render Blocking. So it is recommended to un-check this option.

Exclude Scripts from Autoptimize: [ENABLE] – Once you have Enabled the first option, you might see some error, If you do – check the respective JS file causing the problem and include here. OR

If your site uses Sliders or any elements that has any effects such as transition/flash, Some of the elements in the site might break or cause an error, in which it is important that you find the js file causing it and include it in the “Exclude Scripts from Autoptimize”.

Add try-catch wrapping: [DISABLE] – Unless you face any problem caused by JS, there’s no need to eanble this option.

3. Optimize CSS Code.

The Stylesheet used by your Theme or Plugin also plays an Important role in optimizing your website for Speed.

In order for this to work you need to tick the “Optimize CSS Code” and follow the Recommended Settings given below.

Optimize CSS Code Autoptimize

Recommended Settings

Aggregate CSS-files: [ENABLE] – Similar to JS, this option will minify and combine all the CSS files.

If not done, the individual CSS will not be combined that tends to Increase the number of request made by the Server and hence more load time.

Also aggregate inline CSS: [ENABLE] – This works the same as JS, will combine the CSS from the HTML of your website.

Generate data URIs for Images: [DISABLE] – A good practice is to disable this option when using a CDN.
Including background images in CSS will definitely decrease the number of request but still the Images are called from the origin server rather than the CDN, which is not feasible.

Inline and Defer CSS: [ENABLE] – Google clearly explains the importance of deferring non essential CSS. It says, “Only load CSS that make up the above the fold content, known as Critical CSS”

You can read about Generating Critical CSS in the section below.

Inline all CSS: [DISABLE] – This is not recommended. Inlining all the CSS tends to make the webpage bigger which is a sign of low performance.

Exclude CSS from Autoptimize: “If you encounter any error” or some of the elements doesn’t show up as it should be, you can find the CSS causing the issue and exclude by including the file name in the “Exclude CSS from Autoptimize”.

CDN Options

CDN is a network of servers that helps to deliver resources to the users based on their geographical region. This helps to improve the load time of a website for every user, irrespective of their location. 

Autoptimize provides you with an option to load the autoptimized file (css/ js  etc.) through a CDN.

CDN Settings Autoptimize

All you need to do is enter the CDN Root URL. If you’re on Cloudfare, you don’t need to enter anything since cloudfare doesn’t provide any CDN URL.

However, If you’re using a premium CDN like ManCDN or Keycdn, you can get the URL from your account and enter the same, here.

Misc. Settings

Autoptimize Plugin provides few other settings to fine tune the process of Speed optimization.

Save aggregated script/css as static files: Autoptimize optimizes and stores the file (CSS/JS) in a cache folder on your web server and are served from the Cache and every compressed (optimized) file has an expiry.

It says, In case the server cannot handle this function properly, you can Disable this option.

Minify excluded CSS and JS: [DISABLE] – I recommend you to disable this option. CSS and JS files have been excluded because of some errors and you don’t want to mess this up by minifying them.

Also optimize for logged in editors/ administrators: [DISABLE]: Running autoptimize in the admin dasboard/ backend  might disturb the work flow, hence not recommended.

Extra

Google Font Settings Autoptimize

Google Fonts: If your website/ theme uses Google Fonts, it might not be a wise idea to remove it. However, an optimum solution would be to enable the Fourth option “Combine and preload in head”.

In this case, the font’s are loaded after rendering the contents of the page.,

Remove emojis: If emojis are not a part of your business, it’s definitely recommended to remove them. 

The Browser makes a request to load the emoji file, which definitely increases the load time, hence check this option.

Remove Query Strings from static Resources: CSS/ JS file with version no. at the end of URL with parameter such as “?” is Query Strings. 

It’s better to remove these strings since it cannot be cached and lowers the website speed.

Preconnect to 3rd party domains: Files and Resources on your website makes request to several other domains for  the required content/resource/data such as Google Fonts, Analytics, Tag manager etc.

Enabling this option makes the browser aware of the 3rd party domains (it has to make connection) before  any request  is made. In simple terms, the browser initiates the process of connecting to 3rd party domain before the request is made.

Async-Javascript files: This is a simple deferring of JS files. You can use the Async Javascript plugin to do so.

Optimize Youtube videos: Videos are heavy elements that needs to be optimized. Check this option to lazy load videos using WP Youtube lyte such that no request are made until and unless the videos comes into the view of the user. 

Another plugin you can use is WP Rocket that has an in-built option for lazy loading images and videos.

Critical CSS

If your Google page speed report suggests to remove the render blocking CSS, this step important. [Critical CSS is also a part of Autoptimize CSS Settings “Inline and Defer CSS”]

Critical CSS – only load the the CSS need to build the above the fold content and defer the load of non-essential CSS.

Autoptimize Critical CSS

Critical CSS in Autoptimize is powered by “Autoptimize Critical CSS Power-Up Plugin“. You need to install this plugin and enter the criticalcss.com API Key, which is  a premium service that can be availed for £7/month. 

Once done, the Power-up with the help of criticalcss.com, creates different Critical CSS rules and places the Critical CSS depending upon the type of pages.

This ensures that your website loads very fast and improve the user experience.

Bonus Tips

If you want to further improve the speed of your website, you can consider the following tools that are great in regards to a blazing fast website speed.

WP Rocket

WP Rocket is no doubt the #1 WordPress Cache Plugin to boost the website speed. It is highly popular among Bloggers and webmasters.

The Plugin is built to handle and implement all the technicalities of website speed without any hassle.
It is a tool designed to be user friendly and work effectively on any WordPress website.

A2 Hosting

Your Web Host plays is co-related to the speed of your website. A bad hosting might be a risk to your business. It not only causes increase load time but also can compromise with the Security.

If you want to keep these things aside, you can consider A2 Hosting. An affordable web hosting powered by Turbo Servers that ensures 20X Faster Speed.

The Hosting commits to offer 99.9% UpTime with Bullet Proof Security environment for website.

Optimole

Visual elements makes up a major chunk of resources on your website. However, you can optimize the website speed without compromising on the quality and the quantity of the graphic elements used.

A free tool such as Optimole offer for Image optimization on your website. Some notable features include multiple compression options, CDN for images, Lazy load and many more.

Final Thoughts

Speed is one of the important factor when it comes to improving the User Experience and the visibility on the Search Engines. And Autoptimize, if run correctly, will definetly boost your website speed.

Let us know in the comments below your experience with Autoptimize. Also we’d love to know what are the Plugins you use on your website for speed, apart from Autoptimize?

9 thoughts on “{UPDATED} How to Configure Autoptimize for Better Performance?”

  1. Hi, I would like to know if you have some recommendation for an woocommerce wbesite ?
    I Want to use this plug-in but I want to take 0 risks because my website is running rigth now.
    Best regards
    Axel

    Reply
  2. Thank you very much for this help. I have seen many videos on YouTube about the exact setting of the Autoptimize WordPress Plugin, but I did not find the best. Here you have provided the best setting. Hopefully this will give me the best result for my website.

    Reply

Leave a Comment

Share
Tweet
Share
Pin