CSS, JS Minification & Combination

Asset minification is the process of reducing the size of assets (such as CSS, JavaScript) used in web development. The goal of minification is to optimize the load time and performance of a website by reducing the size of the files that are sent to the client's browser. This is achieved by removing all unnecessary characters, such as white spaces, comments, and new line characters, from the source code of the asset.

TLDR: Watch Video

Check Enable Helper

Check the Enable helper checkbox within Divi Engine > Divi Minify and then the Save Changes button at the bottom of the page.

Clear Cache

Click the Clear Cache button and then the Save Changes button at the bottom of the page.

Javascript Minification & Combination

1. Go to the front end of your homepage and click Nitro Minify in the top right navigation.
2. After doing this, a dark screen will appear with three horizontal sections. The top one contains the names of the Javascript (JS) files that you are able to work on. The middle row contains all the CSS files. Copy all the Javascript files from the JavaScripts section.
3. In the Nitro Minify page in your WordPress backend, select Enable script minification under Javascript Minification
4. A new field will appear for Javascript minification queue(s). Paste the Javascript file names in there.
5. Click on Save Changes at the bottom of the page.

Troubleshooting Javascript Minification & Combination

After saving these settings, you must then take a look through your Divi website to see if anything has broken. The reason for this is that JS combination & modification is so powerful that they can break a website - this is common with all software. If you do see something broken on your Divi website, you will have to troubleshoot. What this means is that you will have to work out which JS script needs to be removed and added into a new queue. The way to do this is to take any script and add it into a new queue or remove it entirely. If the problem goes away then you have found the issue. Please know that there are some files that cannot be minified and so these should not be added into any queue. Since all websites are unique, we cannot give you a definitive list of the files that should not be added, you will have to figure this out by trial and error. From our experience, divi-custom-script and et-common-core are two files that you should test first.

CSS Minifcation & Combination

1. Go to the front end of your homepage and click Nitro Minify in the top right navigation.

2. After doing this, a dark screen will appear with three horizontal sections. The top one contains the names of the Javascript (JS) files that you are able to work on. The middle row contains all the CSS files. Copy all the CSS file names.

3. In the Nitro Minify page in your WordPress backend, select Enable style minification under CSS Minification.

4. A new field will appear for CSS minification queue(s). Paste the CSS file names in there.

5. Click on Save Changes at the bottom of the page.

Troubleshooting CSS Minification & Combination

After saving these settings, you must then take a look through your Divi website to see if anything has broken. The reason for this is that CSS combination & modification is so powerful that they can break a website. If you do see something broken on your Divi website, you will have to troubleshoot. What this means is that you will have to work out which CSS script needs to be removed and added into a new queue or removed entirely. The way to do this is to take any script and add it into a new queue or remove it entirely. If the problem goes away then you have found the issue. Please know that there are some files that cannot be minified and so these should not be added into any queue. Since all websites are unique, we cannot give you a definitive list of the files that should not be added, you will have to figure this out by trial and error. From our experience, child-theme and parent-theme are two files that you should test first.