Autoptimize Plugin Ideal Settings – Step By Step (CDN Tutorial)

Don’t know how to set up the Autoptimize plugin? I’ll help you!

Autoptimize can be the most useful free plugin to improve your site’s speed. However, in the order to achieve maximum speed with the help of Autoptimize, you first need to set it up perfectly.

You’re at the right place because I’ll be going to show you the ideal settings for Autoptimize to get the best results. But before we begin, I request you to please pay attention to every step so that you won’t make any errors.

Installation Process

To install Autoptimize, you can either install it from WordPress.org or by visiting the plugin section of your WordPress site. Type “Autoptimize” and hit enter to find the plugin. Once you install the plugin and activated it. Click on Settings.

Also, you’ll see the Autoptimize tab at the top, indicating that Autoptimize has been activated.

(1) JS, CSS & HTML

Optimizing JS, CSS & HTML is an important step to increase website speed. Cluttery coding can result in poor performance.

Autoptimize lets you optimize these things with the ease of one click. So what to select and what not.

JavaScript Options

  • Optimize JavaScript Code:

Enable

  • Aggregate JS-files:

Enable

This option will combine all of your JavaScript files into a single file. Enabling it could increase the GTmatrix score. If you don’t enable it, then individual files will be loaded.

  • Also aggregate inline JS:

Enable

This feature combines inline JavaScript files that are placed in HTML files. It might be a little risky however, I recommend it to turn it as combining JavaScript can affect site speed positively. If you see any error, come back and disable it.

  • Force JavaScript in <head>:

Disable

Not good for optimal speed as it creates JavaScript render-blocking.

  • Add try-catch wrapping:

Disable

Enable it only if your aggregated scripts break because of a JavaScript error.

  • Do not aggregate but defer:

Disable

Since we’ve already enabled Aggregate JS files, we don’t need to enable it. You can select only one of them.

  • Exclude scripts from Autoptimize:

Do not touch it unless you’re a professional coder.

CSS Options

  • Optimize CSS Code:

Enable

  • Aggregate CSS-files:

Enable

Enabling this feature will combine all of your CSS files. It can improve the page speed scores. I recommend enabling it.

  • Generate data: URIs for images:

Disable

Don’t enable it if you’re using or about to use a CDN. Enabling this will forces images to be served from your origin server instead of your CDN. Which might put pressure on your server.

  • Eliminate render-blocking CSS

Enable

If you reduce the number of render-blocking CSS, you can reduce the critical rendering path and lessen page load times, thus improving the user experience and search engine optimization.

Autoptimize might ask you to paste the above-the-fold CSS. Don’t do anything, leave it as it is.

  • Inline all CSS:

Disable

According to logrocket.com If you inline too much, the performance implications will be more harmful than what you started with.

  • Exclude CSS from Autoptimize:

Don’t change anything here unless you what you’re doing.

  • Remove Unused CSS:

Here, Autoptimize suggests buying a service. Autoptiomie claim that by purchasing this service, you can reduce the CSS size of your site by 90%, I think you’re good. Don’t need to buy anything.

HTML Options

  • Optimize HTML Code:

Enable

Minimizing HTML code could help in improving website loading speed.

  • Keep HTML comments:

Enable

Enable it but if you see any errors or space issues, keep it disabled.

Read More!

How To Exclude Your IP Address From Google Analytics & Google Analytics 4: Step By Step

How To Update PHP Versions In WordPress (PHP 8.0 & 7.4) Every Host Covered

CDN Options

To connect CDN with Autoptimize, you need to first connect your website to a CDN. In this tutorial, I’m using BunnyCDN.

BunnyCDN is known to provide the best response time. It is definitely better than StackPath and Cloudflare, however, Cloudflare is available for free but BunnyCDN isn’t.

Cloudflare doesn’t provide CDN URL so we’re not going to use it for this tutorial. Let’s see how to create a BunnyCDN account and connect to Autoptimize.

Step 1: Create Bunny CDN Account

Click “Try FREE For 14 Days” to go to the signup process page.

Bunny CDN Setup

Step 2: Fill Up Login Info

Fill in your email address and set up a strong very password. Also, check T&C.

Bunny CDN Setup 2

Step 3: Check Your Email

Bunny CDN will send you a mail to make sure you’re a genuine customer. Click on “Confirm Account”

Confirm your bunny.net account

Step 4: Add Pull Zone Set Up

To Create a Pull Zone.

  • Fill in your site’s name (Only name, no extensions like .com or .net)
  • Put your original URL (example, hostinggrow.com)
Add Pull Zone bunny.net

Step 5: Copy Your Bunny CDN URL

A new page will open where your BunnyCDN URL will be noticeable. (Scroll down) Copy it.

Pull Zone Installation Instructions bunny.net

Step 6: Paste The CDN URL In CDN Section

Add HTTP or HTTPS before pasting CDN URL.

Step 7: Click On Purge Pull Zone In BunnyCDN

Go to BunnyCDN and snap-on Purge Pull Zone to complete the process.

Purge Pull Zone In BunnyCDN

Now, test your website in GTmatrix. It should show you a green single for CDN.

Everything should be perfect now.

Cache Info

Here you can see cache stats and data. There is nothing to change or edit. Move on to the next thing.

Misc Options

Unselect everything here because your host can manage it.

  • Save Aggregated Scripts/CSS as Static Files:

If you enable it, then it may put extra pressure on your server. Enabling it means the CSS and JS files are saved to the cache and served through your server. I recommend disabling it.

  • Minify Excluded CSS and JS Files:

Minifying excluded CSS and JS files doesn’t make any sense. It may create some minification-related issues as well. It’s better to disable it.

  • Experimental: enable 404 fallbacks:

Keep it disabled. It may require server-level configuration.

  • Also Optimize for Logged In Editors/Administrators

Don’t enable it. Usually, we do not enable performance features in the WordPress admin.

  • Enable configuration per post/ page:

Keep it disabled. Once you set up everything, I don’t think you really need it.

Read More:

Wp Fastest Cache Settings: Complete Settings With Screenshots

How To Fix Slow WordPress Admin Panel (Dashboard) With These 17 Tweaks

(2) Images

Images make our blog posts more engaging, and they play a big role in SEO. So, it is important to add really good images. However, some bloggers don’t optimize images and that increases page loading time.

To tackle this challenge, Autoptimize has created an Images optimization section where it is possible to optimize images present on your site.

Autoptimize is in partnership with ShortPixel for optimizing images. In addition to an image quality adjustment, Autoptimize’s integration also lets you generate and serve WEBP versions of your images.

However, I don’t recommend using the image optimization feature in Autoptimize. Instead, I recommend using the full-featured plugins from ShortPixel, Smush, or Imagify directly.

  • Optimize Images:

Use the proper image optimization plugin. If you don’t want to install Imagify or Shortpixel then enable it.

  • Lazy-load images:

Enable it.

It might be frustrating for some users who like to scroll down faster, however, enabling this feature can certainly increase your website speed.

(3) Critical CSS

In this part. Autoptimize promotes a website called criticalcss.com

To be honest, I haven’t tried their service so I don’t really know how much they can improve my site’s performance. If you’re interested, then the price starts from 7$/month.

Your site will do fine without purchasing their service, trust me. You don’t need to purchase anything apart from a good hosting service.

Your host should have less than 400ms server response time.

Read More:

W3 Total Cache Settings For Beginners (Cloudflare + BunnyCDN)

How To Create A Bluehost Staging Site: Ridiculously Easy

(4) Extra

The reason why I like Autoptimize so much is that it doesn’t really stop surprising us. They have got a unique section where some really cool features waiting for you.

Let’s look at the settings and some details about them.

  • Google Fonts:

Select Combine and link in head (fonts load fast but are render-blocking), includes display:swap.

I don’t recommend selecting Leave as is because it won’t improve your site performance in any way.

  • Remove emojis:

I’ve disabled it because I use emojis to make my post a little interesting, but you can keep it disabled because emojis take too much time to load, it can increase page load time.

  • Remove query strings from static resources:

According to Hubpost.com,

A query string is everything that supports the “?” or “&” in a URL. Developers use query strings to transfer content values or to separate files from one another. You can find them in static resources, like JavaScript and CSS files. A query string looks like this:

 
https://yourwebsite.com/wp-includes/js/wp-embed.min.js?ver=3.5.7

Query strings stop servers from caching your website. As a result, your page speed becomes slow. By eliminating the query string, you can improve caching and decrease the page load time.

  • Preconnect to 3rd Party Domains

Preconnect informs your browser that the page intends to connect to a different origin and that you would like this process to start as soon as possible.

Below are some examples:

  1. https://fonts.googleapis.com
  2. https://fonts.gstatic.com
  3. https://www.google-analytics.com
  4. https://ajax.googleapis.com
  5. https://www.googletagmanager.com
  6. https://maps.google.com

I recommend adding six domains or less than six to Autoptimize’s pre-connect domain list because specifying pre-connect directives for too many domains can result in a performance hit.

Add these domains one by one, and separate them with a comma.

  • Preload specific requests:

Preload directives tell your web browser to download an asset as quickly as possible. This directive is helpful for downloading assets that are required very early in the page load process. Preloading too many assets can cause your site to load very slowly. You can read more about it from WP-Rocket

  • Async Javascript-files

According to Kinsta, this feature allows you to specify some external JavaScript files to load asynchronously via the async HTML flag.

It can improve page speed, I recommend doing sufficient testing to make sure that no site functionality is affected. Read this tutorial by Varvy.com to understand it better.

  • Optimize YouTube Videos

Embedding Youtube videos may slow down your site. Autoptimize suggests a plugin called WP YouTube Lyte that allows you to “lazy load” your videos, by inserting responsive “Lite YouTube Embeds”.

(5) Optimize More!

Autoptimize recommends some add ons to improve your site’s performance. If you’re interested, you can test some of them. Apart from that there is nothing really need to focus on.

It’s a wrap!

I hope his tutorial helped you. If you are facing any issues, please let me know!

Also, check out my recent works!

12 Plugins To Make Your WordPress Site Faster Than Yesterday

How To Clean WordPress Database In Less Than 2 Minutes

Thanks For Reading!

Sumit
Sumit

Sumit is a regular contributor to Hostinggrow.com. He has 6 years of experience in blogging, and he loves football, his favorite player is - Lionel Messi (GOAT), but he has no hate for Ronaldo.

Articles: 54

Leave a Reply

Your email address will not be published.