Minify & Compress CSS/JavaScript

Divi Nitro has a feature that allows you to Combine and Minify your website’s scripts. While there are other plugins that may automate this process, Divi Nitro requires you to manually add scripts that you would like to be combined and minified.

Below is a video and written documentation.

But why doesn’t Divi Nitro automatically combine and minify scripts?

Some websites may not render correctly and may otherwise “break” when a plugin automatically minifies scripts. Divi Nitro offers you flexibility in combining and minifying scripts. This encourages you to test and see which scripts can be minified to offer you and your website visitors the most desirable experience. We highly encourage you to test minifying scripts to determine which ones may “break” your site and we offer an option to create a separate queue which may allow you to minify “problematic” scripts. To assist you in this process, we offer a helper tool that identifies which scripts are loading.

Below are the settings and what they do and then we will go into a step by step process on how to set it all up.

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.

Add 1 – 3 filenames at a time to the queue, save, clear cache and check the front-end. Do this until you find out the script/s that are causing the issues. Remove these for the time being. Carry on until you have added all apart from the naughty ones causing issues.

Try adding these in a different order in the queue for example if it was towards the end, try adding it at the beginning. If it still causes issues, try adding it to a separate queue. If it is still not playing ball, just leave it out completely as it is better to have most working than none.

The reason why it would be causing issues is most likely the order in which it is minified – see if one script depends on another and then is combined together it will be looking for a file that is not there – so the order is key.

This applies to both JavaScript and CSS – the process is the same.

So… Carry on until you have the ultimate setup.

If some scripts don’t get minified (no line-through) this is most likely that it will cause issues or is an external script – we won’t/can’t minify these scripts.