6
This site contains affiliate links to products. I may receive a commission for purchases made through these links. Please read my Affiliate Disclosure for more info.
I found Autoptimize is the best free plugin for reducing and compressing JS, CSS, HTML files. After installation you have to use the advanced settings, and don’t be afraid of this, there isn’t loads there.
With its help you can make smaller, compressed files from many files. It has a useful function, which can turn off Google fonts, and this will help reduce the number of files being loaded from external links.
It’s worth to use this, when you use a theme that looks good even without the Google font. If you need the Google font, don’t worry about this option.
Table of contents
2.1. HTML Settings
2.2. JS Settings
2.3. CSS Settings
2.4. Extra Settings
Install Autoptimize
To install Autoptimize select from the Plugins menu, Add New option, and write in the search bar Autoptimize. This plugins icon is a surfer, so it’s easy to find. Another option is downloading it from the extension storage, then uploading and installing it.
After you installed and activated it you can find Autoptimize at the Installed plugins page, where you have to select Settings to configure Autoptimize.
A very simple page will welcome you, where are three options are available, so first you need to click on Show Advanced Settings, so you can see various settings options.
Configure Autoptimize
HTML Settings
At the HTML Options it’s enough to tick the first box (Optimize HTML Code).
JS Settings
At the JavaScript Option box you must select Optimize Javascript Code. There are more setting options here:
Aggregate JS-files: would you like to unite the JS files. You must pick this option.
Also aggregate inline JS: if you pick this option, you will quickly increase Autoptimize’s cache memory, so I don’t recommend using this.
Force Javascript in (head): this setting results in the javascript file going over the drive, which isn’t beneficial. You don’t have to tick this.
Exclude scripts from Autoptimize: here you can select which javascript files would you like to be excluded from the optimization. You will need this in the case, that due to the optimization something wouldn’t work on the website.
The slider isn’t working, or the mobile menu, the pictures aren’t showing up, etc. You can normally fix this, if you add to the exclusion the jquery.js file.
Add try-catch wrapping: this function is basically troubleshooting, if one of the javascript files aren’t working properly, you can try to activate this function.
CSS Settings
For the complete optimization you can activate all the options in the CSS Options box aside from the Inline and Defer CSS functions.
In the Exclude CSS from Autoptimize row, you can add the CSS files you want to exclude from optimizing.
The developers created an extension (Autoptimize criticalcss.com power-up), which will automatically create and handle critical CSS files. This extension works automatically after installation and activation, but you can adjust the settings, as Autoptimize has a Critical CSS tab.
Extra Settings
At the further settings option you can tick both options, so it saves the united files, and the website will be optimized for all the user who log in.
At the extra tab you can find Google fonts, and settings for the optimization of images. You can activate the options Remove emojis and Remove query strings from static resources here. I recommend ticking these.
You can turn off Google fonts, or you can set which way you would like them to load.
6
