How to configure the plugin Autoptimize?

How can you speed up your WordPress website? There are different methods. I have written about optimizing CSS and Javascript with Autoptimize before. This plugin quickly gives very good results!

The primary goal of Autoptimize is to combine and optimize (compress) the CSS and Javascript files your website uses. Also the HTML can be optimized for even better performance.

In this article you can learn how to get the most out of Autoptimize.

Options of Autoptimize

Autoptimize has two general settings: basic and advanced. You open the advanced settings by clicking on that option.

By selecting the desired options, the plugin will immediately start optimizing your website. In most cases, this will work out of the box. You will have to check the design and functionality and make sure everything works and looks like before. If so, basically you’re done!

It is possible your website doesn’t work and look like before activating the plugin anymore. Or it does, but you still want to go all the way. Then you can use the advanced settings. They appear after selecting the option. You can see the basic options you had before now have some additional options. Only when you checked the basic options, you can also use the advanced options.

HTML options

As you may have noticed, there are no advanced options for optimizing HTML. Nothing to be done here. I left the option “Keep HTML comments” checked. By unchecking this, all comments will be removed from the HTML. The difference will be marginal.

Javascript options

The “JavaScript options” require a little more explanation. Javascript is being used for many sorts of functionality. If you can open images in Lightbox, Javascript is being used. Do you have a “Return to top” button with smooth scroll? That also is done by Javascript. There are many more examples.

Most of the themes and plugins use their own specific Javascript. To make your website function as you want it, all these Javascript files will have to be loaded to the browser. Just take a look in the source code of your homepage and search for the ?????.js files. How many did you find?

Autoptimize will put all these Javascript files into one file, if possible. This way all the needed functionality will be supported by much less Javascript files! Even inline Javascript will be optimized. Because of the limited number of Javascript files to be loaded, your website will load much faster!

Not all scripts will still function well when combined into one single file. The only way to figure out which Javascript doesn’t like to be combined, you will have to test every single file. In the image above you can see that I excluded a few files from being combined. After some tests I figured out that these were the files that should be loaded separately to function.

The combined Javascript file will be loaded in the footer. This way it doesn’t block the content loading process. Your website will load much faster!

The option “Force JavaScript in?” is best to leave unchecked. You want the Javascript to be loaded in the footer. That way it won’t block the loading of the content. Some Javascript doesn’t like to be loaded in the footer. You have to test for those scripts. After you figured out which scripts have to be loaded in the header, you can use the option “Exclude scripts from Autoptimize:” to exclude them from being optimized.

CSS options

Optimization of CSS works just like the optimization of Javascript. All CSS will be combined into one CSS file, if possible.

WordPress itself, the theme and plugins all use their own stylesheets. Putting them all in one stylesheet may cause some design to break. You will have to exclude that particular CSS file to be combined with the option “Exclude CSS from Autoptimize:”.

Do you want to use Google fonts? If not, but your theme loads them anyway, you can check the option “Remove Google Fonts?” That saves another HTTP-request!

Attention: Autoptimize only optimizes CSS and Javascript that is loaded from your own domain. Third party scripts, like Google Fonts, Facebook, Twitter will not be optimized and will be loading separately. Try to limit the use of these external sources as much as possible. Your theme and plugins can use those external resources without you knowing…

It can make a difference to check the option “Save aggregated script/css as static files?”. This way the stylesheets and Javascript won’t have te be combined time after time. Keep in mind that when you make changes to the design or the functionality, you will have to empty the cache.

CDN Options

You can have your optimized files served from a CDN. Just fill in the base URL of your CDN!

Extra

On the Extra tab you can find Extra auto-optimization options. You can use these to your likings, but always test the results!

The difference

In the pictures below you can see the difference when you have configured Autoptimize in the best way possible. Note the decrease the number of HTTP-requests!

Before:

And after:

Conclusion

By using this plugin the right way, you can make your website a lot better and faster. Your visitors will notice also!

Tip: Take a look at the style sheets and scripts that load before you activated Autoptimize. And compare it with the style sheets and scripts after you activated and configured it.

Tip: for support by the plugin developer, please visit the support section of the plugin on WordPress.org.

Tip: Need a pro to set up Autoptimize? You can get it here!

Do you have any questions? Or would you like to tell how you made your website faster? Please use the comment form below!