Dark Mode On / Off

How to configure Autoptimize for Better Performance – Beginner’s Guide for 2019

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 1

Speed is a significant ranking factor of a site. Having a fast and responsive website is essential to provide better user-experience to your visitors and boost your ranking on search engines.

If you are not getting traffic on your site or your site experience high Bounce rate, then there must be something wrong that you must be doing on your site.

Pause for a moment and go to the GTmetrix website to analyze your site speed.

GTmetrix will provide some insights into the factors that you can work to optimize your site performance. It will show you your Pagespeed score, Yslow score, Fully Loaded Time, Total Page size, and the number of requests. Under the Waterfall tab, you can check the resources that are taking time to load.

Now that you have analyzed your site and know the factors responsible for slow speed, it’s time to work on its optimization.

Every website owner wants their website to load faster and beat their competitors. Well, there are different ways to improve your site loading speed. In this article, I’ll guide you to configure Autoptimize plugin to speed up a WordPress site.

Autoptimize speeds up your site by minifying and combining all of your JavaScripts and CSS files. Besides, it also optimizes HTML files to improve website performance.

What is Autoptimize?

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 2

Autoptimize is one of the popular WordPress plugin (1+ million active installations) that optimize your site for better performance. It simplifies the process of optimizing a WordPress site.

It aggregates, minifies and cache scripts and style files to reduce the requests and page load size. It injects style files in the header and scripts in the footer. It also minifies HTML files.

In addition to these, it also features to optimize your images and enable lazy loading, remove WordPress core emojis, optimize Google Fonts to load faster, remove query strings from static resources and many more.

Here’s a quick guide to enable lazy load WordPress images and videos.

Benefits of using Autoptimize

Autoptimize is a powerful plugin, and if configured correctly, it will boost your website speed.

Benefits of AutoptimizeHow it happens?
Reduction in web page sizeDue to minification of the codes
Reduction in number of requests to the serverDue to aggregation of files into a lesser number
Reduction in initial page load timeThe processing of JavaScript files are deferred (moved to the footer)
Boost in page load speed and render of webpageDue to lazy load of Images

How to install Autoptimize?

The process of installing Autoptimize is simple. To install the plugin, follow the below steps:

  1. Go to your WP dashboard.
  2. Click on Plugins > Add New > Search for Autoptimize.
  3. Click on Install and then on Activate.

If you are a WordPress beginner, here a step by step guide on how to install WordPress plugins easily.

Configure Autoptimize for Better Performance

Once the plugin is installed and activated, you can access the settings of Autoptimize from your WP dashboard by clicking on Appearance > Autoptimize.

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 3
Autoptimize Dashboard

Before you start on optimizing, click on Show advanced settings located at the top to show additional settings.

Optimizing JavaScript files

In most cases, JavaScript is responsible for slow site loading and send a maximum number of requests. To boost your site speed, optimization of JavaScript files is a must.

To configure it properly, tick “Optimize JavaScript Code” and then choose the additional options as shown in the picture below:

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 4
Configuring JavaScript Options

I have selected the options Aggregate JS-files and Also aggregate inline JS. These options will minify your JS code of all JS files and place them in a single file. Suppose your site makes a request to ten JavaScript files to fully load your website, enabling this option will only make a request to a single JS file. This single file will include all the necessary codes of those ten JS files.

Some elements of your site may need to use some JavaScript files for an initial load like jquery.js. You can include them in Exclude Scripts from Autoptimize section.

I have unchecked Force JavaScripts in <head>? so the files load in the footer to avoids JS render-blocking.

Optimizing CSS files

Compared to the number of JavaScript files, the CSS files are less, but it can have a high impact on site performance. The theme and plugins include style files that need to load, and they send a large number of requests and increase the page size.

The CSS files can also be optimized to reduce the page load speed and number of requests. You can configure the CSS options, as shown in the image below:

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 5
Configuring CSS Options

Like we did with JavaScript files, the options enabled above will minify and aggregate your CSS files. After enabling these options, click on Save Changes and Empty Cache button and visit your site.

Sometimes minification and aggregation of CSS files break the website design preventing them from loading required CSS files. If that is the case, you can add the CSS file in Exclude CSS from Autoptimize to prevent them from applying the settings you have chosen earlier.

If everything loads correctly, you can go proceed to optimize HTML files.

Optimizing HTML files

A website contains a lot of HTML code. You can minify them to remove all the white spaces between the HTML codes. It helps in reducing the file size of your website.

To enable the minification of HTML code, tick the Optimize HTML Code? Option.

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 6
Configuring HTML Options

Now, you leave the default options as it is and click on Save Changes and Empty Cache. When you visit your site, you can see some differences in performance. You can go to GTmetrix and check your site speed once again to witness the difference.

Wait, you’re not done yet. Some more additional settings are still left to configure to boost your site performance further.

Image Optimization

In the Images section, you can use CDN and set a lazy load for images. This reduces server load and improves your website loading speed.

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 7
Configuring Image Optimization options

I have enabled Lazy-load images? option to delay the loading of images below the fold. After enabling this option, your site will only load images when the user scrolls to that particular section.

If you are using Shortpixel’s global CDN option, you can enable Optimize Images option and configure the settings.

Extra Settings

In the Extra tab, you can remove query strings from static resources, emojis and Google Fonts from your site.

How to configure Autoptimize for Better Performance - Beginner's Guide for 2019 8
Configuring Extra Options

Tick the boxes as shown in the above picture and click on Save Changes.

Visit your site and check your site speed once again. You will find a difference between before and after optimization performance.

Final Thoughts

Autoptimize isn’t a caching plugin. When it is combine with caching plugins like WP Super Cache, HyperCache or Comet Cache (anyone), you will witness massive improvement in your site performance.

In short, proper Autoptimize configuration significantly reduces site loading speed and page size.

Please let us know in the comments below, What plugins do you use to improve your site speed and performance?

Leave a Reply

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

Recommended Articles