free tech

Autoptimize settings explained

Autoptimize is a great plugin to improve the performance of your word press website. Autoptimize will optimize HTML, JavaScript and CSS of your website which will help them load faster, here Autoptimize settings explained in detail. In order for your website to rank in google, speed is an important factor. Along with the keywords, speed of the website is given a high priority for ranking websites.

You can check your website performance with many different tools, few of them are Google Page Speed Insights, Pingdom, WebPageTest.org etc..

Why Autoptimize?

There are lot of plugins for caching and optimizing word press sites like W3 Total Cache, WP Super Cache and WP Fastest Cache. These plugins provide more options than Autoptimize, then why do you want to consider Autoptimize?. If you are using a Managed Word Press hosting solution for your website most of the top caching and optimization plugins are blocked.

The reason for this is managed hosting have their own caching and optimization framework layers. These plugins will cause problems with managed wordpress websites, so Autoptimize is here for your rescue.

autoptimize settings

Autoptimize Settings

HTML Options

Optimize HTML Code?: Optimizes and minify your html on the webpage.

Keep HTML Comments: You may want to keep html comments unchanged since affiliate networks like adsense uses them.

JavaScript Options

JavaScript options are interrelated, it is better to have a thorough understanding of how JavaScript works.

Optimize JavaScript Code?: Optimizes and minify JavaScript code on your web page.

Force JavaScript in <head>?: This setting forces JavaScript to load upfront so that the script files are available for any in-line scripts that use them. If you choose this setting it is better not to choose the next setting “Also aggregate inline JS?” because it doesn’t make any difference. This option is render blocking.

Also aggregate inline JS?: This setting aggregates all the in-line scripts and try to push them into a single script file.

Exclude scripts from Autoptimize: For example, i have a responsive website when viewed in a mobile device displays a collapsible menu on above the fold content. One script file collapse-menu.js is utilized for this purpose. If you don’t exclude this file from Autoptimize, the menu may not render properly or may not work at all. If you have any script files that are required upfront during the page load, it is better to exclude such scripts from Autoptimize.

 Add try-catch wrapping?: You may want to choose this, if you don’t like to see script errors in your browser console.

CSS Options

Optimise CSS Code?: Optimizes and minify CSS code and tries to combine CSS files.

Generate data: URIs for images?: This option improves peformance. If you are using an external CDN don’t set this option because all the image data request will go to your origin server which will result in multiple redirects.

Remove Google Fonts?: This option removes any google fonts from your site.

Also aggregate inline CSS?: This option removes in-line CSS and moves them in to a single file. When you do this you might see an unstyled web page for a moment.

Inline and Defer CSS?: Don’t choose this option unless you know what you are doing. This option will in-line the CSS that you enter in the settings text box for above the fold content and loads all the other optimized CSS later.

In-lining above the fold CSS is not an easy thing to achieve on a word press website. You need to have media queries and custom styles for different screen resolutions for the above the fold content. Only when you have such CSS for the above the fold content you can use this option. Otherwise your website looks like a total mess for other screen resolutions.

Inline all CSS?: This is the one option to go for if your traffic is medium to low. This option will render the website perfectly while improving the performance. If you have millions of users visiting your website then this option might slow down your site a bit because of the payload size.

Exclude CSS from Autoptimize: If you want to exclude any CSS files from optimization you can use this option to enter those CSS file names.

CDN Options

If you are using a CDN you can enter the CDN url here, no need to enter any url for CLOUD FLARE the author of the plugin suggests.

Cache Info

Save aggregated script/CSS as static files?: Setting this option converts optimized resources into static files so that they can be cached. If you don’t set this option the optimized file names may change.