fbpx

Last Updated on

ADVERTISEMENT

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!

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.

Created by

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

Autoptimize is compatible with WP Asset CleanUp and WP Rocket.

Autoptimze is completely free of cost.

Autoptimize is compatible with WordPress 4.0 or higher, and PHP 5.6 or higher.

The authors of Autoptimize always update Autptimize to fix bugs and other issues.

WP Asset CleanUp

If you use WP Asset CleanUp I understand your pain.

You don’t want to break WordPress and stuff like that?

Don’t you?

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.

WP Rocket

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.

Installing Autoptimize

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

Fist of all you just need to know some things like JavaScript, CSS and other stuff.

JavaScript is a piece of code that run in your WordPress site.

Ususally JavaScript slow WordPress sites.

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!

Step #1 Optimize and Minify JavaScript

If your WordPress site loads a lot of JavaScript than yes is boring because if it slows load.

No problems.

Here is what you need to do to optimize and minify JavaScript.

Scroll down to “Optimize JavaScript Code?” JavaScript options.

  1. Click the checkbox “Optimize JavaScript Code?”
  2. Click the checkbox “Aggregate JS-files?”

It should look like that.

That’s all you need to do with JavaScript.

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.

  1. Click the checkbox “Aggregate CSS-files?”
  2. 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

Heh.

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.

  1. 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.

To implement Critical CSS to Autoptimize you need to install this plugin and buy a Critical CSS API Key.

Then do the following steps:

  1. At CSS Options click the checkbox “Inline and Defer CSS?”
  2. Then install the Critical CSS plugin and activate it
  3. Go to https://criticalcss.com and buy an API Key.
  4. Copy the API Key and paste it in the “Critical CSS” options

Done! πŸ™‚

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.

Step #6 Async and Defer JavaScript

Autoptimize provides also another plugin that add the Async and Defers HTML codes automatically.

It also eliminates render-blocking JavaScript issues.

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.

Scroll down to “Enable Async JavaScript?” Enable Async JavaScript options.

  1. Click the checkbox “Enable Async JavaScript?”

Then scroll down to Async JavaScript Method options.

  1. Click the radio button “Async”

It should look like this.

Then scroll down to jQuery.

  1. Click the radio button “Exclude”

Then scroll down to Async JavaScript For Plugins.

If you have installed Autoptimze correctly you will see the Autoptimize options.

  1. Click the checkbox “Enable Autoptimize Support”
  2. Click the radio button “Async”

You will see something like this.

You are done!

Conclusion

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.

Cheers! πŸ™‚

ADVERTISEMENT
Categories: WordPress

Jonathan Terreo

Jonathan is a Software/Web Developer that loves blogging in the free time. He loves to upload quality content to his websites. He is a WordPress/SEO expert due to his experience.

nunc Donec Sed efficitur. vulputate, at ultricies leo. et,