Table of Contents
If you test your website with Google Pagespeed Insights, you’ll notice a warning to minify JS and CSS files. That means you need to reduce JS and CSS calls to reduce server hitting and minify file sizes. By reducing them, you’ll observe site load times in a faster way. This will also help you to save bandwidth usage.
There are a number of ways to minify. You can do it manually or by using a WordPress plugin like Autoptimize and Breeze.
How to Use Autoptimize & Breeze for Your WordPress Site
Optimizing WordPress performance is not difficult. You only need the right tools. This combination can make your website work ultimately fast. Breeze works with Autoptimize and it is fully compatible. A common misconception is that the two plugins perform the same functions. The primary job of Breeze is the page caching where as Autoptimize minifies the static content and what we believe is, caching the minified content would be an ideal solution, However the Minification and Advanced options from Breeze should not be used if using Breeze with Autoptimize as these options serve the same purpose as that of Autoptimize. .
Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.
First, you want to install, activate the Autoptimize plugin from your WordPress admin panel.
When we talk about WordPress optimization, we are talking about a few things that are tied together to make the website run better. Autoptimize provide most of the features in order to improve the website performance
Script, collection type, shrink, buffer CDN Options
Minimize HTML
Optimize images
Minify JSS and CSS
Optimize Google Fonts
Autoptimize provide us plenty of options to complete your WordPress website optimization with just a few clicks
1. JS, CSS, & HTML
Aggregate CSS & 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 CSS & 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.
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.
Keep HTML comments: enable, but if you see indent or spacing issues in your comments, leave disabled.
CDN Options:
The CDN option helps you to enter the original CDN URL to enable CDN file automation. If you choose to do this, go ahead and enter that URL.
The last two option areas for this specific tab include buffer information and the Misc option. Enable or disable what you want.
2. Images
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.
3. 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.”
4. Extra Settings
These options provide different options to ensure a better user experience.
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.
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”
Preload Specific Requests – 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.
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.
6. Optimize more!
If you are interested, the extra optimization tab will display add-ons and then select other add-ons that will make Autoptimize stronger when integrated.
That’s it! We hope this article was helpful. If you need any help, then feel free to search your query on Cloudways Support Center or contact us via chat (Need a Hand > Send us a Message). Alternatively, you can also create a support ticket.