So why would you use it?
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.
How to set up the Autoptimize settings
1. JS, CSS, & HTML
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 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 http:// or https:// (whichever you use).
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.
3. Misc Settings
Here are the Misc settings:
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.
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.
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:
- 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.
6. 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.
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:
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:
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.
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!