Optimizing Resource Files

The time it takes to load resource files can be reduced by merging and bundling files, and by minimizing code.

  • Merging combines separate files of the same type into a single file.
  • Bundling is a technique that groups separate files in order to reduce the number of HTTP requests that are required to load a page.
  • Minification removes spaces, line breaks, and comments, but does not affect the functionality of the code. Because minimized files cannot be edited, the process should be applied only when you are ready to go into production.

By default, Magento does not merge, bundle, or minimize files, and the project developer should determine which file optimization methods should be used.

See Magento Optimization Guide in the developer documentation.

CSS and JavaScript files can be optimized in Developer Mode only.

File Type Supported Operations
CSS Files MergeMinify
JavaScript Files MergeBundleMinify
Template Files Minify

Optimize resource files

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel, expand Advanced and choose Developer.

  3. To optimize CSS files, expand Expansion selector the CSS Settings section and do the following:

    • Set Merge CSS Files to Yes.
    • Set Minify CSS Files to Yes.

    Advanced configuration - CSS settings CSS Settings

  4. To optimize JavaScript files, expand Expansion selector the JavaScript Settings section and do the following:

    • Set Merge JavaScript Files to Yes.
    • Set Minify JavaScript Files to Yes.

    Advanced configuration - Javascript settings JavaScript Settings

  5. To minify PHTML template files, expand Expansion selector the Template Settings section and do the following:

    • Set Minify Html to Yes.

    Advanced configuration - template settings Template Settings

  6. When complete, click Save Config.