How to Merging CSS Files and Javascript files in Magento 2 Themes settings

Many CSS files and Javascript files with heavy size is one of the many reasons why the Magento 2 store loads slow. To enhance the loading speed of your web store, you can reduce the number of separate CSS files and Javascript files by merging them into a single CSS file and JS file. When the migration of CSS files and JS files is done, you’ll have one continuous stream of text, without line breaks. If you want to edit the merged CSS file, you have to turn off the developed mode, and no longer make any frequent change to the CSS. The same as Javascript file, if the code has no errors and you are done with the development process, you can merge the Javascript files. In this article, we will show you how to merge CSS files and Javascript files in Magento 2 themes settings.

To merge CSS files, follow these tips:

1. On the Admin sidebar, click Stores. After that, in the Settings section, click Configuration.
2. In the panel on the left under Advanced, click Developer.
3. Open CSS Settings option.
4. Change Merge CSS Files to “Yes.”
5. Click Save Config after complete.

To merge Javascript files, follow these tips:

1. On the Admin sidebar, click Stores. After that, in the Settings section, click Configuration.
2. In the panel on the left under Advanced, click Developer.
3. Open the JavaScript Settings option.
4. Change Merge JavaScript Files to “Yes.”
5. Click Save Config after complete.

Above is a tutorial on how to merge CSS files and Javascript files into a single CSS file and JavaScript file. We hope that you will find the way to enhance your Magento 2 store using this tutorial. In the next article, we will describe how to Scheduling Design Changes in Magento 2 Design & Themes. In case you have any question, feel free to leave a comment. Don’t forget to share and subscribe Mageguides to read more useful Magento 2 tutorials.