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

To optimize resource files:

  1. On the Admin sidebar, click Stores.

  2. Under Settings, choose Configuration.

  3. In the panel on the left under Advanced, choose Developer.

  4. To optimize CSS files, expand the CSS Settings section. Then, do the following:

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

    CSS Settings

  5. To optimize JavaScript files, expand the JavaScript Settings section. Then, do the following:

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

    JavaScript Settings

  6. To minify PHTML template files, expand the Template Settings section.

    • Minify Html—Set to Yes.

    Template Settings

  7. When complete, click Save Config.