In this article, we are going to explore how to make WebStorm load and perform faster than ever before.
WebStorm is a very popular, very powerful web development IDE and forms part of a larger collective of IDEs developed by JetBrains - formerly known as IntelliJ - aimed at offering the ultimate development environment for the most popular coding languages.
Other JetBrains IDEs include PHPStorm (PHP), IntelliJ IDEA (Java), PyCharm (Python) and ReSharper (C#, Visual Studio extension), among others. Even Android Studio, which is technically a Google IDE, runs on the IntelliJ platform. With that in mind, most of the customisation discussed in this video can be transferred to all of the modern JetBrains IDEs.
Although WebStorm is easily one of the most powerful IDEs available, it’s certainly not the most performant. In fact, on older machines, it can be a machine killer. Its startup time and general speed is sluggish compared with the likes of Atom, Visual Studio Code or Sublime.
So, in this tutorial we’re going to look at how we can vastly improve the performance of WebStorm by tweaking the out-of-the-box settings.
Without further ado, let’s crack on.
We’re going to start by customising a couple of settings within the WebStorm directory.
To customise WebStorm settings, we need to create some configuration files. We’re going to create a two config files called
webstorm.vmoptions, to create these files:
Open WebStorm and go to Help and select Edit Custom Properties…, a dialog will prompt stating that the
idea.properties file does not exist. Click Yes to create one. The file will open, and now you can begin to add config settings. This file is used for customising WebStorm properties.
Again, go to Help and select Edit Custom VM Options..., a dialog will prompt stating that the
webstorm.vmoptions file does not exist. Click Yes to create one. The file will open, and now you can begin to add config settings. This file is used for customising WebStorm Virtual Machine options.
For future reference, this file can be found in the following directories:
Windows Vista / 7 / 8 / 10 -
<SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION>
OS X / macOS -
Now that our config files are setup and ready, we can begin changing WebStorm’s settings to optimise the application’s performance.
We’re going to start with changing some options within the
webstorm.vmoptions file. Open the newly created file and select all of the options, replace them with:
-Xms1024m -Xmx1536m -XX:MaxPermSize=1024m -XX:ReservedCodeCacheSize=512m -XX:+UseCompressedOops
Next, we are going to remove IDE latency using an experimental property called
zero-latency that was introduced in 2015. Add the following line to your idea.properties file:
We’re going to move on to generally optimising the usage of WebStorm by deselecting features that are unnecessary which will in turn reduce software bloat and increase system memory.
To start, let’s disable automatic update checking and statistic sending with the Appearance and Behaviour preferences.
To do so, go to Preferences and select Appearance & Behaviour, then go to System Settings and select the Updates tab. From here, deselect Automatically check updates for…
Next, select the Usages Statistics tab from the System Settings and deselect Allow sending usage statistics to JetBrains s.r.o.
Now, let’s change some settings in the Editor preferences.
Within Preferences, go to the Editor tab and select Live Templates. Deselect any templates that you will not be using.
Emmet is a IDE plugin that helps improve HTML and CSS development workflow, but it comes with many options that go unused and waste valuable system memory. To remove unnecessary options, within the Editor tab select Emmet and browse through the options for CSS, JSX and HTML, removing any unused options.
Intentions is a powerful feature of the JetBrains application family, it suggests solutions to problems that it detects on the fly as you write your code. However, by default WebStorm has every option selected with the Intentions preferences window, and it is unlikely that you will use every technology/language listed, so deselect the options that you do not use. To deselect the options, within the Editor tab, select Intentions, and again deselect any non-applicable languages and technologies.
Almost there. Let’s fiddle with our plugins next.
Within Preferences, go to the Plugins tab. By default, all of the native plugins will be enabled. It is very unlikely that you will made use of them all, so scroll through and deselect any plugins that are not applicable to the languages and technologies that you use.
WebStorm spends time loading in all the project's directories (folders), though some directions, such as the
node_modules directory or a docs folder, may not be touched within WebStorm. Loading these directories wastes valuable resource.
To disable directories, within Preferences go to Directories and set any directories that are not edited within WebStorm as
If you are not using Compass to generate CSS files from your Sass, ensure ‘Enable Compass support’ is not enabled. To do so, go to Languages & Frameworks > Compass.
The Web Browsers section is used to quickly launch your project into the enabled browsers. If you do not use this feature, disable it. To do so, within Preferences go to Web Browsers and deselect all browsers except your browser of choice.
So, now we’ve managed to clean up WebStorm, you should find a notable increase in start-up time and general performance so you can focus on the stuff that matters; web development.