This page has moved to Adobe Experience League and will be redirected soon.
Optimize CSS and JS files in Adobe Commerce
Optimize CSS and JS files in Adobe Commerce
This article provides best practices for CSS and Javascript (JS) file optimization in Adobe Commerce.
Issue by affected products and versions
The time it takes to load CSS and Javascript (JS) files can be reduced by merging, minifying, and bundling separate files into a single file:
- JS merging is available for all versions of Adobe Commerce on-premises and Adobe Commerce on cloud infrastructure, including the currently supported version 2.3 (as of July 2020).
- JS bundling is available for all versions of Adobe Commerce on-premises and Adobe Commerce on cloud infrastructure, including the currently supported version 2.3 (as of July 2020).
- CSS merging and minification are available for all versions of Adobe Commerce on-premises and Adobe Commerce on cloud infrastructure, including the currently supported version 2.3 (as of July 2020).
Best practices
How to merge or minify CSS files?
NOTE
Adobe Commerce on cloud infrastructure always runs on Production mode and it is not possible to set it otherwise, therefore you must use the command line method to enable merging, minifying, and bundling.
Using Commerce Admin UI:
To enable CSS merging or minification, go into the Admin > Stores > Setting > Configuration > Advanced > Developer > CSS Settings.
Using command line:
To enable CSS merging in Adobe Commerce on cloud infrastructure:
- Run this command locally:
bin/magento config:set --lock-config dev/css/merge_css_files 1
- Commit the app/etc/config.php file and redeploy.
To enable CSS minification in Adobe Commerce on cloud infrastructure:
- Run this command locally:
bin/magento config:set --lock-config dev/css/minify_files 1
- Commit the app/etc/config.php file and redeploy.
How to minify JS files?
Using Commerce Admin UI:
On the Admin sidebar, go to Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.
Using command line:
To enable JS minification in Adobe Commerce on cloud infrastructure:
- Run this command locally:
bin/magento config:set --lock-config dev/js/minify_files 1
- Commit the app/etc/config.php file and redeploy.
How to merge and bundle JS files?
- You can turn on merging or bundling in the Commerce Admin UI (merging and bundling cannot be enabled at the same time): Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.
- You can also enable Adobe Commerce built-in bundling (basic bundling) from the command line:
php -f bin/magento config:set dev/js/enable_js_bundling 1
Review the following links: