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.
- Theme: Sample Child Theme ( Genesis Framework)
- Web Hosting: DigitalOcean (Interested in trying out their service?
- WordPress: 4.9.8 (Multisite)
- 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
The Autoptimize Plugin
You can get the Autoptimize plugin from the WordPress repository or make a manual search for it in Dashboard > Plugins > Add New
Click on Advanced options.
Mark (x) Optimize HTML Code
Mark Keep HTML comments if you want HTML comments to remain in the page.
Exclude scripts from Autoptimize: Remove all except seal.js. My site didn’t break but it is important to test each configuration.
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.
Mark Save aggregated script/css as static file, ( If you don’t use a Page Builder) Also optimize for logged in users
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.