Autoptimize Settings For Speed up Your WordPress Sites in Under 1s

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?

This WP tool boosts up your website speed by aggregating all the CSS and JavaScript files into one file. It is well-known as the all in one optimization plugin because it can minify and combine your CSS and JavaScript files. This WP plugin loads the necessary CSS file above the fold that is necessary to load the page by using the critical path method.

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?

Some of the popular hosting service providers like Godaddy and WP Engine don’t support most of the cache plugins because they have their special built-in caching systems. But they don’t do the same things to a few features like optimizing HTML, CSS, JavaScript, Google Fonts, or CDN. So you should use this plugin when your host’s caching system might work well with it.

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-

  1. Reduce the number of requests made to the server.
  2. It decreases the website initial load time.
  3. 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.

Autoptimize install processThe 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.

Autoptimize install processNow, 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

Autoptimize main settingsHTML Options: Set the HTML options like below.HTML Options

  1. 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.
  2. 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.

JavaScript Options: Use these settings that we are suggesting.

JavaScript Options

  1.  Optimize JavaScript Code: Most of the errors might occur because of the JavaScript files. That’s why it’s a crucial part of this plugin. You must give a tick on this option to configure it properly and then test your site. After enabling this feature, you will get more setting options here.
  2. 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.
  3. 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.
  4. Force Javascript in <head>: This option can lead to a slower loading page because it is going to add javascript file in the head, which directs to rendering blocking. So it is not beneficial, and you don’t have to select this.
  5. Exclude scripts from Autoptimize: Few elements in your site might break if you use sliders or any aspects that have any effects just like flasy or transition. In this case, you have to find the JS file which is causing it and then include it in the “Exclude Scripts from Autoptimize” field. You need to exclude the file which is getting broken after minifying JavaScript to fix the issues normally.
  6. Add try-catch wrapping: This function completely depends on your need, which is basically used for troubleshooting. You may try to activate this option if one of the javascript files aren’t working properly. It will fix the javascript problem of your website.

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.CSS Options

  1. Optimize CSS Code: You can enable this feature to fix CSS items. You need to tick this option to use the below functions.
  2. Aggregate CSS-files: We will recommend keeping this option enabled to combine all the linked CSS files.
  3. Also aggregate inline CSS: You should select this feature.
  4. Generate data: URIs for images: Also, check this option of this WP plugin.
  5. Inline and Defer CSS: Leave this option unchecked as already it is.
  6. 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.

  1. 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.

CDN OptionsThis 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.

Misc OptionsNow 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.

Autoptimize CriticalCSS.com Power-Up settingsIt 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.

Extra SettingsGoogle 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.

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

Async Javascript-Files: You need to use the “Async JavaScript Plugin” to activate this feature. This additional plugin might do the trick when you see JavaScript errors in GTmetrix and Pingdom. It will prevent above-the-fold content from loading fast.

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.

Final Words

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.

Resources:

Leave a Comment

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

Scroll to Top