Improve web app performance

9 tips for developers to improve JavaScript performance significantly

Kevin Haynes
© Shutterstock / bepsy

The balance between the readability of the code and its optimization should be maintained at all times. You should never compromise the performance of an application over its development time. Rushing through the process for the sake of achieving faster time-to-market will make matters even more complicated.

Performance is a deciding factor in the success (or failure) of any web application. Frequent web crashes and long waiting times are annoying for visitors.

Kissmetrics found that:

  1. 47 percent of visitors expect a website to load in less than 2 seconds.
  2. 40 percent of visitors leave the website if the loading process takes more than 3 seconds.

I will tell you 9 tips that you can use to notice a multi-fold improvement in the performance of your application. Let’s get started with them.

Remove unused JavaScript

It not only reduces the transmission time but also the time that is taken by the browser to analyze and compile the code. You should consider the following points while removing unused JavaScript:

  1. If you detect a functionality that is not being used by users, remove it altogether along with its associated JavaScript code.
  2. If a library was included by mistake and is not necessary, eliminate it as well.

Cache in the browser

You can cache in the browser in two ways. The first option is to use the JavaScript Cache API by installing a service worker. Second, you can use the HTTP protocol cache.

SEE ALSO: Small embeddable JavaScript engine with QuickJS

Developers use scripts to provide access to a certain object. By storing such objects inside the memory of a user-defined variable, and using a variable in subsequent references to that object, you will notice an immediate improvement in performance.

Avoid memory leaks

The Java Virtual Machine (JVM) continuously analyzes an application during its lifecycle and detects objects that are not in use anymore. These objects are collected as garbage. A memory leak is a situation when the JVM is unable to recognize the unused objects, thus leading to the accumulation of garbage in the system.

During a memory leak, the loaded page will gradually occupy all of the available memory of the device and severely affect the performance.

In Chrome Dev Tools, memory leaks can be analyzed by recording a timeline in the Performance tab.

Establish well-defined environments for testing

As a developer, you need to test the applications before they go live, and testing the code requires a set of well-defined environments.

It is impractical to do performance tests and optimizations for all versions of all Javascript engines. On the other hand, you will get partial results if you do the testing in a single environment.

So, you should go a step further to establish well-defined testing environments, so that the application does not suffer from poor performance later on.

Delay the unnecessary load of JavaScript

Users love web pages or apps that load quickly but they don’t access all the features during the initial loading process. Right?

If certain functions require user’s action for execution (e.g. clicking on an image, switching tabs, etc.), the loading of these functions can be deferred to a later time.

The delayed functionality can be loaded once the initial load of the page is complete. According to the RAIL model, Google recommends that this deferred load be done in blocks of 50ms so that the user’s interaction with the page remains unaffected.

Prioritize access to local variables

JavaScript always searches for a variable locally and then expands its scope progressively to global variables. Saving variables in a local scope helps JavaScript to access them faster.

Keep in mind that you need to specify the scope and also define the function scope by preceding each variable with let or const to define the current scope. This will prevent the look-up and also speed up the code.

Use web workers to execute time-consuming codes

We come across many codes in our programming careers that take a lot of time to execute, don’t we? Running such scripts with the main thread (the UI of application) will slow down the application greatly.

SEE ALSO: Ditch the old way and create better analytics in JavaScript with Cube.js

Web Workers can run a script operation in a background thread and perform critical processes in a separate thread, thus ensuring that the main application is not blocked or slowed down in the process.

Save repetitive DOM items on a local variable

DOM stands for Document Object Model (DOM). It is an application programming interface (API) that defines the logical structure of documents and the way a document is accessed and manipulated.

Accessing the DOM consumes a lot of time. If you know that an element needs to be read several times, save it in a local variable.

But keep in mind: If you want to remove the value of the DOM later, the value of the variable should be set to “null” so that it does not cause any memory leak.

Make use of tools to detect issues

Lighthouse is one of the best tools to analyze the performance of web pages. It helps you to audit performance, accessibility, best practices, and SEO.

Google PageSpeed can understand a website’s performance optimizations and areas for potential improvement. The components can identify faults in a website’s compliance with Google’s Web Performance Best Practices, make adjustments automatically.

The More Tools option in Chrome can show you the memory and the CPU used by each tab. Furthermore, the ‘Performance’ view in either Firefox or Chrome can be used to analyze advanced metrics.


Kevin Haynes

Kevin Haynes is a Content Strategist at Brainvire a leading Node.js development services provider. His passion lies in delivering valuable content to his readers. He explores topics mainly related to web development that includes website design, digital marketing, start-ups business and much more.

Inline Feedbacks
View all comments
2 years ago

“Remove unused JavaScript”. Why don’t you just recommend Webpack or smth similar? Those tools also provide another feature to make your code run faster: A code compressor/mangler (like Terser).

“The Java Virtual Machine (JVM) continuously analyzes”. Are you serious?! Now I’m not sure anymore what this article is about.

“Be the first to share this article with your network!”
No. Thanks.

Low quality article
Low quality article
2 years ago

Yeah yeah, JVM

2 years ago

Ummm… You do realise Java and JavaScript are totally different things right? The JVM garbage collector isn’t going to help you out here.

John Doe
John Doe
2 years ago

No comment.