Long & Hard JavaScript’s Performance Evaluation

Start-up Performance of JavaScript

Okay, so web developers, you know this hard truth very well that your one mistake and you will end up with a bloating website. The transmission of data via wire is a totally different thing, then the transmission of web content. To load a webpage browser have to parse, interpret and run numerous scripts. And, this is done by JavaScript bundles.

But, this process of compiling and parsing takes some time which means the slow speed of your website or app. So, in this post, we will figure out the reason behind slow startup performance of JavaScript and find out methods to improve it.

What Slows The Performance of JavaScript?

In the beginning, parsing, compiling and executing scripts are the main functions of JavaScript. And, the time taken to complete all these tasks is equal to the delay in loading website. It can delay the time of the user to interact with the webpage.

This delay can annoy your user and make them leave your site. Because in the startup performance is the only thing that can bind user with you. The slow performance isn’t the problem for you, the big companies like Facebook and Wikipedia constantly works their ass off to get high website performance.

The major fact that determines the performance of webpage in this smartphone world is the power of users smartphone. The performance will always be different in high-end mobile like iPhone as compared to the regular like Moto G. But, as a developer, you should always be ready for high end mobile as well as regular mobile.

Data on JavaScript’s Parse & Compile Time

“I’m not Facebook” Well if you are thinking that you don’t have a large database as Facebook and surely your parse and compile time will be small. But, that’s not the case folks, as according to a study conducted in different production sites libraries and frameworks like React, Angular, Ember, and Vue.

The websites are tested via regular WebPageTest, so you can redo test yourself if you like. But, that’s not the point, the main point here is to analyze the insight of the study.

  • Apps became interactive on the desktop in 8 seconds using cables whereas in a smartphone it takes 16 seconds on the average 3G network.
  • Apps mostly spend 4 seconds in a startup on the desktop.
  • On mobile devices, parse time is 36% higher than the desktop.
  • Not, every user is sending higher JavaScript bundles, but the study shows some sites are sending around 10MB Js bundles.
  • Script size isn’t everything, as it doesn’t increase parse and compile time. But, indeed, smaller JavaScript means fast loading website. So, it means you can survive with large JavaScript, but having small JavaScript is always good.

Tools To Measure Parse Time

You can easily measure your website’s parse time by using following tools:

  • Chrome DevTools
  • Chrome Tracing
  • WebPageTest
  • User Timing
  • DeviceTiming

What Can We Do To Reduce Parse Time?

Okay, so if you are in hurry and quickly wants to reduce parse time of your website for fast loading. Then, you can take following steps immediately:

  • Ship less JavaScript. For a quick fix, you can send less JavaScript to the server which will significantly reduce the parse time of the website.
  • Use Code splitting. Shop only those codes which user need to load and lazy load the rest. This will be very beneficial in reducing parse time. Patterns like PRPL encourage this type of route-based chunking, now used by Flipkart, Housing.com, and Twitter.
  • Script Streaming. V8 have told developers to use `async/defer` to opt into script streaming for parse-time improvements of between 10ā€“20%. This allows HTML to detect the work early and this way document loading won’t be blocked by the server. Loading larger bundle earlier has lots of advanced like there will be only one streamer thread.
  • Measure Parse Cost of Dependencies. You should measure the parsing cost of Dependencies such as libraries and framework. According to Paul Lewis, ” A good way to measure start-up costs for frameworks is to first render a view, delete and then render again as this can tell you how it scales. “

Conclusion

Startup performance matters the most. The increase parse time and slow execution can be one of the biggest hurdles for your website boost up. So, try to find the parse, compile and execution time of your time using different tools. And, took productive steps to improve it as well.

As performance always matter.

Send a Message