The Ideal Autoptimize Settings + Cloudflare/StackPath CDN (2020)

Home » WordPress Speed Tips & Tricks » The Ideal Autoptimize Settings + Cloudflare/StackPath CDN (2020)

Autoptimize is a great plugin, but for caching, WP Rocket is usually #1 in Facebook polls.

So why would you use it?

Because some hosts like GoDaddy and WP Engine blacklist most cache plugins (since they have their own built-in caching system) but they don’t do things like optimize HTML, CSS, JavaScript, Google Fonts, or CDN (content delivery network). So while your host’s caching system might work well for caching, Autoptimize helps do the “rest” of the stuff (fixing items in GTmetrix + Pingdom). Avoid Google PageSpeed Insights as it doesn’t even measure load times.

Even the Autoptimize developer says on his plugin page that it works best when combined with a cache plugin. I recommend Swift if you’re going the free route, and WP Rocket if you can do $49/year as it’s easier to configure (it’s also what I use and I have 100% scores in GTmetrix) since it comes with many features most cache plugins don’t (database cleanup, hosting Google Analyitcs code locally, heartbeat control, and integration with both Cloudflare + other CDNs). I have tutorials for WP Rocket, Swift, WP Fastest Cache, W3TC, and even WP Super Cache.

So let’s configure the Autoptimize settings. I’ll also show you how to add a CDN (ideally both Cloudflare and StackPath) since each one has their own set of data centers, and more data centers = faster content delivery. CDNs are recommended in WordPress’ optimization guide.

autoptimize plugin

 

1. JS, CSS, & HTML

Enable all these to optimize JavaScript, CSS, and HTML files, then see instructions below.

Autoptimize JS CSS HTML Settings

Optimize JavaScript Code

  • Aggregate JS-files: enable, this combines JavaScript files as recommended by GTmetrix. If disabled, individual files will be loaded and they will not combined.
  • Also aggregate inline JS: enable, this combines JavaScript files that are located in HTML files. Autoptimize gives a warning which basically means if it breaks anything on your site, either exclude the JavaScript files or disable this.
  • Force JavaScript in <head>: disable, unless you have JavaScript errors. You’re better off trying to find problematic files and exclude them than select this option since this makes the JavaScript render-blocking (not optimal for speed).
  • Exclude scripts from Autoptimize: if you see errors after enabling certain JavaScript settings, find the problematic JavaScript and exclude files here.
  • Add try-catch wrapping: disable, unless you have JavaScript errors. This is another way to fix JS errors without having to enable force JavaScript in head.

Optimize CSS Code

  • Aggregate CSS-files: enable, same thing as aggregating JS-files only for CSS.
  • Also aggregate inline CSS: enable, same thing as aggregating inline JS-files only for CSS. Enable both to further improve load times + GTmetrix scores.
  • Generate data: URIs for images: disable if using a CDN. MaxCDN (StackPath) warns you that enabling this will forces images to be served from your origin serve instead of your CDN. Enabling this might initially results in fewer HTTP requests, but likely not after you setup a CDN and serve images through that.
  • Inline and Defer CSS: enable, you can only enable this option or “inline all CSS” which Autoptimize does not recommend in their FAQs. They say “although inlining all CSS will make the CSS non-render blocking, it will result in your base HTML-page getting significantly bigger thus requiring more “roundtrips”.
  • Inline all CSS: disable, Autoptimize does not recommend enabling this.
  • Exclude CSS from Autoptimize: if you see errors after enabling certain CSS settings, find the problematic CSS files and exclude them here. Note: the “minify excluded CSS and JS” option in the Misc Options needs to be disabled.

Optimize HTML Code

  • Keep HTML comments: enable, but if you see indent or spacing issues in your comments, leave disabled.

 

2. CDN Options

This is where your CDN URL goes (instructions below). Cloudflare does not provide you with a CDN URL (you will change nameservers instead). The CDN Base URL is specifically for StackPath, KeyCDN, and other CDNs – not Cloudflare. I suggest using both StackPath + Cloudflare as your CDNs will have more data centers, and more data centers = faster website.

Step 1: Sign up for a CDN. I use StackPath who has 45 data centers which are heavily located in the United States and is where most my visitors are. It’s $10/month with a free 30-day trial.

stackpath network

Step 2: In the StackPath dashboard, click the CDN tab, and create a StackPath CDN Site.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

*Copy your server IP address as it is needed in step 5 of this section.

StackPath-CDN-URL-Autoptimize

Step 3: Paste your CDN URL into Autoptimize with http:// or https:// (whichever you use).

Autoptimize CDN URL

Step 4: In StackPath go to CDN → Cache Settings, then click “Purge Everything.”

StackPath-Purge-Cache

Step 5: Whitelist your server IP address in StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Step 6: Run your site in GTmetrix and “content delivery network” should be green in YSlow.

CDN GTmetrix YSlow

 

3. Misc Settings

Here are the Misc settings:

autoptimize misc options

Save aggregated script/css as static files – if enabled, this means the CSS and JS files are saved to the cache and served through your server, so if your hosting doesn’t handle these, enable it.

Minify excluded CSS and JS files – if you’re excluding certain CSS and JavaScript files, it’s because there’s a problem when trying to optimize them, and you don’t want them minified.

Experimental: enable 404 fallbacks – disable, will redirect ‘missing’ files to help prevent or at least reduce site breakage. May require server level configuration (get help from your host if need be).

Also optimize for logged in editors/ administrators – disable, you usually want to disable performance features in the WordPress admin, including Cloudflare performance features.

 

4. Images Settings

Autoptimize can also help make images load faster.

Autoptimize Images Settings

Optimize Images – URLs on your website will be changed to point to ShortPixel’s CDN. This should not effect how they look as long as it’s lossless compression, but they will load faster.

Image Optimization Quality – find your own unique balance between compression and quality (I use Glossy). Here are the differences in each compression level from ShortPixel:

ShortPixel Image Compression Levels

  • Lossy: most compression, most quality loss.
  • Glossy: medium compression, little quality loss.
  • Lossless: low compression, lowest quality loss.

Load WebP in supported browsers – enabled if you use WebP images and lazy load images.

Lazy-load images – I personally do not lazy load my images because constantly loading images as you scroll down the page can be annoying for users. Yes, it results in fewer requests and is recommended by Google for faster load times, but I find it annoying. This is totally up to you.

 

5. Critical CSS

This refers to the Autoptimize criticalcss.com power-up plugin.

It requires a premium paid plan from criticalcss.com ($7/month).

The plugin creates critical CSS rules to make sure pages are rendered before the full CSS is loaded, improving the “start to render time.” All you need to do is install the plugin, sign up for a plan, the enter your Critical CSS API Key into the “Critical CSS” section of Autoptimize, and the plugin will do the rest. Check the plugin’s FAQ page for details on custom configurations.

I personally don’t use it and would rather use the extra $7/month on a more powerful server.

Autoptimize criticalcss com power-up

Autoptimize Critical CSS Settings

 

6. Extra Settings

autoptimize extra settings

Google Fonts – enable if using Google Fonts which slow down load times as they’re pulled from external resources (the Google Font library). I prefer the “combine and link in head” option since this improves load times without visibility seeing fonts load (which is what usually happens when loading asynchronously. Also test the last Google Font option “combine and load fonts asynchronously with webfont.js” and see which yields better results in GTmetrix.

Remove Emojis – enable (emojis are bad for load times).

Remove Query Strings From Static Resources – query strings are usually generated by plugins and cannot be fixed (in GTmetrix/Pingdom) simply be enabling this, but you can try. The better solution is to check your site for high CPU plugins and replace them with lightweight plugins. Most high CPU plugins include social sharing, gallery, page builders, related post, statistic, and live chat plugins. You should also delete all unnecessary plugins and clean the database (using a plugin like WP-Optimize) to clear tables left by uninstalled plugins.

Preconnect To 3rd Party Domains – helps browsers anticipate requests from external resources (Google Fonts, Analytics, Maps, Tag Manager, Amazon store, etc). These will usually appear as “reduce DNS lookups” in your GTmetrix report, but below are common examples.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Preload Specific Requests – you can find more about preload and browser resource hints from WP Rocket, but this basically makes it so certain files are downloaded as a high priority.

Async Javascript-Files – this means something is preventing above-the-fold content from loading fast. This tutorial on render blocking JavaScripts explains it well, but if you see JavaScript errors in GTmetrix and Pingdom, the Async JavaScipt plugin might do the trick.

Optimize YouTube Videos – if your site has videos, WP YouTube Lyte lazy loads them so they only load when users scroll down and click the play button, thus eliminating initial requests to YouTube’s servers. This can shave multiple seconds off loads times on content with videos, as they’re one of the heaviest elements on a page. WP Rocket and Swift Performance have this built-in to their settings, so you don’t need this if you use one of them as your cache plugin.

 

7. Optimize More

If you want to further optimize your site, here are the tools recommend:

WP Rocket – rated the #1 cache plugin in multiple Facebook polls and has many options not included with Autoptimize (database cleanup, heartbeat control, hosting Google Analytics locally, replacing YouTube iframe with a preview image, adding Browser Cache to Facebook Pixel, etc). WP Rocket also handles nearly everything Autoptimize does, so you only need 1 plugin for all those speed optimizations. That’s why it’s so great. You can also get 10% off here.

ShortPixel – popular image optimization plugin and the one I use.

StackPath – CDN with 45 data centers. Very easy to setup; just sign up for a plan ($10/month) then copy/paste your CDN URL into the Autoptimize CDN URL option.

SiteGround – usually rated the #1 host in Facebook polls and also used by Yoast.

Yoast-on-Twitter-We-just-switched-to-Siteground

2019 Hosting Poll

2017-WordPress-Hosting-FB-Poll

Elementor Hosting Recommendations

July 2019 Hosting Recommendation

WordPress-Host-Poll-Aug-2018

Shared-Hosting-Poll-2017

2019-Hosting-Poll

Go-To-Hosting-Company

WordPress-Hosting-Poll-2017

Managed-Hosting-Poll

WooCommerce-Hosting-FB-Poll

2016-Web-Hosting-Poll

Best-WordPress-Hosting-Provider-Poll

Best-Web-Hosting-2019-Poll

WP Friendly Hosting Poll

2016-WordPress-Hosting-FB-Poll

Favorite Hosting For Elementor

2018 Hosting Recommendations

WordPress Hosting Poll Sept 2018.png

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-June-1

SiteGround-Recommendation

2014-Managed-WordPress-Hosting-FB-Poll

Best-Web-Hosting-Provider-Poll

Hosting-Poll-Feb-2019

Hosting-Recommendations-Poll

Bluehost vs SiteGround

WordPress Web Host Poll

People usually migrate because their speed technology is much faster than EIG or GoDaddy:

Switching To SiteGround

SiteGround Load Time Migration

Bluehost to SiteGround GTmetrix

HostGator To SiteGround

SiteGround Google PageSpeed Insights

100 Perfect Score On SiteGround

SiteGround Genesis

Speed Delivered By SiteGround

Reduced Load Times With SiteGround

New SiteGround Response Times

HostGator To SiteGround Migration

SiteGround Response Times On Joomla

Switched To SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed Insights

SiteGround On Joomla

SiteGround Reduced Load Times

SiteGround Speedy Hosting

New SiteGround Response Time

SiteGround Response Time Improvement

SiteGround also does free migrations with GrowBig+.

Cloudways – faster than SiteGround (it’s cloud hosting, not shared) and was also rated highly in Facebook polls. Starts at $10/month with their DigitalOcean plan. They offer 1 free migration (which I took them up on) and here’s what happened to my server response time:

SiteGround-vs-Cloudways-Cloud-Hosting

Hosting Recommendations Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

WordPress Hosting Suggestions

Cloudways Response Times

WP Engine To Cloudways

Untitled

Cloudways Pingdom Load Times

Cloudways-Facebook-Review

You can get 25% off your first 2 months of Cloudways with promo code OMM25.

Kinsta – $30/month premium hosting and while I haven’t tried them, I have heard nothing but great things about Kinsta’s speed, support, uptimes, and nearly everything about their hosting.

Perfmatters – plugin by Kinsta which takes care of what I like to call “miscellaneous optimizations” like selectively disabling plugins, limiting post revisions, disabling autosaves, hosting Google Analytics locally, and much more. It takes care of the final 10% of speed.

Some of these are recommended by Autoptimize, others are not:

Autoptimize Add Ons

 

8. Cloudflare

Autoptimize does not have settings to add Cloudflare’ CDN, but this is easy to setup. And you definitely should because this adds 200 more centers to your content delivery network (CDN).

cloudflare network

Step 1. Sign up for Cloudflare and you will be prompted to add your site and begin a scan.

cloudflare-begin-scan

Step 2. Once the scan is done, select the free plan, then Cloudflare will take you through a set of pages. You will eventually be taken to a page where Cloudflare assign you 2 nameservers.

Cloudflare-Name-Servers-Dashboard

Step 3. Login to your domain registrar (eg. Namecheap) and do a Google search for “how to change nameservers on Namecheap” (only search for your domain registar), then follow their instructions. You will be copying the 2 nameservers provided by Cloudflare and pasting them into a custom nameservers option in your domain registrar. Allow 72 hours for propagation.

Godaddy Cloudflare nameservers

That’s it!

 

What’s Next?

Watch My Video – it’s a 42 minute video, but I cover pretty much everything (timestamps in video description) and you should learn a ton of great information on WordPress site speed:

Want To Know How I Got 100% Scores In GTmetrix?
See my full WordPress speed optimization guide which has over 38 tips in fixing GTmetrix/Pingdom items including upgrading to PHP 7, serve scaled images, specifying image dimensions, database cleanup, hosting Google Analytics locally, WP Disable, and others.

 

Frequently Asked Questions

🚀 Do I need other speed plugins besides Autoptimize?

Yes, you usually want to also use a plugin for caching, image optimization, database cleanup, heartbeat control, and selectively disabling plugins. I recommend WP Rocket, ShortPixel, and Perfmatters for those.

🚀 How do you setup a CDN with Autoptimize?

Choose your CDN (I use StackPath), copy your CDN URL, and paste it into Autoptimize's CDN UR field.

🚀 How do you optimize Google Fonts with Autoptimize?

I recommend using the Combine And Link In Head option, and to preconnect your fonts using Autoptimize.

🚀 Does Autoptimize take care of caching?

No, you will need to use a separate plugin for caching. I recommend WP Rocket or SG Optimizer if using SiteGround.

🚀 How do you configure the Autoptimize settings?

Everything is listed in this tutorial - just keep an eye on your GTmetrix report and which specific items need to be fixed. If configuring the settings in Autoptimize doesn't fix it, consider using another plugin to fix items.

Questions? Drop me a line!
Tom

Subscribe
Notify of
guest
13 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments