How to Optimize WordPress Website using Autoptimize Plugin

There is a lot more to WordPress Optimization than just a clean design. It means optimizing all the things that keep your website tied together to give you a better performance. Optimizing your website includes Aggregate, Minify & Cache Scripts & Styles, Inject CSS in Page Head, Inline CSS, Move & Defer Scripts to Footer, Minify HTML, Optimize Images, Lazy Load Images, and so on.

You won’t be able to optimize and solve the above-mentioned issues unless you are an experienced developer. Even if you are not, there is no need to worry. We have found a very easy solution for you by which you will be able to optimize your WordPress website in just a matter of a few minutes.

WordPress as a platform offers plenty of options for optimizing your site to make it faster and more reliable. In this article, we’ll show how to optimize your WordPress website with the help of the “Autoptimize Plugin”. We will also show you the best setting that you can set in the plugin for the best performance.

Autoptimize Plugin:

Autoptimize Plugin was developed by Frank Goossens who is a seasoned web technology consultant from Ghent, Belgium. Autoptimize makes the optimization process very easy. In autopimize by default, you can aggregate, minify and cache scripts and styles, injects CSS in the page head. Additionally, you can also inline critical CSS and defer the aggregated full CSS, move and defers scripts to the footer, and minifies HTML. You can optimize and lazy-load images, optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft, and more.

Note: Autoptimize does not do any HTML page caching. It is strictly an optimization plugin.

One of the reasons for using the Autoptimize plugin is that it offers a complete set of features free of cost. Also, it is one of the highest-rated plugins in the store and is regularly updated. There are also paid versions of the plugin available i.e. ‘Autoptimize Expert Configuration’ and ‘Complete Speed Optimization’.

Now let’s take a look at the best settings to optimize your website. Before we begin you need to install and activate the Autoptimize plugin from your WordPress dashboard.

On successful installation go to Settings >> Autoptimize Settings which will take you to the settings page of the optimization plugin.

JS, CSS & HTML Settings:

When you arrive to the Autoptimize settings page, you will see (JSS, CSS & HTML), Images, Critical CSS, Extra, and Optimize More tabs. The above category is the first tab and consists of the following blocks:

  • JavaScript Options
  • CSS Options
  • HTML Options
  • CDN Options
  • Cache Info
  • Misc. Options

Image

 JavaScript Options

Optimize JavaScript Code:

We recommend you to enable this option. Autoptimize will minify your JavaScript files when this option is enabled. All the other options will open up once you enable this option.

Aggregate JS Files:

Enabling this option will combine all you JavaScript files into a single file. Enabling this option sometimes leads to the breaking of the functionality of your web page. So, we recommend you to test your website performance with this option enable and disabled. Combining CSS and JavaScript is a key step to optimize your WordPress website. But if you are using a modern HTTP/2 server, this option won’t be of much importance. The reason is the HTTP/2 servers support parallel download and multiplexing which allows downloading multiple files at the same time.

Also aggregate inline JS?:

We recommend you to keep this option disabled. Enabling this option will extract inline JS in your HTML, and combine it with Autoptimize’s optimized JS file which can cause a rapid increase in Autoptimize’s cache size.

Force JavaScript in <head>?:

We recommend you disable this option. While enabling this option would potentially fix some JS errors but this can result in render-blocking elements which may decrease your page speed.

Exclude scripts from Autoptimize:

In this section, you get the option to exclude specific directories and JavaScript files from optimization. By default, following scripts are excluded:

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

Note: Excluded JavaScript files will still be minified unless “minify excluded CSS and JS files” is unchecked under “Misc Options”.

Add try-catch wrapping:

We recommend you to enable this option. This option helps you with debugging issues by encasing your JS code in try-catch blocks.

Note:  It is recommended to consult a professional if your website only works with this option enabled.

Autoptimize Plugin CSS Options

Optimize CSS Code:

We recommend you to enable this option. Autoptimize will minify your CSS files when this option is enabled. All the other options will open up once you enable this option.

Aggregate CSS-files:

Enabling this option will combine all your CSS files into a single file. The functionality of this option is very similar to the “Aggregate JS Files” option. So even for this option, we recommend you to test your website performance with this option enable and disabled.

Also aggregate inline CSS:

In most cases we recommend you keep this option disabled. By enabling this option, inline CSS will be moved to Autoptimize CSS files which might result in reduced page size.

Generate data: URIs for images:

In simple terms, when this option is enabled, small images are moved into CSS to reduce the number of server requests. In technical terms, Autoptimize will encode base64 format small background images and embed them into CSS. In doing so, it reduces the number of HTTP requests as base64 format files is generally 20-30% larger than their binary equivalents. We recommend testing out your website performance by enabling as well as disabling it.

Inline and Defer CSS:

 In simple terms, enabling this option inlines critical “above the fold” CSS and the full CSS file. This options sometimes result in higher speed for some sites, but it can also slow down some sites if it uses an external API. Elements like global font families and sizes, structural elements, and navigation styling are targeted. A “power-up” feature is offered by Autoptimize that automatically generates critical CSS for your WordPress pages. You can also manually extract critical CSS or can use this external tool to generate it.

After the critical CSS is generated, copy it to the Inline and Defer CSS section.

The final step is to test your website’s front-end experience. You need to identify unstyled elements and add the corresponding styles into Autoptimize for inlining if you notice some “flashes of unstyled content (FOUC)”.

Inline all CSS:

This option when enabled in lines all CSS straight into HTML to reduce server requests. This option is not recommended as it can increase the page size.

Exclude CSS from Autoptimize:

This option when enabled excludes certain CSS files from optimization. By default, following scripts are excluded:

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

Note: Excluded CSS files will still be minified unless “minify excluded CSS and JS files” is unchecked under “Misc Options”.

HTML Options

Optimize HTML Code:

We recommend enabling this option. On enabling, minifies HTML output by removing unnecessary whitespace. We also recommend testing HTML code optimization thoroughly before using it as it can cause issues on some websites.

Autoptimize Plugin Keep HTML comments:

Enable this feature if you want to keep your HTML comments intact during optimization.

Autoptimize Plugin CDN Options

Leave the text area blank if you are not using a CDN or using a proxy-style CDN like Cloudflare. But if you are using a custom CDN then you need to enter its URL for static assets.

The “Cache Info” section displays general information about the Autoptimize Plugin. Users can view Autoptimize’s cache folder, the plugin’s write status, and the number and file sizes of the optimized files. If the plugin’s write status displays “No”, then you need to contact the host to fix the issue.

Autoptimize Plugin Misc Options

We recommend you enable everything in this section.

Save aggregated script/css as static files:

This option when enabled saves optimized files as static files locally. Disable this option if your web server doesn’t properly handle the compression and expiry.

Minify excluded CSS and JS files:

This option when enabled ensures that all the JSS and CSS files are minified. Disable this option if any of your CSS or JS files break even when they are excluded.

Enable 404 fallbacks:

This option when enabled will try to keep your website or web page intact in case of broken sites. In some cases, this will require extra web-server level configuration to ensure “wp-content/autoptimize_404_handler.php” is set to handle 404’s in “wp-content/cache/autoptimize”.

Also optimize for logged in editors/ administrators:

This option when enabled ensures assets are optimized for logged-in editors and administrators.

Autoptimize Plugin Image Optimization

The Image Optimization is the second tab and consist of the following blocks:

  1. Optimize Images
  2. Lazy load Images

Note: Checking both these option is totally depends upon the user and on the type of hosting used.

Autoptimize Plugin Optimize Images:

The “Optimize images” option lets you integrate your WordPress with ShortPixel’s image optimization service. If you sign up through the link in Autoptimize, you’ll even get a special offer on ShortPixel’s service. Along with the “Image Optimization quality” setting, it also allows you to serve the “next-gen” WebP image format to any browser that supports it.

Autoptimize Plugin Lazy Load Images:

This option when enabled can significantly reduce your page load speed if your website contains very heavy images. It adds an extra snippet of JavaScript code to your website to load images on demand.

Autoptimize Plugin Critical CSS

In this tab, the critical CSS for your website is generated using an external API. It is a paid feature.

Autoptimize Plugin Extra Auto Optimizations

In this tab, the user can configure additional optimizations that can improve the performance of your WordPress site. It consists of the following blocks:

  • Google Fonts
  • Remove emojis
  • Remove query strings from static resources
  • Preconnect to 3rd party domains
  • Preload specific requests
  • Async JavaScript files
  • Optimize YouTube videos

Autoptimize Plugin Google Fonts:

Following Options are available for optimizing google fonts on your website;

  • Leave as is.
  • Remove Google Fonts.
  • Combine and link in head.
  • Combine and link deffered in head.
  • Combine and load fonts asynchronously with webfont.js.

We recommend users to experiment with different options to find the best options for your website. Although, we don’t recommend selecting the “Leave as is” option as if will not offer any benefit. Also, you can select the “Remove Google Fonts” option if your website is using a system font stack.

Autoptimize Plugin Remove emojis:

This option when enabled, removes WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file. We recommend selecting this option if your site doesn’t use emojis. Also, system font stacks come with emojis support. Enabling this option would improve your page speed.

Autoptimize Plugin Remove query strings from static resources:

With this option enabled, query string from the URL is removed. Doing so doesn’t result in faster load times, but can improve GTmetrix and Pingdom performance scores.

Autoptimize Plugin Preconnect to 3rd party domains:

This option when enabled is used to instruct the browser to set up DNS, TCP, and TLS negotiations before an HTTP request is made to the origin server. We recommend users to enable this service if your WordPress website calls assets from an external source. Doing so improves the page load speed. For example, I use Google Analytics, which requests assets from https://www.google-analytics.com and https://stats.g.doubleclick.net. By adding these domains to my HTML preconnect list, the web browser will make an early connection to Google’s servers.

Autoptimize Plugin Preload specific requests:

This option downloads a resource that are needed very early in the page load process by giving an instruction to the web browser. We recommend users to consult a developer while using this option. The developer can suggest which assets, if any, to preload on your WordPress website. If this is not done properly it will affect your website performance.

Autoptimize Plugin Async Javascript-files:

This option lets you specify certain JavaScript files to load asynchronously, which means the JS code will execute while the page’s HTML is rendering. The external JS files are loaded asynchronously via the async HTML flag.

Optimize YouTube videos:

We recommend users to enable this option if they are embedding a lot of YouTube videos on their WordPress website.

Optimize More!

This tab is basically an advertisement tab. Users can ignore this tab if they are not looking to use any extra services along with this plugin. By following all the steps of this article, you can easily get a highly optimized site.

Conclusion

Autoptimize Plugin is one of the best options available for beginners as well as professionals for optimizing their WordPress website if they are not looking to spend money on expensive add-ons. If you combine Autoptimzie with a good quality host, your website can break all performance barriers.

We hope this article helps you optimize your website. Please drop your queries in the comment section.

Also, if you want us to cover a specific topic, you can drop that into the comment section as well.

Recent Articles

How to Add Tabs to WordPress Posts and Pages

Tabs effectively organizes the content and engages the user. You can divide your posts into tabs in order to save space and...

How To Check Whether Someone Blocked You On Instagram

All social media platforms including Instagram do not notify people when they get blocked by a user. But when someone’s post and...

Free Apps Make Money through These Innovative Ways

Have you always wondered why are some apps available to you free of cost? If you want to know how apps make...

How To Completely Remove Google Account From Chrome Browser

Google Chrome when used with your personal Google account lets you keep the data in sync with all your devices. Your YouTube...

How To Know If Your Android Smartphone Is Hacked And How To Fix It!

One of the worst nightmares you can ever witness is realizing that your Android Smartphone Is Hacked. Yes, you're allowed to be...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here