If you are a theme developer, there may be a base theme you are probably…
What’s it Do?
Autoptimize takes all of the CSS and JS files that are loaded in from themes and plugins and combines them into a single stylesheet and script file, compresses them to their very smallest, and then loads them in properly to optimize for performance. You can really boost your site’s speed just by combining all of your files into a single request, but Autoptimize takes this even a step further and really makes sure that everything loads quickly. There’s also a couple of handy features meant for developers looking for a bit more customization.
How’s it Work?
After you install and activate the plugin, you simply have to switch it on. Head over to Settings -> Autoptimize to get started. You’ll see a few basic options.
The first is a checkbox to “Optimize HTML Code?”. This will minify the actual HTML of each one of your pages, which can lighten the page weight of your site. In truth, browsers tend to handle this pretty well already, but there’s really no harm in checking the option. If you find that parts of your site are rendering improperly, feel free to uncheck this. Below this, you can also choose to keep HTML comments. Only check this if you are actively using them.
Next up is “Optimize CSS Code?”, which will take all CSS files loaded with a theme and plugins, and combine them into one file, then compress that file down. Checking this will go a long way towards speeding up your site. You can also check the “Generate data: URIs for images?” if you are only using a few background images in your CSS, which may speed things up a bit. But in general, this is a micro-optimization that is not entirely necessary. The last option is a text field where you can enter the URL of your CDN (like Amazon AWS or MaxCDN). If you’re not using one, just ignore this.
Just checking these three boxes will speed up your page quite a bit. You can go ahead and visit your site to see it in action and make sure you are not running into problems.
The CSS section has similar options, allowing you to specify where to look for CSS files and add to a list of files to ignore. It also has two options to inline your CSS. This is for advanced front-end developers that want to inline critical CSS and move the rest to the footer of the page so that the CSS is not “render-blocking”. If you have a chunk of this CSS you can click the “Inline and Defer CSS” checkbox, and then copy and paste it in the provided text area. Or you can “Inline all CSS” which will take your entire stylesheet and inline it in the header section of your site. This is really not recommended.
At the bottom, you’ll also see some info about your cache, and how it is set up. By default, the plugin will cache your CSS and JS file so that it can serve them quicker, but you can disable this behavior if it is not working for you. It’s worth noting that Autoptimize should work with most caching plugins out there. Some plugins, like W3 Total Cache, already offer the functionality that you would find in this plugin, so you may run into a problem there. Just make sure to flush your cache after you’ve set up the plugin, and check your site’s front-end for any inconsistencies.
Costs, Caveats, Etc.
Autoptimize is a complex plugin, but it can do a lot to speed up your site without too much work. If you run into a problem, you should visit the support forums to get help from the developer. You can also try browsing through blog posts by the developer for some additional setup information. All in all, it is a well documented and well-maintained plugin.