How to enable Javascript / CSS Merging & Minifying in Magento v2

Knowledgebase Article

How to enable Javascript / CSS Merging & Minifying in Magento v2

Javascript / CSS Merging & Minifying in Magento will optimise your site and reduce the page load time.

Visitors of your site will download less data when loading your Magento store, and will make fewer connections to your web server, resulting in a more responsive and faster browsing experience.

Login to your Admin Dashboard and go to: Stores >> Settings >> Configuration. Then select Advanced >> Developer from the menu.

Under Javascript settings you will find:

Merge JavaScript Files

Enable JavaScript Bundling

Minify JavaScript Files

Switch the three to Yes and click on Save Config:

Under CSS Settings you will see:

Merge CSS Files

Minify CSS Files

Switch both to Yes and click on Save Config:

You will be prompted to clear the cache, so click on the Cache Management and flush the cache.

There are reports that Magento's built in Merge & Minify may slow down the site, so we can recommend using option 2 -

Enabling CloudFlare for your domain.

Once enabled, CloudFlare allows you to auto minify JS, CSS as well as HTML:

You can have Merging and Bundling handled by Magento and Minifying by CloudFlare.

We are a CloudFlare optimised partner, so your site will benefit not only from the CDN and Minifying, but also from the Railgun and Rocket Loader.

You can significantly improve the loading time of your Magento store with those simple changes.

Quick comparison between the default Magento store and the merged and minified one:

Before (click to enlarge):

After (click to enlarge):

That's how you Merge and Minify Magento v2.

Should you need any further assistance, please do not hesitate to contact us.

How to enable Javascript / CSS Merging & Minifying in Magento v2

How to enable Javascript / CSS Merging & Minifying in Magento v2

Related Articles