How to enable Javascript / CSS merging and minifying in Magento 2

Enabling JavaScript and CSS merging and minifying in Magento 2 reduces the number of files your visitors download and the number of connections made to your server, resulting in a faster, more responsive store.

Enable JavaScript merging and minifying

1. Log in to your Magento Admin Dashboard.
2. Go to Stores > Settings > Configuration.
3. In the left-hand menu, select Advanced > Developer.
4. Expand the JavaScript Settings section.
5. Set the following options to Yes:
   • Merge JavaScript Files
   • Enable JavaScript Bundling
   • Minify JavaScript Files
6. Click Save Config.

Enable CSS merging and minifying

1. On the same Advanced > Developer configuration page, expand the CSS Settings section.
2. Set the following options to Yes:
   • Merge CSS Files
   • Minify CSS Files
3. Click Save Config.

Flush the cache

After saving, Magento will prompt you to clear the cache. Click Cache Management in the notification bar and flush the cache to apply your changes.

Further optimisation with Cloudflare

As an alternative - or complement - to Magento's built-in tools, you can use Cloudflare to handle minification of JS, CSS, and HTML. This can be particularly useful if Magento's own merging causes issues on your store.

A common approach is to use Magento for merging and bundling, and let Cloudflare handle minification. Kualo is a Cloudflare optimised partner, so your site can also benefit from Cloudflare's CDN and Rocket Loader features.

Before and after comparison

The screenshots below show the difference in page load performance between a default Magento 2 store and one with merging and minifying enabled.

Before:

After:

If you need any help with this, please contact us.