How to Properly Setup Autoptimize in WordPress Site?

Autoptimize is one of the popular plugins to speed up your WordPress site. There are more than 1 million active installation of this plugins with an average rating of 4.7 from 1K+ users. It can’t be false that so many people install and use this plugin to optimize their site. However, you need to ensure the correct setup to get the plugin work for you.

Related: Top 8 caching plugins for WordPress.

What Autoptimize Does?

First, you need to understand that Autoptimize is not a caching plugin like WP Rocket or W3 Total Cache. It is an optimization plugin that helps to do the following things:

  • Combine all CSS and JavaScript files
  • Minify the compressed files and cache them, also minify the HTML by removing comments and spaces
  • Add expiry header to the files to serve the cached version
  • Move CSS to header and scripts to footer

Later on, the developer also included the image optimization for lazy loading and serving WebP images to speed up media files. As mentioned in the plugin page on WordPress.org, HTTP/2 servers can automatically do many of the things what this plugin does. Therefore, you should test with trials to ensure the plugin actually adds any value for your installation.

How to Properly Setup Autoptimize in WordPress?

Autoptimize is one of the simplest plugins to setup. After installing and activating the plugin, go to “Settings > Autoptimize” menu. It has the options to optimize JS, CSS, HTML and images on your site.

Autoptimize Settings
Autoptimize Settings

JS, CSS and HTML Settings

This tab has multiple options to segregate and optimize the files on your site. Autoptimize will aggregate and minify scripts, CSS and HTML from your theme and plugins. Therefore, choosing some of the options may break your site especially you use jQuery based theme.

JavaScript Options

  • Optimize JavaScript Code – Enable this option to minify the JavaScript files. This will compress and reduce the size of the script files on your site.
  • Aggregate JS-files? – enable this option to combine all JavaScript files and server asynchronously when loading pages on your site. This will help you to remove render blocking script problem in Google PageSpeed Insights tool. However, in most cases it will break your site. The best option is to enable this and provide the exceptions so that the page can load without breaking. But, it will lead to render blocking issue in PageSpeed Insights. You can disable this option and enable only “Optimize JavaScript Code” to only minify the files.
  • Also aggregate inline JS? – we recommend you to disable this option when your theme or plugin inject lots of scripts dynamically. Enabling this may lead the cache size to grow faster and bigger thus affecting the performance instead of improving.  
JavaScript Options
JavaScript Options
  • Force JavaScript in <head>? – the best practice is to load JavaScript files in footer so that they load at the end of page loading. This will effectively remove the render blocking and script related problems shown in the speed measuring tools. However, if you see the previous options break your site then enable this to load scripts in header to test whether it helps. Again, loading scripts in header will show render blocking warning in PageSpeed Insights tool.
  • Exclude script from Autoptimize – the plugin by default fill this box with jquery.js and other important files on your site. If you notice any specific theme or plugin files is breaking your site, you can include the file here. Remember to fill the relative path of the file by ignoring the domain name. also, as mentioned in the description, the plugin will still minify the excluded files unless you exclude them in the “Misc” section. After testing with different themes, we recommend you to exclude jquery.js in order to avoid any layout breaking problems on your site. Sometimes, you may not notice the problem on the site, however you can see the console error in Google Chrome developer tools. The error will show something like “$ or jQuery is not defined” or “unknown function”.
  • Add try-catch wrapping? – enable this option when you find the plugin breaks your site. We recommend you to disable this option and exclude the file that breaks in the exception.

CSS Options

CSS options are almost similar to JavaScript options.

  • Optimize CSS Code? – enable this option to compress and minify CSS files on your site.
CSS Options
CSS Options
  • Aggregate CSS-files? – enable this option to combine all CSS files on your site and serve as a single compressed and minified CSS file.
  • Also aggregate inline CSS – enable this to include inline CSS for aggregation. If your theme or plugin inject lots of inline CSS then this option will increase the size of the cache.
  • Generate data: URIs for images? – enable this option so that Autoptimize can inline the small images downloaded by your theme and plugins.
  • Inline and defer CSS – in order to enable this option, you should first know the critical CSS for your site. Unfortunately, it is not easy to get critical CSS as each template on your site needs separate critical CSS. For example, when you have WooCommerce on your site then you can’t use the post or page critical CSS for WooCommerce product pages. In our opinion, you should disable this option in Autoptimize. Otherwise, you can get the premium API from criticalcss.com and integrate with Autoptimize under “Critical CSS” tab.
  • Inline all CSS – enable this to inline all CSS instead of linking as a file. After enabling this option, you can view the source code of your site to see the huge amount of CSS. Inlining CSS can will drastically improve the speed, however it may adversely affect if you have huge CSS file.
  • Exclude CSS from Autoptimize – if you find the site is breaking, you can exclude the specific CSS files in this text box. Similar to JavaScript files, you need to provide the relative path by ignoring the domain name. Autoptimize will also exclude the cache, icons and other CSS by default. You can also provide the relative folders like “wp-content/uploads/” to exclude all CSS files in that folder.      

Learn WordPress: Check out 300+ free WordPress tutorials.

HTML Options

Similar to JS and CSS, enable the “Optimize HTML Code” option to compress and minify the HTML content on your site. You can also enable or remove the comments by using “Keep HTML comments?” option. We recommend to enable both these options.  

HTML Options
HTML Options

CDN Options

If you are using CDN that create zone URL, then you should enter the root URL here in the “CDN Base URL” text box. However, you can ignore this if you are not using CDN or using Cloudflare or any other CDNs that use DNS nameservers.

CDN Options
CDN Options

Cache Info

Under “Cache Info” section you can find the status of the Autoptimize caching. It will show you the path, size and number of cached files.

Cache Info
Cache Info

Misc Options

  • Save aggregated scripts/CSS as static files? – this should be enabled by default as the compressed files need to be served as a static resource to improve the speed. As mentioned in the description, if there is a display problem then disable this option and try that helps.
Misc Options
Misc Options
  • Minify excluded CSS and JS files? – the plugin automatically minify all CSS and JS files though you have excluded specific files in CSS or JS settings. Disable this checkbox, if you want to disable the minification of the excluded CSS and JS files.
  • Also optimize for logged in editors / administrators? – we recommend to disable this option so that you can view the actual site without Autoptimize when logged in as an administrator or editor. Otherwise, you may notice problems working with page builder plugins.

Save all your changes for the plugin to start working on your site.    

Images

The “Images” tab offers options for optimizing images.

  • Optimize Images – this option helps you to use Shortpixel global CDN to optimize and serve your images on the go. Shortpixel is a premium image compression solution that allows you to optimize 150 images per month. You can view the current status and quota usage in this section.
Image Optimization
Image Optimization
  • Image optimization quality – you can choose one of the glossy, lossy or lossless options. You can check the differences between these options and test your images on the Shortpixel page. This will help you to select the best option for your need.  
  • Load WebP in supported browsers? – choose this option to serve WebP images for Chrome and other supported browsers.
  • Lazy-load images?lazy load will defer the off screen images and load only when the user reaches the image position on the browser. Enable this option to improve the loading speed and improve the score on Google PageSpeed Insights tool.
  • Lazy-load exclusions – here you can enter the image types or file names to exclude them from lazy loading.

Note that most of the plugins and themes come with lazy loading as an in-built option. For example, Newspaper theme, Jetpack plugin, WP Smush plugin and SG Optimizer plugin for SiteGround users all have the lazy loading option. We recommend you to use lazy loading only when you don’t use similar options on other plugins or theme on your site. Similarly, enable Shortpixel only when you don’t have external CDN for image caching. Also, use this with caution as this has restriction on usage.

Extra

Using third-party resources on the site will impact the page loading speed. The “Extra” tab offers additional options for optimizing some standard third-party content on your site.

  • Google Fonts – if you are using Google Fonts on your site then you have options to disable or combine.
  • Remove emojis – WordPress by default use Unicode emoji script to add emoji symbols on your site. If you are not using emojis then we recommend you to enable this option to disable emojis.
  • Remove query strings from static resources – CSS and JS files use version control and add a parameter in the URL using “ver”. If you have a static website (this is the case for most WordPress sites except forums and custom sites), there is no need to use versioning as the files are also static in nature. When you aggregate all CSS and JS files, automatically the plugin will serve the cached file as a static resource. However, if you have excluded some files or not aggregating CSS or JS then enable this option to remove the versions from the URL.  
Extra Options
Extra Options
  • Preconnect to 3rd party domains – preconnect allows to connect with the third-party server before actually sending the HTTP browser request. you can add the domains you want to preconnect in this text box.
  • Preload specific requestspreload helps to load the linked URLs, beforehand thus increasing the page loading speed. Enter any third-party domains like fonts.google.com to preload.
  • Async JavaScript files – enter third-party JS files that you want to load asynchronously using “async” property.
  • Optimize YouTube videos – this option needs an additional plugin to lazy load YouTube videos.

Frequently Facing Issues with Autoptimize

When optimized properly, the Autoptimize plugin can improve your site speed and score in Google PageSpeed Insights tool. However, it has few problems when using it as a solution for speed optimization.

1. Using with Other Plugins

The problem with Autoptimize is that this is not a caching but includes half of the optimization options offered by a full-fledged caching plugin. You have to choose plugins like WP Super Cache to work with Autoptimize to avoid redundant options. Otherwise, you don’t need to use Autoptimize when you have plugins like W3 Total Cache or WP Rocket.

2. Upselling Integrations

With the few options available, you can see the plugin upsells the integration with Shortpixel, WP YouTube Lyte and criticalcss.com. each integration needs additional plugin or account which is not necessary when you choose one premium caching plugin like WP Rocket with a good CDN. In addition, there is a separate “Optimize More!” tab for selling the partner products.

3. Critical CSS

Critical CSS is the CSS required to load above the fold content on a page. The problem is that each page layout like post, page, product, portfolio, etc. needs separate critical CSS to load the above the fold properly. This is a complicated task to generate critical CSS using another “Autoptimize criticalcss.com power-up” plugin and premium API key from crticialcss.com.

4. Breaking Site’s Layout    

In most cases the plugin will break your site’s layout. You need to manually check and analyze to find the script or option that breaks your site and exclude them from Autoptimize plugin.

5. Growing Cache Size   

The inlining of CSS and JS will make the cache size to grow drastically. We have tested with the popular Newspaper theme to find the cache size hits 100% in a single day. The problem is that the plugin provide these options without automatic cache purging. That means you need to manually login to the dashboard and delete the cache every time the size grow.

Autoptimize Cache Full
Autoptimize Cache Full

Conclusion

In our opinion, this plugin works well when you have simple theme and using simple caching plugins like WP Super Cache. However, most of the users will use the standard plugins like Jetpack or W3 Total Cache on their site. In this case, Autoptimize will be a redundant option that either you don’t the complete plugin or disable certain options.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment