Autoptimize Tutorial 2021 🔥 Best JS CSS HTML Minify WordPress Plugin 💯

Autoptimize JS CSS HTML Optimization Tutorial

—————–

In this video, we will see how to optimize the static resources of our website.

We are going to use a plugin called autoptimize, which will Minify our HTML, CSS, and JavaScript Files.

The free version of Autoptimize has a complete feature set for optimizing your WordPress site.

Let’s go to our website.

As usual, go to plugins and then click Add new search to autoptimize, Remember the spelling, here is only one common O.

We need to install this plugin.

once installed, click activate.

Once you have activated this plugin.

Now we can go to settings and then optimize to set this plugin first, let’s enable the optimized JavaScript code.

It will optimize all your javascript codes from your site.

After enabling that, by default Aggregate JS files will be marked automatically.

Then click “Also aggregate inline JS”, and leave the other options untouched. Because most of the cases are not so effective. If we get any errors, then we will touch them.

our javascript optimization is complete for now.

Them go to CSS Options.

Check Optimize CSS Code. it will open other options too.
Just check that, the first 4 boxes are marked.

HTML Options

Mark HTML Optimization.

CDN Options,

if you are using CDN for your website. Put the CDN URL here. if using Cloudflare, you don’t need to do anything.

Scroll Down,

In the Miscellaneous option, you have first 4 option will be enabled by default. but the last option about optimizing the Shop cart or checkout will be disabled.
If you are running an eCommerce website, then it is important to mark it. let me check this site has a cart or not.

yes, this site has!

Mark it, save changes and purge the cache.

so, let’s check, our site is running well or something is broken.

Everything is fine.

Let’s jump to the Images menu.

Before touching this option, please make sure that you are not using a different image optimization plugin. if you are already using Optimole or Imagify or another, then just ignore it.

But right now, I don’t have any image optimization plugin installed. so, i click optimize images.

some more options will be opened,

select image optimization quality, you can choose as your choice.

Enable WebP image load.
by default, lazyload will be marked.

press save changes.

then go to critical CSS, this is for premium users, if you are not a pro user, just leave it.

then move to Extras.

Google font optimization is very much important.
i prefer to select the third option, because the last one may give you a bad experience on mobile devices.

then, follow my other steps too.
remove emojis, remove query strings.

And, save changes.

So our optimization is done, let’s check the speed meters. what is our loading time, page size, and request numbers?

so, our analysis is complete.

if we compare this, we see.
our page size was 1.40 megabytes.
and total page request was 53

and now, it is 350 KB, and only 23 requests.

Let’s have a look at Google page speed insight.
previously page speed score was 59, and now it is 87.
and desktop, It gives a very much well result too.

———-

For any Query: colaboratory420@gmail.com
Facebook: https://www.facebook.com/wpwiki.youtube/

source