Minify CSS, JS, HTML - Autoptimize

This guide will teach you how to minify CSS, JS, and html using the Autoptimize plugin and score 100 on GTMetrix for that section. 

It is important to understand that all configurations are different. For that reason, I’ve listed my setup below.

1. Theme: Sample Child Theme ( Genesis Framework)
2. Web Hosting: DigitalOcean (Interested in trying out their service? 
   
3. WordPress: 4.9.8 (Multisite)
4. CDN: KeyCDN (Not a must to pass this section with 100)

What Does it Mean to Minify?

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

Excerpted from PageSpeed Tools – Google Developers

It is recommended to minify CSS, JS, and HTML. You might have seen such recommendations in Google’s PageSpeed tools and even in the reports generated by GTMetrix.

The Autoptimize Plugin

Autoptimize  is a plugin created by Frank Goossens. It has the ability to aggregate, minify and cache scripts and styles, injects CSS in the page head , move and defer scripts to the footer, optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more.

You can get the Autoptimize plugin from the WordPress repository or make a manual search for it in Dashboard > Plugins > Add New

Activate the plugin and you will find it under settings. The default configuration may work for some but in my case? It didn’t make that nagging Minify JavaScript  prompt go away.

Click on Advanced options.

HTML Options

Mark (x) Optimize HTML Code

Mark Keep HTML comments  if you want HTML comments to remain in the page.

JavaScript Options

Check the following options: Optimize JavaScript Code, Aggregate JS-files, Also aggregate inline JS

Exclude scripts from Autoptimize: Remove all except seal.js. My site didn’t break but it is important to test each configuration.

CSS Options

Check the following options: Optimize CSS Code, Aggregate CSS-files, Also aggregate inline CSS, Generate data: URIs for images, Inline all CSS

CDN Options (Optional)

KeyCDN pulls content from the origin (my domain) and applies optimizing algorithms to the data as well as serving it to the nearest data center of the user.

Here you can specify the CDN url for such purpose. Ex: static.my-domain.com.

Although I tried the same method with Automattic’s WP Super Cache plugin, GTMetrix did not recognize the change until I used Autoptimize.

Misc Options

Mark Save aggregated script/css as static file, ( If you don’t use a Page Builder) Also optimize for logged in users

Extra Auto-Optimizations 

Google Fonts: Choose Combine and load fonts asynchronously with webfont.js

This concludes this optimization guide. If you wish to verify the success of the tips outlined above, you may run my home page / through GTMetrix or even Google’s PageSpeed Tools.

Note: You can not minify external sources, such as https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js as it isn’t hosted on your server.

---