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
Table of Contents
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
- Login to your admin dashboard.
- Click on Plugins -> Add new -> Search for Autoptimize.
- 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”.
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.
Recommended Settings
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”.
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.
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.
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.
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 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.
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
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.
A2 Hosting
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.
Optimole
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?
10 thoughts on “{UPDATED} How to Configure Autoptimize for Better Performance?”
Thankfully I’m helped with my website low performance score.
Sukalyan,
Glad to hear that.
Thanks – the settings you suggested were a little different than mine & inched up my GTmetrix results!
Hey angie,
I’m glad the settings helped you.
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
Aniki,
The same settings might not work for your WooCommerce Store. Better to check out the causes in your GTMetrix report and fix them accordingly.
However, In general case – There are few recommendations that does play a great role in speeding up your store such as:
1. Using a light weight theme, like Astra
2. Using a cache Plugin, like WP Rocket.
3. Try not to use too many Jquery elements such as sliders.
4. Compress your Product Images.
You can follow this for better clarification – https://wordpress.org/support/topic/woocommerce-autoptimize-any-special-settings-anything-to-test-to-confirm-t/
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.
Alixia,
Great!
Let me know, how did it help your website.
Thanks WP Villa for this tutorial on how to configure Autoptimize properly. It has indeed fastened my website. Thanks.