The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

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

  • 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:

How to Enable Merge CSS, JavaScript

  • 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:

How to Enable Merge CSS, JavaScript

  • 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

Image Description
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.

Looking for Magento Development Company?

8+ years of experiences in e-commerce & Magento has prepared us for any challenges, so that we can lead you to your success.

Get free consultant
development service
x

    Explore Our Products:

    People also searched for

    Subscribe

    Stay in the know

    Get special offers on the latest news from Mageplaza.

    Earn $10 in reward now!

    Earn $10 in reward now!

    comment
    iphone
    go up