Optimize resource files

For a more responsive Commerce site, optimize CSS and JavaScript (JS) resource files and eliminate render-blocking resources.

• Optimize CSS and JS files—Reduce the time required to load CSS and JavaScript (JS) files by configuring Adobe Commerce to merge, minify, and bundle separate files into a single file.
• Eliminate render-blocking resources—Consider delivering critical JS and CSS features inline and deferring all non-critical JS/CSS styles. For guidance, see Eliminate render-blocking resources.

Affected products and versions

All supported versions, 2.3 and later of:

• Adobe Commerce on cloud infrastructure
• Adobe Commerce on-premises
• Magento Open Source

Merge or minify CSS files

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.

Do not merge or bundle files if your deployment uses HTTP/2. HTTP/2 downloads static files asynchronously. Browsers must download an entire merged file before processing the file contents.

Using Admin

To enable CSS merging or minification, go into the Admin > Stores > Setting > Configuration > Advanced > Developer > CSS Settings.

Using the command line

To enable CSS merging in Adobe Commerce on cloud infrastructure:

1. Run this command locally:

   bin/magento config:set --lock-config dev/css/merge_css_files 1
   

2. Commit changes to the app/etc/config.php file and redeploy.

To enable CSS minification in Adobe Commerce on cloud infrastructure:

1. Run this command locally:

   bin/magento config:set --lock-config dev/css/minify_files 1
   

2. Commit changes to the app/etc/config.php file and redeploy.

Minify JS files

Using Admin

On the Admin sidebar, go to Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

Using the command line

To enable JS minification in Adobe Commerce on cloud infrastructure:

1. Run this command locally:

   bin/magento config:set --lock-config dev/js/minify_files 1
   

2. Commit changes to the app/etc/config.php file and redeploy.

Merge and bundle JS files

You can turn on merging or bundling in the Commerce Admin (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

Additional information

• Client-side optimization settings
• User Guide: Optimizing resource files
• Frontend Developer Guide: CSS merging, minification, and site performance
• Advanced JavaScript bundling