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