Home WordPress Performance and Speed How To Optimise Your WordPress Using Autoptimize

How To Optimise Your WordPress Using Autoptimize

224
How To Optimise Your WordPress Using Autoptimize

How To Optimise Your WordPress Using Autoptimize 

How To Optimise Your WordPress Using Autoptimize

WordPress amazes the users with an unpaid versatile plugin. It is called Autoptimize which does include optimization features aimed at other elements of present-day WordPress sites, apart from HTML, CSS, and JavaScript optimization

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.

  1. 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.
  2. 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.
  3. 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

JavaScript, HTML, and CSS are the livelihoods of Autoptimize. Just like other optimization plugins, the act of going thoroughly through the extensive feature set and settings of Autoptimize may dismay the user. So, in order to ease stuff, the following data was brought to you as a great compilation of the best settings of Autoptimize. The purpose is satisfying you by enhancing the performance of your WordPress site.

The Options Of JavaScript

JavaScript optimization in Autoptimize.

Optimizing JavaScript Code

We advise enabling this option. The moment you enable “optimize JavaScript code”, Autoptimize compacts your JavaScript files.

Aggregating JS Files

Your JavaScript files get merged into a single file by means of Autoptimize’s “aggregate JS files” option. Formerly, the process of merging CSS and JS files was a vital step in WordPress optimization. Modern HTTP/2 servers support interim multiplexing and downloads. So what?! This means that bringing files together is no longer crucial like it was seeing that HTTP/2 permits meanwhile download of multiple files. Despite the above lines, aggregating CSS and JS files will still lead to a deceleration for some types of WordPress sites. Hence, with this option enabled and disabled, we recommend testing your page speed.

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.

Compel JavaScript in

Generally speaking, forcing JavaScript files to load in your site’s HTML <head> element, is something that we do not recommend. In fact, compelling JS to load early leads to render-blocking elements, so your page speed slacks off. In case you have to load JavaScript files in the <head> element, we suggest ruling those scripts out of Autoptimize.

Eliminate Scripts from Autoptimize

Here, this option permits ruling  JavaScript files and certain directories out of aggregation. Autoptimize excludes the following scripts by design:

  • wp-includes/js/dist/
  • wp-includes/js/tinymce/
  • js/jquery/jquery.js

Please consider that the act of adding a script, to be excluded, does only affect aggregation by default. The excluded JavaScript files are going to remain minified unless “minify excluded CSS and JS files” is unchecked under  “Misc Options”.

Affix Try-Catch Wrapping

You will wrap your JavaScript code in try-catch blocks the moment you enable the “add try-catch wrapping” option. JS minification and aggregation result in debugging issues and the above option is useful for those issues. Regarding that excessive use of try-catch blocks can decrease JS performance and in case your site does only function with “add try-catch wrapping” enabled, we recommend working with a developer to go through your JavaScript files in order to identify the one responsible for the issue.

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

CSS Options

Autoptimize CSS optimization.

Optimize CSS Code

We do recommend enabling this option. Autoptimize will compact your CSS files when “optimize CSS code” is enabled.

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

Here, this option shifts embedded CSS to Autoptimize’s CSS file. We recommend keeping this option disabled in most cases since moving inline CSS to a browser-cacheable CSS file can down page size.

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

We don’t suggest inlining all CSS for the majority of websites because it can incredibly rise the page size. In addition, your browser cannot cache CSS when inlining all CSS.

Exclude CSS Files From Autoptimize

Systematically, the following directories and CSS files are ruled out of aggregation in Autoptimize. However, in case you want to stop Autoptimize from aggregating your CSS files, then you need to add them to this list. Like JavaScript exclusion, this feature’s default functioning does not hinder CSS files being minified but aggregated.

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • dashicons.min.css

HTML Options

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.

CDN Options

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.

Cache Info

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.

Misc Options

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.

Google Fonts

@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

An Autoptimize feature that eliminates JavaScript and CSS in relation to WordPress core emojis. We suggest activating this option due to its capacity to melt off the size of your page. Beyond that, the majority of mainstream operating systems ship with font piles involving emojis. Certainly, more other ways are available such as disable emojis on your WordPress site.

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.

Async JavaScript Files

Autoptimize’s “async JavaScript files” option lets you specify some external JavaScript files to load asynchronously via the async HTML flag. It is true that loading JS files asynchronously may benefit the page speed, yet, we recommend suitable testing to ensure that the site features are working well.

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

Conclusion

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.

 

SEE ALSO  Pinterest Automatic Pin WordPress Plugin