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

Autoptimize is a great plugin.

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.



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.




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


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

Autoptimize cdn url

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


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


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 power-up plugin.

It requires a premium paid plan from ($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.


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.

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:


Cloudways promo code omm25
25% off 2 months of Cloudways with code OMM25 (or use their coupons page for 30% off 3 months)

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.


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.


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 44 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!

About Tom Dupuis

Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

13 thoughts on “The Ideal Autoptimize Settings + Cloudflare/StackPath CDN (2021)

  1. Hai tom, glad to see new theme of your website. but it’s hard to read the writing you made. I hope you consider checking it out

    1. Hey Van,

      We’re working on optimizing some things with the fonts, speed, and mobile menu. I know the link text is gray and will be fixed very soon. Thanks for pointing that out.

  2. Hi Tom, thanks for putting this detailed post together. I use KeyCDN (on my site lapassionvoutee) would unsure where to get the “CDN Base URL.” Would you please tell me where to get that info as I’d hate to change CDN providers. Thanks.

  3. Hey bro! Thanks for this its pretty useful!

    I have a doubt. I’m using Siteground “GrowBig” plan and already using SG Optimizer and Cloudflare…

    Do I need Autoptimize plugin to increase speed?

    Right now in my Gtmetrix Yslow Score I’m getting 77%, to be more specific I’m getting errors with “Make Fewer HTTP requests”, “Add Expires Headers” and “Use cookie-free-domains”…

    Do you know how to fix those?

    Thank you for your guides and tutorials!

    1. Hey Charles,

      You shouldn’t need Autoptimize – SG Optimizer should take care of everything Autooptimize does except for a “CDN URL” field, in which case you can use the CDN Enabler plugin. But, ideally you should look into a full cache plugin like Swift, WP Rocket, or even WP Fastest Cache or W3 Total Cache. As I stated in my SG Optimizer review, I use SG Optimizer strictly for caching, with all other options turned off, then use my cache plugin (I use WP Rocket) for everything else. Autooptimize or SG Optimizer still lack many features that come with “full” cache plugins like Swift, WP Rocket, etc.

  4. Hello, pls for GOD’s sake i need immediate reply. I don’t have money for the stack cdn….Can i use the trial and forget abt paying when they request me to pay?

Leave a Reply

Your email address will not be published.