Some links on Wikicat may are paid links may earn us a commission. Read the Affiliate Policy disclosure for more info.
What is Autoptimize?
How do Autoptimize works?
Well, in this article we will explain how Autoptimize works and how to install it correctly in WordPress.
Let’s get started!
- 1 Introduction - What is Autoptimize?
- 2 Compatibility and Price
- 3 Installing Autoptimize
- 4 How does it work?
- 5 Some things you need to know
- 6 Optimizing WordPress with Autoptimize
- 7 Conclusion
Introduction - What is Autoptimize?
Autoptimize is one of the best optimize plugin for WordPress.
With more than 1 million active installs, Autoptimize is the most trusted optimize plugin for WordPress.
Autoptimize and SEO
Autoptimize doesn’t affect SEO, it grows it.
Because of the optimization of Autoptimize, search engines like Google love when your WordPress site is fast and optimized correctly.
It’s very important to speed and fast loading for SEO.
Trust me! 🙂
Compatibility and Price
WP Asset CleanUp
If you use WP Asset CleanUp I understand your pain.
You don’t want to break WordPress and stuff like that?
As I said before, Autoptimize is completely compatible with other optimizing plugins like WP Asset CleanUp.
When you activate something on WP Asset CleanUp, that option will automatically be deactivated on the other plugin.
In short, it’s completely safe.
Another thing I really want to say is that Autoptimize can optimize very better than WP Asset CleanUp.
Because Autoptimize is made for that.
If you want to optimize with WP Asset CleanUp or you use both plugins I recommend you my full guide here.
Like WP Asset CleanUp, Autoptimize is completely compatible with Autoptimize.
We use all those plugins at the same time and we don’t have any problem 😉
My reccomandation is that you check my full guide for WP Rocket, like that everything will work fine.
You can download it directly from your WordPress site, or by downloading the zip from WordPress.org.
How does it work?
Fist of all is that you need to know if your cache plugin is compatible with Autoptimize.
Here is the list of compatible plugins that work with Autoptimize:
- WP Rocket
- WP Fastest Cache
- WP Super Cache
- LiteSpeed Cache
- W3 Total Cache
Then all you need to do is activate the plugin.
When you activate the plugin you will see something like that.
Some things you need to know
But if you optimize it then it will load more quickly and faster.
The same with CSS, WordPress uses a lot of CSS files, not only WordPress also some plugins that add ridiculus CSS/JS scripts in your WordPress site.
What's mean "Minify"
Minification is the process of removing unnecessary spaces, formatting, comments, and other unnecessary stuff from the files.
Generally, the file types of HTML, CSS, and JS should be minified in order to improve the page loading speed.
Especially plugins like Yoast SEO add HTML comments on your WordPress site.
Optimizing WordPress with Autoptimize
Let’s start with optimizing!
- Click the checkbox “Aggregate JS-files?”
It should look like that.
Let’s jump to CSS!
Step #2 Optimize and Minify CSS
If CSS files are optimized correctly your WordPress site will load very very fast.
Just because Browsers like Chrome prefer an optimized CSS.
To optimize CSS follow these steps:
Scroll down to “Optimize CSS Code?” CSS options.
- Click the checkbox “Aggregate CSS-files?”
- Click the checkbox “Also aggregate inline CSS?”
It should look like that.
That’s all you need to do with CSS.
Let’s jump to HTML!
Step #3 Optimize and Minify HTML
That’s easier than you can think.
I’m not kidding :b
All you need to do is:
Scroll down to “Optimize HTML Code?” HTML options.
- Click the checkbox “Optimize HTML Code?”
Yeah is that easy 😉
And it should look like that.
Step #4 Critical CSS (paid/optional)
In short, the loaded nature of “above-the-fold” was one of the reasons I initially dismissed the technique.
I’ll be the first to argue that in the traditional sense the fold isn’t really a thing, so treating is as critical and non-critical is the standpoint I’ve taken in my mind, even naming my CSS files accordingly.
Applying Critical CSS your WordPress performance will grow significantly.
Luckily Autoptimize provides an automated Critical CSS plugin the works perfect with Autoptimize.
Then do the following steps:
- At CSS Options click the checkbox “Inline and Defer CSS?”
- Then install the Critical CSS plugin and activate it
- Go to https://criticalcss.com and buy an API Key.
- Copy the API Key and paste it in the “Critical CSS” options
Critical CSS will do the rest of the work automatically.
Step #5 CDN
If you use a CDN whatever along Cloudflare.
Then consider that Autoptimize provides CDN compatibility.
We recommend to use it with KeyCDN.
Other CDNs are fine.
Anyways all you need to do is put the CDN URL/Patch in the “CDN Options”.
Here are our CDN settings.
P.S. We use KeyCDN and Cloudflare.
Autoptimize provides also another plugin that add the Async and Defers HTML codes automatically.
We made an article about Async and Defer if you need to know more 🙂
To do so all you need is install this plugin.
Then here is the best configuration.
- Click the radio button “Async”
It should look like this.
Then scroll down to jQuery.
- Click the radio button “Exclude”
If you have installed Autoptimze correctly you will see the Autoptimize options.
- Click the checkbox “Enable Autoptimize Support”
- Click the radio button “Async”
You will see something like this.
You are done!
Hope we helped you to understand and optimize with Autoptimize 🙂
Remember to help us by sharing this post with your friends on your preferred social networks.
And also we welcome your comment below!
If you need help we glad to help you by asking in the comment section.
If there is news about Autoptimize or new setup stuff we will update this post.
So it is really important that you check sometimes for updates, or more easily subscribe to our newsletter to be up-to-date.
That’s all we know for now.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.