DocumentationCommerceImplementation Playbook

[PaaS only]{class="badge informative" title="Applies to Adobe Commerce on Cloud projects (Adobe-managed PaaS infrastructure) and on-premises projects only."}

Optimize resource files

Last update: Fri Mar 27 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Experienced
  • Developer

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 minify and bundle files.
  • 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.

IMPORTANT
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.

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 > Settings > Configuration > Advanced > Developer > CSS Settings.

Using the command line

To enable CSS merging in Adobe Commerce on cloud infrastructure:

  1. Run this command locally:

    code language-bash 
    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:

    code language-bash 
    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:

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

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

Bundle JS files

You can enable bundling in the Commerce Admin: Stores > *Settings > Configuration > Advanced > Developer > JavaScript Settings.

NOTE
Merging and bundling can’t be enabled at the same time.

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
WARNING
We do not recommend enabling Merge JavaScript Files. This setting was designed only for synchronously-loaded JavaScript in the HEAD section of the page and can cause bundling and RequireJS logic to work incorrectly. It’s kept for backward compatibility only and provides no performance benefit when HTTP/2 is enabled.
If you have Merge JavaScript Files enabled and encounter issues, try disabling it before applying any patches. See ACSD-67908 if you can’t disable merging.

Additional information

recommendation-more-help
754cbbf3-3a3c-4af3-b6ce-9d34390f3a60