Step 7: CSS, JS Minification & Combination
Written by the Divi Engine Documentation Team
Watch This Video
Introduction
Follow this information to minify your CSS & JS.
Click On Nitro Minify
Access Nitro Minify.
Check Enable Helper
Check the Enable helper checkbox and then the Save Changes button at the bottom of the page.
Clear Cache
Click the Clear Cache button and then the Save button at the bottom of the page.
Javascript Minification & Combination
Go to the front end of your homepage and click NitroMinify in the top right navigation. 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. Your task here is to copy all the Javascript files and then paste them into the Javascript input field (Queue) on the Nitro Minify page of Divi Nitro.
Troubleshoot
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
Go to the front end of your homepage and click NitroMinify in the top right navigation. 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. Your task here is to copy all the CSS file names and then paste them into the CSS input field (Queue) on the Nitro Minify page of Divi NItro. Remember to click the Save Changes button at the bottom of the page.
Troubleshoot
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.
More Support?
Please email us at [email protected] if you are unable to get Divi Nitro working.