How to Set Up the Autoptimize Plugin For WordPress

The Autoptimize plugin for WordPress is a page speed tool. It combines code minification and aggregation with caching, CDN, and other optimization features. With a WordPress site, as with any dynamic site, optimizing performance involves a lot of moving parts. For those who are not comfortable tweaking settings at the server level, this plugin can provide some instant speed gains by reducing HTTP requests.

What does that mean? The process of loading a website from a server and into your browser is called “rendering”. To render a website often requires multiple “HTTP requests”. Requests are made for the written content of the site, the CSS stylesheet(s), JavaScript files, images, and much more. Each of these requests will require some time to load. By limiting requests, you can speed up your site significantly.

• How can I optimize my site without coding?
• How do I install Autoptimize?
• What are the best optimization settings?
  • JavaScript Options
  • CSS Options
  • HTML Options
• How do I measure site speed after optimization?

In this article, we will simply install the Autoptimize plugin and use some default settings for CSS and JavaScript optimization. For many basic WordPress sites, this can provide an instant boost in speed.

Optimize Your Site Without Coding Knowledge (How Autoptimize Works)

One of the best ways to speed up your site is to limit HTTP requests wherever possible. For example, having multiple CSS and JavaScript files is common in WordPress themes, but this can increase load on the site, because each of these files must be loaded and rendered.

To speed up the site, you would want to consolidate, or “aggregate”, these separate files into as few files as possible, and then load them at the most strategic time in the page rendering process. This requires extensive knowledge of the code of your theme.

But, using the Autoptimize plugin does this for you.

Install The Autoptimize Plugin

You can install the Autoptimize plugin in the same way you would install any other WordPress plugin: through the admin dashboard, or by downloading the plugin itself from the WordPress repository. Once you have installed the plugin, go ahead and activate it.

Optimize CSS and JavaScript Files

The recommended default settings for Autoptimize will aggregate, minify, and cache CSS and JavaScript files. For example, this means if you have multiple stylesheets or scripts, they will be combined into one file.

To enable these settings, you must log into your WordPress dashboard.

Once there, click Autoptimize under Settings.

JavaScript Options

For JavaScript, enable these settings:

Optimize JavaScript Code	Yes
Do not aggregarate but defer?	Yes
Also defer inline JS?	Yes

CSS Options

For CSS, enable the following settings:

Optimize CSS Code?	Yes
Aggregate CSS-files?	Yes
Also aggregate inline CSS?	Yes
Generate data: URIs for images?	Yes

HTML Options

You can also optimize the HTML code of your site with these options enabled:

Optimize HTML Code?	Yes
Also minify inline JS/ CSS?	Yes
Keep HTML comments?	Yes

Watch Your Site Speed Up?

After you have enabled these settings, be sure to click Save Changes at the bottom of the settings page. This will effectively reduce HTTP requests made to your website, speeding up page load.

You should notice visible speed improvements on the site. To test your results, I’d recommend using a tool like GTMetrix.

Well done! You now know how to optimize your site with the Autoptimize plugin for WordPress. If you have any questions about this article be sure to leave them below.