How to Enable Merge CSS, JavaScript in Magento 2

All separated CSS files and CSS files and JavaScript Files can be merged into one single or condensed file that helps to optimize your site and reduce page loading time. After merging, a merged CSS file or Script Files will be shown without line breaks and be disallowed to edit the file. To enable Merge CSS, JavaScript in Magento 2 you can follow some simple steps which are given bellow.

How to Enable Merge CSS, JavaScript in Magento 2

• Facts of page loading speed that you need to know
• To merge CSS files in Magento 2
• To merge JavaScript files in Magento 2
• To merge CSS and JavaScript files programmatically

Facts of page loading speed that you need to know

• More than 45% of visitors will not purchase the product if they experience an eCommerce site that loads slower than expected (Unbounce).
• 53% of mobile site visitors tend to leave a page when having to wait more than three seconds (Akamai).
• A decrease of 0.1 second in page load time can increase retail customer engagement by 5.2% (UnbounceGoogle, Fifty-Five, and Deloitte).

Hence, it is essential that your page will perform at its best speed. Enabling Merge CSS, JavaScript in Magento 2 can be your first step in this site optimization process.

Discover Site Speed Optimization services

To merge CSS files in Magento 2

• On the Admin panel, click Stores. In the Settings section, select Configuration.
• Select Developer under Advanced in the panel on the left
• Open the CSS Settings section, and continue with following:

• In the Merge CSS Files field, select Yes
• When complete, click Save Config.

To merge JavaScript files in Magento 2

• On the Admin panel, click Stores. In the Settings section, select Configuration.
• Select Developer under Advanced in the panel on the left
• Open the JavaScript Settings section, and continue with following:

• In the Merge JavaScript Files field, select Yes
• When complete, click Save Config.

To merge CSS and JavaScript files programmatically

Once your website is set to the production mode, the only way to enable JavaScript or CSS is using the CLI. Run the following command to merge JavaScript/ CSS from the CLI.

Magento 2.2.X and 2.3.X

bin/magento config:set dev/css/merge_css_files 1
bin/magento cache:clean

Magento 2.0.X and 2.1.X

UPDATE core_config_data SET value = 1 WHERE path = 'dev/css/merge_css_files';

Using n98-magerun2 for Magento 2.1.X, 2.2.X and 2.3.X

n98-magerun2.phar config:store:set dev/css/merge_css_files 1
n98-magerun2.phar cache:clean
Environment configuration
...
'js' => [
   'merge_files' => '1',
   'minify_files' => '1',
],
'css' => [
    'minify_files' => '1',
    'merge_css_files' => '1',
],
...

Increasing your website loading speed is the first step to increasing conversion rates and boosting sales, and it can be done by enabling Merge CSS, JavaScript in Magento 2. Hopefully the statistics will give you another insight into this matter, and the guidelines show you how to deal with it. You can get your site performance audit and find solutions for your store here. Leave comments below to share with us your results!

Related Post

• Magento 2 Performance Optimization
• How to improve page speed in Magento 2