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.
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.
- Aggregate JS-files:
- Also aggregate inline JS:
- Add try-catch wrapping:
- Do not aggregate but defer:
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.
- Optimize CSS Code:
- Aggregate CSS-files:
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:
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
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:
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.
- Optimize HTML Code:
Minimizing HTML code could help in improving website loading speed.
- Keep HTML comments:
Enable it but if you see any errors or space issues, keep it disabled.
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.
Step 2: Fill Up Login Info
Fill in your email address and set up a strong very password. Also, check T&C.
Step 3: Check Your Email
Bunny CDN will send you a mail to make sure you’re a genuine customer. Click on “Confirm 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)
Step 5: Copy Your Bunny CDN URL
A new page will open where your BunnyCDN URL will be noticeable. (Scroll down) Copy it.
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.
Now, test your website in GTmatrix. It should show you a green single for CDN.
Everything should be perfect now.
Here you can see cache stats and data. There is nothing to change or edit. Move on to the next thing.
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.
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.
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.
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:
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.
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
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,
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:
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 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!
Thanks For Reading!