How to configure the plugin Autoptimize?

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:

WPAntwoord 1

And after:

WPAntwoord 2

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!

Bewaren

Bewaren

Bewaren

Bewaren

Ronald Heijnes

Since 2008 I keep myself busy with the functionality, management, maintenance and performance of self hosted WordPress. I like to share this knowledge. All in my spare time!

16
Leave a Reply

avatar
8 Comment threads
8 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
RakeshTreyJeremyAMAN KUMAR SINGHPagula Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Abdur Rahman

very informative article. i think Autoptimize wordpress plugin best for page speed.
Thanks for sharing 🙂

Daryl

Be careful. Optimizing HTML will push hyperlinks as secure (https://..). If the site to which you are linking has not upgraded to SSL, the link will not work. But, yeah, the plugin does what it says it will do. Nice!

Mohammed
Mohammed

but you know what, the plugin break down my CSS

Mark

You said “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.” But I can’t see this in the image. The main issue I always get and I just wish there was more info is regarding Sliders such as Rev which most people use. Every time I activate defer JS it effects the slider. and I can never work out which JS I need to excluded and where to put it to keep… Read more »

Pagula
Pagula

I was testing my subdomain website, and created a sub.subdomain.domain.com as my CDN. But when putting //sub.subdomain.domain.com/ in the CDN section, my website breaks. What wrong am I doing?

AMAN KUMAR SINGH

I use Auto Minify in Cloudflare. What are then the settings in Autoptimize?

Jeremy
Jeremy

Hello I am currently using the autoptimize plugin to optimize my website. However, when I check the css options, it messes up my homepage design. Do you have any idea on what specific css files I should exclude to solve such an issue. Your response will be highly appreciated.

Trey

Hello, could you elaborate a little on what google fonts are? I just removed them with autoptimize, and I noticed in certain areas my text looks less bold. Not necessarily in a bad way though. Will this help speed?

Thanks for a great article!

Rakesh

I Set’s all the settings properly but where i can found my CDN url

Close Menu