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
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:
-
Run this command locally:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Commit changes to the
app/etc/config.phpfile and redeploy.
To enable CSS minification in Adobe Commerce on cloud infrastructure:
-
Run this command locally:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Commit changes to the
app/etc/config.phpfile 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:
-
Run this command locally:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Commit changes to the
app/etc/config.phpfile 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