Have you ever used WebStorm? What about PHPStorm, or, in fact, any of the IDEs in the JetBrains suite? They are an impressive collection of IDEs packed with features -- an integrated terminal, local history and VCS integration, "intelligent" imports, and much more.
But, does this feature-bloat come at a price? Absolutely.
The performance of WebStorm, and the other JetBrains IDEs, pales in comparison to the lighter text editors that are popular in the web community. Visual Studio Code and Atom come to mind.
Fear not! There are solutions.
But first, let's take a step back for those who aren't familiar with the IDE.
What is WebStorm?
WebStorm is a popular, powerful web development IDE. It is one of a larger collective of IDEs developed by JetBrains - formerly known as IntelliJ. These IDEs aim to offer the ultimate development environment for popular coding languages.
Other JetBrains IDEs include PHPStorm for PHP, IntelliJ IDEA for Java, PyCharm for Python, and ReSharper for C# (as a 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 optimisations explored in this article can be transferred to other JetBrains IDEs.
But, as we mentioned, although WebStorm is 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.
Let's explore how to increase the load-time and performance of WebStorm by tweaking the out-of-the-box settings.
Optimising WebStorm's performance
Setup Config Files
We’re going to start by customising a few settings within the WebStorm directory.
But first, in order to customise WebStorm settings, we need to create some configuration files. We'll create two config files: idea.properties and webstorm.vmoptions.
To create these files, open WebStorm and go to Help.
Select Edit Custom Properties…. A dialog will prompt stating that the idea.properties file does not exist.
Click Yes to create it. The file will open. Now you can add the config settings. This file is used for customising WebStorm properties.
To create the other file, go again 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. Now you can add the config settings. This file is used for customising WebStorm Virtual Machine options.
For future reference, these files can be found in the following directories:
Windows 7 / 8 / 10 - <SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION>
OS X / macOS - ~/Library/Preferences/<PRODUCT><VERSION>
Improve the Performance
Now that our config files are setup, we can change WebStorm’s settings to optimise performance.
First, let's change some options within the webstorm.vmoptions file.
Open the newly created file, select all of the options and replace them with the following snippet:
-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.
To do so, add the following line to your idea.properties file:
editor.zero.latency.typing=true
We’re going to move on to generally optimising the usage of WebStorm by de-selecting unnecessary features. Doing so will reduce feature-bloat and increase system memory.
Appearance and Behaviour
To start, let’s disable automatic update checking and statistic sending within 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, de-select Automatically check updates for…
Next, select the menu 'Data Sharing' from the System Settings and de-select Send usage statistics.
Editor
Now, let’s change some settings in the Editor preferences.
Within Preferences, go to the Editor tab and select Live Templates. De-select any templates that you do not use.
Emmet is a IDE plugin that helps improve HTML and CSS development workflow.
It's a great plugin, but it comes with many options that go unused and waste valuable system memory.
To remove these unnecessary options, go to the Editor tab and select Emmet. Browse through the options for CSS, JSX and HTML, and de-select any options that you don't use.
Intentions is a powerful feature of the JetBrains application family. It suggests solutions to problems that it detects on-the-fly as you code.
However, by default WebStorm has every option selected within the Intentions preferences window. It's unlikely that you will use every technology/language listed, so de-select the options that you do not use.
To deselect the options, go to the Editor tab, select Intentions. Again, de-select any non-applicable languages and technologies.
Plugins
Almost there. Next, let’s fiddle with our plugins.
Within Preferences, go to the Plugins tab.
By default, all of the native plugins will be enabled.
It is unlikely that you will make use of them all. Scroll through and de-select any plugins that are not applicable to the languages and technologies that you use.
Directories
During startup, WebStorm loads every directory (folder) within a project. However, some of these directions, particularly vendor directories like the node_modules directory, may never be touched within WebStorm. Loading these directories wastes valuable resource.
To disable un-used directories, within Preferences, go to Directories and set any directories that are not edited within WebStorm as Excluded.
Languages & Frameworks
Within Preferences go to Languages & Frameworks > JavaScript > Libraries and de-select any libraries that are unused.
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.
Tools
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 de-select all browsers except your browser of choice.
Conclusion
So, that's it.
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.
Top comments (9)
Adam, I have to say thank you. You officially saved my miserable life with information about the
editor.zero.latency.typingproperty. It repaired my custom keys remappings that abruptly stop working correctly for the WebStorm only.I spent several days in agony before decided to switch to VSCode until the miracle. And now I could stop trying to configure VSCode to be something near the WebStorm. Thanks again.
Hey Alexander, you are very welcome my friend. Always a pleasure to save someone from misery!
Hello Adam,
You can change:
Next, select the Usages Statistics tab from the System Settings and deselect Allow sending usage statistics to JetBrains s.r.oTo:
Next, select the menu 'Data Sharing' from the System Settings and deselect Send usage statisticsThanks
hopefully they will take this seriously youtrack.jetbrains.com/issue/WEB-6...
Is this still good for version 2020.1.1 ?
After just going through this myself, I'd say yes! There are a few things that appear to be outdated:
editor.zero.latency.typing=trueis now enabled by default since 2017.1There is an issue with 2020.1.* that causes major performance issues for many Mac users. I can confirm that changing the default value of Preferences -> Appearance & Behavior -> Appearance -> Use custom font seems to resolve the issue. 😅
web storm performance is getting worse over the years
Is this still valid in 2020 Webstorm 2019.3?
As far as I know, yes!