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.

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 the CSS Settings section and do the following:

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

   CSS Settings

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

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

   JavaScript Settings

5. To minify PHTML template files, expand the Template Settings section and set Minify Html to Yes.

   Template Settings

6. When complete, click Save Config.