Many WordPress developers recognize that Autoptimize is one of the crucial cache plugins for speeding up a website. It can be a perfect solution to boost the speed if you have the problem of slow loading website. Proper Autoptimize settings and configuration are needed to get the best performance from your website.
You may experience high bounce rate for your WP site. Also, the GT Metrix report can show you to minify HTML, CSS, and JS files. All of these issues will be vanish after using the Autoptimize WP plugin. We will provide a detailed process of configuring the Autoptimize settings in this helpful article.
What is Autoptimize plugin and how it works?
Now you may have a question that what is above the fold and what is below the fold? For your kind information, above the fold means the first portion of your website which is getting loaded in your browser in the first preview. While below the fold means the down part of your site, which is visible when you scroll down the page.
Autoptimize also can optimize the HTML comment, which is the best part of this plugin. It’s a great free plugin that is specially developed for reducing and compressing HTML, CSS, JS files. This WP utility comes with a useful function to turn off the Google fonts. This feature helps to reduce the number of files being loaded from external links.
Why use the Autoptimize?
A huge number of WordPress website owners loves to use this plugin on their site. If you can complete the setup of this WP plugin and run it correctly, then you will be able to achieve a faster website speed and also better performance in various types of network.
Benefits of Autoptimize plugin
After running this plugin, you will get some good results such as-
- Reduce the number of requests made to the server.
- It decreases the website initial load time.
- Decreases the file size or page size of the website.
We can realize the value of your time. That’s why we will only provide the necessary actions that you should perform to configure the Autoptimize plugin. We will explain about the optimal configurations only. If you feel confused at any point while reading this article, please inform us about that. Then we will try our best to give a reply to your feedback and solve your problem.
So let’s move forward to configure the Autoptimize Settings and Configuration
Step 1. Install
At first, you have to log in to your WP admin panel. Then move your mouse cursor over the Plugins menu. Now click on the “Add New” option. After that, you will find a search box on the next page. Type “Autoptimize” in the search bar and press the enter button.
The plugins icon will appear now, which is easy to find. Then you need to click on the “Install Now” button and activate the plugin. You also can download this plugin from the extension storage, which is another option for you. After complete the downloading, you have to upload it and then activate it.
Now, go to the “Plugins” option and click on the “Installed Plugins” submenu. Then you may find the “Autoptimize” plugin at the installed plugins page. To configure the WP plugin, you have to choose the “Settings” option.
You can select all the options in the main setting page if you want standard compression on your website. After that, a simple page will welcome you, where three options are available. So you have to find the “Show Advanced Settings” on the main tab. First, click on it to see various settings options.
Step 2. Main Settings
HTML Options: Set the HTML options like below.
- Optimize HTML Code: You have to give a tick at the first box to minify all the HTML code in your website. If you enable this feature, it will extract all of the white spaces in between the HTML codes. So it can ultimately help in reducing the file size of your website.
- Keep HTML Comments: You may enable or disable this option and check if it does affect your website or not. We will recommend keeping it enabled, but if you did not require this, then you should disable it.
- Aggregate JS-files: You may enable this option if you identify render blocking on tools like Gtmetrix or Pingdom Test. You must pick this option to unite the JS files.
- Also aggregate inline JS: This feature can quickly increase Autoptimize’s cache memory. So that we don’t suggest to use this. But you may activate the “aggregate inline JS” option for faster page loading if you can practice clearing your cache regularly.
CSS Options: Try to configure these settings as we described. You may activate all the functions in the CSS Options box aside from the “Inline and Defer CSS” for the complete optimization.
- Optimize CSS Code: You can enable this feature to fix CSS items. You need to tick this option to use the below functions.
- Aggregate CSS-files: We will recommend keeping this option enabled to combine all the linked CSS files.
- Also aggregate inline CSS: You should select this feature.
- Generate data: URIs for images: Also, check this option of this WP plugin.
- Inline and Defer CSS: Leave this option unchecked as already it is.
- Inline all CSS: This feature has a clear advantage of better PageSpeed score. But the disadvantage is your base HTML-page gets significantly bigger by clicking this box. So the Pagespeed Insights will complain of “roundtrip times” when the amount of CSS is significant.
Important Note: In this section of settings, you have two option of choosing from “Inline and Defer CSS” or “Inline all CSS” options. Many developers recognize that the best option is Inline and Defer CSS.
- Exclude CSS from Autoptimize: You may add the CSS files which you want to exclude from optimizing in this row. If some of the elements don’t show up correctly or you encounter any error, then try to exclude the CSS files from minification by including the file name in this blank field. By reducing the file size and minify all of your CSS code, it makes your website a little smoother.
CDN Options: You can put your CDN URL in this “CDN Base URL” box.
This feature is specifically for KeyCDN, StackPath, and other CDNs. But it is not for Cloudflare because Cloudflare does not provide their service to you with a CDN URL. So you need to have any CDN service to use this option.
Misc Options: You should found two different options in this section when you will scroll down.
Now select both the options and finally click on the “Save Changes and Empty Cache” button. Then you should check your website and your website speed.
Step 3. Autoptimize CriticalCSS.com Power-Up settings
This step is not compulsory. So you may configure this setting if you want otherwise, ignore this step. To get more optimized performance, this is one more plugin you can add to your WP site. Some professional developers created this extension, which can automatically generate and handle critical CSS files.
This plugin is available in the WordPress plugin repository, which can integrate and extends with Autoptimize. After installation and activation, this extension works automatically. Also, you can adjust the settings as “Autoptimize” has a Critical CSS tab. Once you activated this optional plugin, then it will appear inside the Autoptimize settings and gives you the following features.
It is a premium service that uses a headless browser to extract the real critical CSS. You may need to pay 2$ per month to use the service. This WP extension fully automates the extraction of high-quality critical CSS as well as the creation of rules for that critical CSS. It can work 100% automated and also allows semi-automated jobs and manual rules.
Step 4. Extra Settings
All of these following settings can increase your website performance even more.
Google Fonts: You can enable this feature if you use “Google Fonts” that slow download times as they are pulled from external resources. We will recommend ticking in the “combine and link in head” option because it improves the load times without visibility seeing fonts load. It usually happens when loading asynchronously.
Also, you may test the last option “combine and load fonts asynchronously with webfont.js” and see which provides the better results in GTmetrix. You can choose both options in the further settings option. In this way, it saves the united files, and the website will be optimized for all the user who login.
Optimize Images: You should keep this feature enabled. By using this option, the URLs on your website will be changed to point to ShortPixel’s CDN. It should not affect how they look as long as it is lossless compression, but they will load faster. You may disable the “ShortPixel Optimize Image” option if you found a massive drop in performance score due to multiple content delivery networks.
Image Optimization Quality: To avoid losing image quality, choose the lossless compression method.
Remove Emojis: Typically, emoji’s are bad for load times. Try to enable this feature to get rid of it.
Remove Query Strings From Static Resources: Usually, query strings are generated by plugins, and you can’t fix it by simply enabling this, but you should try. Also, you may check your website for high CPU plugins and then replace them with lightweight plugins, which can be a better solution.
You have to delete all the unnecessary plugins and clean the database by using a plugin such as WP-Optimize. It will clear all the tables that are left by the uninstalled plugins.
Preconnect To 3rd Party Domains: This option helps the browsers to anticipate requests from the external resources. We are providing below some of the common examples which may appear as “minimize DNS lookups” in the Pingdom report.
Optimize YouTube Videos: If you want to add videos in your site, then you should install the “WP YouTube Lyte” plugin. It lazy loads the videos, so they only load when users scroll down and click the play button. This feature eliminates the initial requests to the YouTube servers. It will save many seconds off load times on the content with videos because they’re one of the heaviest elements on a page.
Now you have done the whole Autoptimize Settings and Configuration.
All of these Autoptimize settings that we described above are so useful for performance improvement as well as better user experience. You may try these settings and check your website to see the output. Thanks for reading our article.