Minify & Compress CSS/JavaScript
Settings
- Enable helper: Checking the Enable Helper radio box will enable the NitroMinify Helper. When this tool is enabled, you will have a new option called “NitroMinify” on your admin toolbar. When clicked, a list of all scripts that are enqueued will be listed. The names of the scripts may be copied and pasted into the queues that will be discussed below.
- Delete all cached files: Divi Nitro will cache your minified files so that your website can quickly load the minified scripts. If you change your setup, add or remove scripts, or make any other changes, you should Delete All Cached Files. This is a best practice to minimize the chance of “breaking” your CSS or JavaScript due to a recent change to your settings.
- Enable JavaScript minification / Enable CSS minification: Enabling JavaScript Minification and/or CSS Minification will enable the functionality for you to Combine and Minify Scripts. This option is turned off by default. If you’ve enabled this option before and have configured your queues (as discussed below), disabling JavaScript Minification and/or CSS Minification will not delete your previous configuration of minified scripts.
- JavaScript minification queue(s) / CSS minification queue(s): This is where you will enter the names of your scripts. If you enabled the helper tool, NitroMinify, you’d be able to enter (copy and paste from NitroMinify) the scripts here. They can be entered one per line or comma separated. Adding a new queue will combine and minify the scripts separately. This is especially helpful when you experience a conflict with combining a group of scripts. If your testing results in a script or group of scripts not combining with desirable results, add a new queue and input the script or group of scripts that weren’t generating desirable results. All JavaScript added will be deferred too.
-
Enable inline minification? (html, inline css & js): Checking this radio box will enable your HTML to be minified which will results in your HTML, CSS and JS on the page itself.
How to set up your CSS and JavaScript minification/compression.
1. Get Ready
The first thing to do is to make sure you disable any caching plugins so no cache will interfere with your settings. Enable the NitroMinify helper and visit the front-end of your website. Click the word “NitroMinify” in your toolbar. This will bring up all the scripts that are enqueued on your website. You will see it is split between JavaScript and CSS files. Furthermore, in the JavaScript section, it is divided into two sections – footer and header scripts.
2. Try all your files
The next thing that we tend to do is to copy all your javascript files with the same colour and add them into one queue box (if you don’t see this queue, click enable javascript minification first). Now save your settings.
Make sure you have no cache or clear it, same with your CDN such as CloudFlare. You can put CloudFlare in development mode or just clear the cache after each change.
Once your cache is cleared, go and check the front-end for any errors or stuff that is not working. Check things like your mobile menu, pop ups, and contact forms. If all works great – happy days! You don’t need to do any tweaking.
If you have any issues, move onto the next step.
3. Oops… Let’s try a different setup
Ok so you added all the scripts and for some reason, it caused issues on your website. Don’t stress, it happens to many websites as the more scripts we add the more can go wrong. Remove all the scripts, save the settings, clear your cache and check the front-end. Make sure all is back working fine. If it is not it would be a caching issue such as your browser cache – try incognito mode or hard refresh your page. Now we are going to do the tedious task but trust me isn’t as bad as it sounds and is quite satisfying. I actually find it quite fun trying to work out the best setup.