How To Optimise Your WordPress Using Autoptimize
You are getting the utmost performance and page speed for your site. How? Simply we are going to share the best Autoptimize plugin settings in this post.
Why Autoptimize, Not Else?
You and I are going to examine thoroughly the best settings in Autoptimize. Yet, before that, allow us to swiftly hover around three reasons making Autoptimize a marvelous optimization plugin.
- Fortunately, when you are using the free version of Autoptimize, consider yourself lucky since this version of Autoptimize has a complete feature set for optimizing your site.
- No HTML page caching with Autoptimize because it is rigorously an optimization plugin. But, what does that mean? This means that Autoptimize is consistent with all web hosts.
- Statistically speaking, in the repository of WordPress, Autoptimize got more than one million active installs. Furthermore, this versatile plugin is regularly updated with present-day features and of course, bug fixes.
Autoptimize CSS, HTML and JS Settings
Aggregating JS Files
Aggregate Embedded / Inline JS
This process is straightforward. The “also aggregate inline JS” option does extract inline JS in your HTML, then it blends it with the other optimized JS files of Autoptimize. Due to the fast enlargement, this option can make in Autoptimize’s cache size, you are called to keep this option disabled. Yet, you can enable it if you have a particular reason.
Eliminate Scripts from Autoptimize
Affix Try-Catch Wrapping
Autoptimize is definitely the unpaid WordPress optimization plugin you’ve got no idea your site lacks. That will speed your site up and this guide clarifies exactly the reason you need it 🚀CLICK TO TWEET
Autoptimize CSS optimization.
Optimize CSS Code
Aggregate CSS Files
Your CSS files will be merged into a single file by means of Autoptimize’s “aggregate CSS files” option. However, as we said before, this feature may not be useful for sites that support HTTP/2. To determine if there is any positive impact on page speed on your site, we do recommend A/B testing this option.
Also Aggregate Inline CSS
Generate Data: URIs for Images
Autoptimize will base 64-encode small background images and inline them into CSS when you allow this option. Moreover, we advise the user to try this option to assess the impact on page speed. Also, note that the time encoding images into base64 format downs the number of HTTP requests, base64 representations files are typically between 20% and 30% larger than their binary counterparts.
Embed and Delay CSS
Are you looking for an obvious speed increase for your WordPress website? Well, inlining critical CSS can result in it. The concept hovers around inline styles that are needed for elements that are “above the fold”. Practically speaking, inline CSS normally aims at elements such as global font families and sizes, navigation styling, and structural elements.
You inline these essential elements and the largest complete CSS file will be later loaded with no effect on the appearance of your page. In addition, extracting important styles manually is feasible, yet, as a start, we recommend resorting to a tool like this one to generate the styles.
Produce crucial CSS.
Once you have generated the critical CSS, copy and paste it into Autoptimize settings.
Inline and Postpone CSS in Autoptimize.
The following move is to examine the site’s frontend experience. Here, in case you observed some abnormal flashes of unstyled content (FOUC), then you will possibly need to detect those unstyled elements and add the matching styles into Autoptimize for embedding.
Autoptimize does provide you with a “power-up” that generates essential CSS systematically for the pages of your WordPress site. We did try it and we came out with tips of advice for you. Sometimes, this feature represents a speed bump for your site due to the external API calls it uses to generate the critical CSS. As a result, the primary critical CSS generation relies on the responsiveness of an external server. In the majority of situations, the above-stated method does not demand external API calls and it is a better solution.
Inline all CSS
Exclude CSS Files From Autoptimize
Autoptimize’s HTML optimization may remove whitespace, and that way, it helps down the size of your pages.
HTML optimization in Autoptimize.
Optimize HTML Code
You are called to enable the “optimize HTML” code feature since it keeps down the size of the page by eliminating unneeded whitespace in your HTML. Despite that this feature is consistent with almost all sites, withdrawing whitespace may result in hitches on some sites. So, we see you should test HTML code optimization meticulously prior to putting it in service.
Keep HTML Comments
If you like to keep HTML comments for the optimized pages, then activate this feature.
If you are dealing with a proxy service with CDN capabilities like Cloudflare, then there is no need to configure anything in the CDN’s options in Autoptimize.
Configure CDN settings in Autoptimize.
Autoptimize’s “cache info” exhibits crucial data such as permissions and the location of the cache folder, in addition to all the cached styles and scripts. The moment you spot “No” next to “Can we write?”, you will be in need to work with your host to repair the folder permissions.
Autoptimize cache info.
Autoptimize got some various optimization parameters that you might reconfigure in case you are facing hardness getting optimized JS and CSS files to load on your WordPress website.
Miscellaneous optimizations in Autoptimize.
Save Aggregated Scripts/CSS as Static Files
To locally keep aggregated files as static ones, we do really recommend that you enable this option. However, you will disable it in case your server is not configured to deal with file compression and expiry.
Minify Excluded JS and CSS Files
Enabling this option is recommended to make sure CSS and JS files are entirely minified. But you still can disable this option if you observe some minification-related problems with some of your excluded CSS and JS files.
Optimize for Logged In Administrators/Editors
Supposing that you are testing Autoptimize settings as a logged-in user, it is essential that you enable this option to be sure assets are optimized for logged-in administrators and editors.
Image Optimization in Autoptimize
Autoptimize contains an inbuilt integration with ShortPixel for optimizing images. Besides the image quality parameters, Autoptimize’s integration also permits you to produce and serve WEBP versions of your images.
We recommend the direct use of full-featured plugins from ShortPixel or Imagify. With the full plugin, you’ll have more comminuted control over optimization parameters like repenning images to use the <picture> tag.
Lazy-load images with Autoptimize.
Autoptimize does also involve asynchronous loading functionality for images. You will improve page speed for image-heavy pages when you enable this option. Autoptimize allows you to exclude certain file names and image classes from being lazy-loaded the moment you enable asynchronous loading functionality.
The exclusion parameter is nifty for images like social icons, logos, and other crucial image elements that must not be lazy-loaded. If you are searching for a solution providing more control over lazy-loading, check out our guide on lazy-loading images and videos in WordPress.
Extra Optimizations in Autoptimize
Extra optimizations in Autoptimize.
@Autoptimize got a variety of options for optimizing Google Fonts. The best that suits you is contingent on how your site uses Google Fonts.
- Combine and load fonts asynchronously with webfont.js.
- Combine and preload in the head.
- Combine and link in head.
- Remove Google Fonts.
- Leave as is.
We do not encourage you to use the “leave as is” option since it provides you with no speed improvement.
Note that getting rid of them and using a system font stack instead can amazingly benefit your page speed in case google fonts is not a mission-meaningful need for your site.
Do you want to keep Google Fonts on your WordPress website? Then, try the last three options to see which one is best for your site.
Get Rid Of Emojis
Eliminate Query Strings From Static Resources
You can enable this option in case you want to remove query strings (e.g. ?ver=) from static resources. Uprooting query strings won’t affect load time, on the contrary, it improves your site’s score in GTmetrix, Google Pagespeed, and even other performance testing services.
Preconnect to 3rd Party Domains
The role of the preconnect directive is to permit your browser to connect to certain specified domains in order to process DNS lookups and SSL handshake negotiations prior to sending a full HTTP request.
For example, Your site has a logo image which is served from https://site.example.cdn.com/logo.png, here, you are able to order Autoptimize to affix a preconnect directive to deal with the primary DNS and SSL connections in the <head> element ahead of the HTTP request being made in the <body> element of your HTML.
Finding crucial external domains to connect to is doable thanks to your browser’s developer tools or inspector. Down are external requests to the following domains.
The above mentioned three domains can be affixed to Autoptimize’s reconnect list.
Find external assets with developer tools.
We suggest you do not add more than six domains to Autoptimize’s preconnect list since specifying pre-connect directives for a lot of domains may hit the performance.
Preload Specific Requests
Preload directives order your browser to download an asset sooner. This directive is nifty for downloading assets that you need early in the page load process. Practically speaking, preloading usually speeds up load times for custom fonts by loading them ahead of being requested in the page’s CSS.
Asking a developer is suggested regarding which assets to preload on your WordPress site, if you need any because with many other performance-related alterations, preloading many assets can be a speed bump to your site loading.
Aren’t you already using Autoptimize? You will feel the urge to add this WordPress optimization plugin to your website right after reading this guide 🚀CLICK TO TWEET
The moment you get familiar with how to refine its settings, you will find out that the Autoptimize plugin is a solid feature for WordPress users who are seeking ways to improve the site performance.
You got basic features such as CSS and HTML optimization and more advanced ones, namely CDN integration and the possibility to specify preconnect and preload directives. Now you are sure Autoptimize has all that you need to optimize the frontend performance of your WordPress site.