How to Set Up Autoptimize perfect for WordPress Site
In this post, we’ll share the best Autoptimize plugin settings to improve the performance and page speed of your WordPress site.
Before we dive into the best Autoptimize settings, let’s quickly go over three reasons why Autoptimize is a great optimization plugin.
- The free version of Autoptimize has a complete feature set for optimizing your WordPress site.
- Autoptimize is strictly an optimization plugin and does not do any HTML page caching. This means it is compatible with all web hosts – even ones with custom page caching configurations like Trungbs.
- Autoptimize has over 1 million active installs in the WordPress repository and is consistently updated with new features and bug fixes.
The “also aggregate inline JS” option extracts inline JS in your HTML, and combines it with Autoptimize’s optimized JS file. Since this option can cause a rapid increase in Autoptimize’s cache size, we recommend keeping this option disabled unless you have a specific reason to enable it.
<head> element, we recommend excluding those scripts from Autoptimize.
We recommend enabling this option. When “optimize CSS code” is enabled, Autoptimize will minify your CSS files.
Autoptimize’s “aggregate CSS files” option will combine all of your CSS files into a single file. As we mentioned earlier, this feature may not benefit sites that support HTTP/2. We recommend A/B testing this option on your site to determine if there is any positive impact on page speed.
This option will move inline CSS to Autoptimize’s CSS file. While moving inline CSS to a browser-cacheable CSS file can reduce page size, we recommend leaving this option disabled in most cases.
When this option is enabled, Autoptimize will base64-encode small background images and embed them into CSS. We recommend testing out this option to gauge the impact on your page speed. While encoding images into base64 format reduces the number of HTTP requests, base64 representations files are typically 20-30% larger than their binary counterparts.
Inlining critical CSS can result in a significant speed boost for some sites. The idea here is inline styles that are required for elements that are “above the fold”. In practice, inline CSS usually targets elements like structural elements, global font families and sizes, and navigation styling.
By inlining these key elements, the larger complete CSS file can be loaded at a later time without impacting the look of the page. While it’s possible to manually extract critical styles, we recommend using a tool like this one to generate the styles as a starting point.
The next step is to test your site’s frontend experience. If you notice some strange flashes of unstyled content (FOUC), you’ll likely need to identify those unstyled elements and add the corresponding styles into Autoptimize for inlining.
Autoptimize offers a “power-up” that automatically generates critical CSS for your WordPress pages. From our experience, this feature can occasionally slow down your site because it uses external API calls to generate the critical CSS. Thus, the initial critical CSS generation is dependent on the responsiveness of an external server. In most cases, the aforementioned method which doesn’t require any external API calls is a cleaner solution.
For most sites, we do not recommend inlining all CSS as it can increase page size dramatically. Furthermore, inlining all CSS makes it impossible for the web browser to cache CSS.
We recommend enabling the “optimize HTML” code feature because it reduces page size by removing unnecessary whitespace in your HTML. While this feature is compatible with most sites, removing whitespace can cause glitches on some sites. Thus, we recommend testing HTML code optimization thoroughly before using it in a production environment.
Enable this feature if you would like to keep HTML comments for your optimized pages.
If you are using a CDN like Quic.Cloud CDN to accelerate static assets, you’ll need to add the CDN URL to Autoptimize. If you are using a proxy service with CDN capabilities like Cloudflare, you do not need to configure anything in Autoptimize’s CDN options.
Autoptimize’s “cache info” displays important information like the location and permissions of the cache folder, as well as the total size of the cached styles and scripts. If you see “No” next to “Can we write?”, you’ll need to work with your host to fix the folder permissions.
We recommend enabling this option to save aggregated files as static files locally. You may need to disable this if your server is not configured to handle file compression and expiry.
We recommend enabling this option to ensure all CSS and JS files are minified. However, if you notice some minification-related issues with some of your excluded CSS and JS files, you can go ahead and disable this option.
We recommend enabling this to ensure assets are optimized for logged-in editors and administrators. This is important if you are testing Autoptimize settings as a logged-in user.
Autoptimize features a built-in integration with ShortPixel for optimizing images. In addition to an image quality setting, Autoptimize’s integration also allows you to generate and serve WEBP versions of your images.
Need a top-notch, fast, and secure hosting for your new ecommerce website? Đánh giá Vultr chi tiết các gói dịch vụ VPS của Vultr.
Autoptimize also includes lazy-loading functionality for images. We recommend enabling this feature to improve page speed for image-heavy pages. When lazy-loading is enabled, Autoptimize lets you exclude certain image classes and filenames from being lazy-loaded.
The exclusion setting is useful for images like logos, social icons, and other important image elements that shouldn’t be lazy-loaded. If you’re looking for a solution that offers more control over lazy-loading, check out our guide on lazy-loading images and videos in WordPress.
Autoptimize has a few different options for optimizing Google Fonts. The best option for you will depend on how your site utilizes Google Fonts.
- Leave as is.
- Remove Google Fonts.
- Combine and link in head.
- Combine and preload in head.
- Combine and load fonts asynchronously with webfont.js.
We don’t recommend using the “leave as is” option because it offers no speed benefit.
If Google Fonts isn’t a mission-critical requirement on your site, removing them and using a system font stack instead can have a huge positive impact on your page speed.
If you would like to keep Google Fonts on your site, we recommend testing out the last three options to find out which one works best for your site.
If you’d like to remove query strings (e.g. ?ver=) from static resources, you can enable this option. The removal of query strings will not impact load time, but it may help improve your site’s score in GTmetrix, Google Pagespeed, and other performance testing services.
For example, if your site has a logo image that’s served from:
You can instruct Autoptimize to add a preconnect directive to handle the initial DNS and SSL connections in the
<head> element before the HTTP request is made in the
<body> element of your HTML.
You can use your browser’s developer tools or inspector to find important external domains to preconnect to. In the example page below, there are external requests to the following domains.
For performance reasons, we recommend adding no more than six domains to Autoptimize’s preconnect list because specifying preconnect directives for too many domains can result in a performance hit.
Preload directives instruct your web browser to download an asset as soon as possible. This directive is useful for downloading assets that are needed very early in the page load process. In practice, preloading is often used to speed up load times for custom fonts by loading them before they are requested in the page’s CSS.
We recommend consulting with a developer regarding which assets, if any, to preload on your WordPress site. As with many other performance-related tweaks, preloading too many assets can cause your site to load slower.
async HTML flag. While loading JS files asynchronously can improve page speed, we recommend doing adequate testing to make sure that no site functionality is affected.
If you know how to tweak its settings, the Autoptimize plugin is a solid option for WordPress users looking to boost site performance.
With basic features like HTML and CSS optimization and more advanced ones, like CDN integration and the ability to specify preconnect and preload directives, Autoptimize has everything you need to optimize your WordPress site’s frontend performance.
If you’re interested in learning more about WordPress optimization and how to optimize your site’s backend, be sure to check out our comprehensive WordPress performance guide.