How to Properly Configure Autoptimize Plugin Settings 2020 | CDN Setup

BY:Sandip Maheshwari
Last Updated:Last updated Jul 8, 2020
Category:WP SPEED
How to Properly Configure Autoptimize Plugin Settings 2020

Autoptimize is a great cache plugin for WordPress. It helps your site to improve your site speed by minifying HTML, CSS & Javascript with some additional setting.

 

There are some web hosting providers like WP Engine, Godaddy, etc. that have blocked cache plugins as they have built-in the caching system. 

 

You can still use the Autoptimize plugin to optimize your WordPress website speed. The best part of this plugin is that you can use Autoptimize plugin with other cache plugins like WP Fastest Cache, W3 Total Cache, WP Super Cache, or even Swift.

 

I am using the Autoptimize plugin with WP Fastest Cache (free version) to improve my WordPress site speed.

 

In this post, I have shared the best Autoptimize plugin settings 2020 to Speed your WordPress website. You can also check out my complete post on How to Speed Up WordPress Website With 100% Gtmetrix Score.

 

Why Should You Choose Autoptimize?

  • Autoptimize is compatible with all the web hosts.
  • Autoptimize offers most of the optimization options for free.

 

How To Properly Configure Autoptimize Plugin 2020

essential plugins for wordpress blog 2020

 

Under JS, CSS & HTML Tab

 

 JavaScript Options:

 autoptimize setup guide

 

Aggregate JS-Files – Enable this option as this will combine all the javascript files. If this option is off, all the javascript files will load individually.

 

Also, Aggregate Inline JS – Enable this as it will combine all the javascript files from the HTML. If any part of your site breaks then disable this option.

 

Force Javascript in < Head> – Disable this option. Forcing javascript files to load in the header may slow down your site speed.

 

Exclude scripts from Autoptimize – You can exclude specific javascript files that will not be optimized. By default Wp-includes/js.dist/, wp-includes/js/tinymce/ & js/jquery/jquery.js are excluded. Just enter the path of the javascript file that you want to exclude.

 

Add try-catch wrapping – disable this. Enable this option if you have any JS errors.

 

CSS Options:

 autoptimize ideal settings

 

Optimize CSS Code – Enable this.

 

Aggregate CSS – files – Enable this as it will combine all the CSS files into a single file.

 

Also Aggregate Inline CSS – Enable, just like inline Javascript files, checking this option will inline all CSS files from HTML which will reduce page size.

 

Generate data: URLs for images – Enable this if you are not using any CDN. It includes small background images in the CSS file instead of as separate downloads. This will make fewer HTTP requests. But if you are using any CDN then disable it is an option.

 

Inline and Defer CSS – Enable this. Run a speed test in Gtmetrix. If any CSS file is still showing, then you can line and defer the CSS file. The best tool to inline and defer CSS is criticalpathcssgenerator.

 how to increase speed of wordpress site

First, enter your website URL.

Next copy the entire codes from the CSS file and paste that code in the full CSS box. 

Now, click on the create critical path CSS button to generate the file. 

Next, copy the newly CSS file codes and paste that in the inline and defer CSS box. 

If you have more than one CSS file then you can generate separate codes, just give some space in the inline and defer CSS box and paste those codes.

 

Inline All CSS – Disable this. You can either choose line and defer CSS or line all CSS. Autoptimize does not recommend enabling inline CSS files.  

 

Exclude CSS From Autoptimize: same as the exclude JS files, you can exclude certain  CSS files. If you are getting any error from any CSS setting then you can paste the path to exclude them.

 

HTML Options:

 autoptimize plugin tutorial 2020

 

Optimize HTML Code – Enable this. This will reduce the page size by removing whitespace.

 

Keep HTML Comments – Enable, if you want to optimize your blog comments otherwise Disable this.

 

CDN Options

 autoptimize cdn settings

 

If you are using any CDN, then you have to enter your CDN URL here. Some of the CDNs recommended By WordPress.org are Amazon Cloudfront, MAX CDN (Stack Path) & Cloudflare. 

 

Cloudflare does not provide CDN URLs, instead you have to change your Nameservers. So, if you want to set up Cloudflare CDN then you can check out our blog on how to set up Cloudflare CDN. 

 

Misc Options:

 autoptimize aggregate inline JS

 

Save aggregated script/CSS as static files – I will recommend Enable this as it will serve cache CSS and Javascript files through your server. You may need to disable this option if your web server doesn’t properly handle the compression.

 

Minify excluded CSS and Javascript Files – Enabling this will also minify the excluded CSS & JS files. But if your site breaks or you see any minification related issues then uncheck this option.

 

Experimental: Enable 404 Fallbacks:  Disable this.

 

Also Optimize For Logged In Editors/ Administrators : This option is up to you. You can either enable or disable this for your editors/administrators.

 

Image Optimization:

 

Autoptimize plugins also come with built-in ShortPixel for image optimization. You can even optimize your image to load on WebP format in supported browsers.

 

But if you are using any other image optimization like Smush, Imagify then you can skip this image optimization part.

 autoptimize above the fold css

 

Optimize Images: This will load your images from Shortpixel’s CDN & your images will load faster.

 

Image Optimization Quality: You can choose any of the three image optimization quality options. But you might be thinking about which one is the best choice for your website. So here is the difference between all the three types of image compression.

 autoptimize plugin setup

 

Among all these three options, I use Glossy for my site.

 

Load WebP in supported browsers: Enable this option, as it will load the WebP version of your images on the supported browsers.

 

Lazy load images: It means that the images will load as the visitor scroll down the page which makes your website load faster. So, I will recommend enabling this option.

 

 

Critical CSS

 

Critical CSS is a paid feature and you have to install Autoptimize criticalcss.com power-up plugin. The plans start at $7/month. 

 autoptimize criticalcss.com power-up

Extra Auto-Optimizations

 best autoptimize settings 2020

Google Fonts: If you are using Google Fonts in your site then you can either choose Combine and link in head (fonts load fast but are render-blocking) or Combine and load fonts asynchronously with webfont.js. Test  both of these settings one by one and see which one works best for your website.

 

Remove Emojis – Enable this option. removing emojis will reduce your page size.

 

Remove Query Strings From Static Resources : Enable this. This will remove your score in Google page speed, gtmetrix, Pingdom, and other website speed test sites.

 

Preconnect To 3rd Party Domains: Here you have to enter the URL of the content/script page like Google analytics, Google fonts, etc. This will begin the process of connecting 3rd party domains before the request is made on the browser and thus improves your Website speed.

 

Preload Specific Requests : This will tell the browser to download an asset as soon as possible. This will speed up loading time of those assets like fonts, scripts, etc.

 

Async Javascript Files : This will load certain external javascript files asynchronously which improves your WordPress website speed. You can use Async Javascript plugin for this.

 

Optimize Youtube Videos: If you have youtube videos on your site, then you can use WP Youtube Lyte plugin which is also developed by Autoptimize developers. This will lazy load Youtube videos just like the images and will load when a visitor scroll down & clicks the play button. 

 

Optimize More:

You can also watch my video, where I have covered almost everything on how to speed up WordPress website 2020 for free with timestamps in the video description.

Watch this video on YouTube.

Autoptimize Plugin FAQs:


How Do I Use Autoptimize Plugins?

How to Properly Configure Autoptimize Plugin Settings 2020

Just install & activate autoptimize plugin on your WordPress website. Then optimize javascript, CSS, HTML files. You can also check out this blog post.

How to Properly Configure Autoptimize?

How to Properly Configure Autoptimize Plugin Settings 2020

Aggregate JS-Files - enable Also, Aggregate Inline JS- enable Force Javascript in < Head> - disable Exclude scripts from Autoptimize - You can exclude any scripts here. Add try-catch wrapping - disable Optimize CSS Code - enable Aggregate CSS - files - enable Also Aggregate Inline CSS - enable Generate data: URLs for images - Enable Inline and Defer CSS - Enable inline All CSS - Disable Exclude CSS From Autoptimize: Here you can exclude any CSS file from optimization. Optimize HTML Code - Enable Keep HTML Comments - Enable

How To Optimize Google Fonts Using Autoptimize Plugin?

You can choose to combine and link in the head option and enter the font URL in the Preconnect box.

Conclusion:

 

Autoptimize is one of my favorite plugins for WordPress speed optimization & It is easy to set up.

Apply all the recommended autoptimize plugin settings 2020 to improve your WordPress website speed & you can also use this plugin with other cache plugins. 

If you have any queries regarding WordPress speed optimization, then fill free to comment below.

Sandip Maheshwari
Written By Sandip Maheshwari

A guy blogging for the last 3 years, I am a guy who loves to write about SEO, social media and affiliate marketing. An avid cricket fan, die-hard fan of Silicon valley the series. I love to blog in my free time to share my knowledge with people around the world.

Summary
How to Properly Configure Autoptimize Plugin Settings 2020 | CDN Setup
Article Name
How to Properly Configure Autoptimize Plugin Settings 2020 | CDN Setup
Description
Autoptimize Plugin Settings 2020 : Aggregate JS-Files - enable Also Aggregate Inline JS- enable Force Javascript in < Head> - disable Exclude scripts from Autoptimize - You can exclude any scripts here. Add try-catch wrapping - disable Optimize CSS Code - enable Aggregate CSS - files - enable Also Aggregate Inline CSS - enable Generate data: URLs for images - Enable Inline and Defer CSS - Enable inline All CSS - Disable Exclude CSS From Autoptimize : Here you can exclude any CSS file from optimization. Optimize HTML Code - Enable Kepp HTML Comments - Enable
Author
Publisher Name
Digirockstar
Publisher Logo
SITEGROUND HOSTING
Malcare PLugin

Malware Scanner & Security for WordPress

Read Our Malcare plugin Review
Greengeeks HOSTING

$2.95/pm

60% Discount

Read Our Greengeeks Review

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.