Magento 2: How to improve Magento 2 speed for development on local machine

▼

In this article we gathered the most important performance tips, which will help you to improve Magento 2 speed on your local machine. After implementation of the performance tips, Magento 2 will load much faster. You will be able to work in normal way, without long page reloading.

In short, this is a list of speed improvements required for normal development work with Magento 2. I hope these tips will make your life better :)

1. Disabling of the CSS & JS merge.

If your Magento 2 pages loading for minutes, in this case we recommend to disable the CSS & JS merge.

In some cases, after disabling of the mentioned settings, the Magento 2 speed on local machine will be much better, here is an example:

2. Enable Magento 2 cache.

Another recommendation which will improve the Magento 2 load time is to enable the Magento 2 cache mechanism.

After cache enabling, the Magento 2 load time will significantly decrease.

3. GULP integration in Magento 2

The main advantage of GULP over GRUNT, is the better speed of the CSS preprocessors.

Also, by default the GULP have the BrowserSync feature, which allows to load only changed CSS files into browser, not the whole page (which is definitely faster page generation method).

The GULP loading statistics:

The statistics above was gathered using the "blank" Magento theme.
Of cource the load time depends on project complexity, files size of the LESS engine, local machine hardware configuration and other factors.

In order to enable GULP for your project, we recommend to use the ready made GULP configuration for Magento from the GitHub, the link: https://github.com/SnowdogApps/magento2-frontools

We created a short instruction on how to install and use it:

Step 1. Upload the GULP to the "tools" folder in the project root (you can rename it as you want it).

Step 2. The next step, is the configuration of the "configs/themes.json" file.

In this file there is an information about Magento themes in current installation. For example, if your theme name is "my_custom_theme", in this case you need to extend the configs/themes.json configuration file with the following code:

"my_custom_theme": {
 "src": "../app/design/frontend/astrio/my_custom_theme",
 "dest": "../pub/static/frontend/astrio/my_custom_theme",
 "locale": ["en_US"],
 "lang": "less",
 "default": true,
 "area": "frontend",
 "vendor": "astrio",
 "name": "my_custom_theme",
 "files": [
   "css/styles-m",
   "css/styles-l"
 ]
}

Step 3.

You need to configure the "configs/browser-sync.json" file. In this file you need to define the domain name of your project. For example for "http://myproject.loc/" domain it will be like this:

{
 "proxy": "myproject.loc"
}

The configuration is complete. Now all you need is to execute needed console commands inside the "<project_root>/tools folder" according to your work flow. Below you will find a list of useful commands:

• browser-sync - Run BrowserSync - it's much better and easier to use than "LiveReload"
  
  
• clean - Removes /pub/static folder
  
  
• default - type "gulp" to see this readme in console
  
  
• deploy - Wrapper for bin/magento dev:source-theme:deploy - only for default themes
• --theme name - Deploy single theme
• dev - Runs browser-sync and watch tasks
• --theme name - Process single theme
• --maps - Toggles source maps generation
• --prod - Production output - minifies styles 
• styles - Use it to manually trigger styles processing pipeline
• --theme name - Process single theme
• --maps - Toggles source maps generation
• --prod - Production output - minifies styles
• eslint - Watch and run eslint on specified JS file
• --file fileName - You have to specify what file you want to lint
• release - Clean pub/static, deploy all necessary files and compiles everything with --prod flag. Makes code production ready.
  
  
• watch - Watch for styles changes and run processing task
• --theme name - Process single theme
• --maps - Toggles source maps generation
• --prod - Production output - minifies styles

During the time these commands could be changed, and new commands could be added, so stay tuned and periodically check the GitHub: https://github.com/SnowdogApps/magento2-frontools