Measuring performance in JavaScript: tips & tricks from EPAM Anywhere experts

Senior Software Engineer

Today, front-end applications are the face of any business. Here our clients get the very first impression of our services, making fast decisions for long relationships. Everything here should work as intended; every touch should be responsive, every moment – meaningful.

To make our websites client-centric and attractive, we employ JavaScript, and that's where the shoe pinches. While making an application dynamic and engaging, JS also makes it heavier for browsers to load. That's why it is vital to stay on top of what is going on inside the JavaScript code.

Our Senior Software Engineer with 5+ years of experience, Aleksandr, uncovers insights on how to measure front-end application performance with the help of browser and JS tools. So roll your sleeves up; we're about to start.

DevTools Performance

The ace up your sleeve. DevTools Performance is a powerful tool that allows studying the application's behavior and analyzing its Response, Animation, and Idle stages. Here you can:

• record each event that has happened after the page had been loaded or during the user interaction
• lookup the FPS, CPU, GPU load, and much, much more
• dive into the details of events that are happening on your page

To get all the precious insights, you need to use a Performance Profiler – a powerful feature that will single-handedly uncover all the darkest corners of your application. If you haven't got a chance to use it yet, you'll be surprised how easy it is. Here's what you need to do:

• Open Chrome, preferably in incognito mode. It ensures that all the extensions installed in your browser won't impact your page's run.
• Load the page you want to analyze.
• Go to DevTools and press Command+Option+I if you're using macOS or Control+Shift+I on Windows and Linux.
• Switch to the Performance panel, at the upper-left corner click on the Start profiling and reload page button, and see the magic happens!

When pressing the button, you're instructing Profiler to analyze your page and generate a performance report. For the first time it's easy to get overwhelmed by the amount of information Profiler generously provides you with. But give it a try, and soon you'll appreciate how detailed and structured it is.

Here you'll find the data on what was going on while your page was reloading. On a timeline are FPS, CPU load, networking, and screenshots that show the website's state in dynamics. Expand the Main section, and you'll see all the events that happened at each moment of the profiling. The y-axis shows the call stack of events, while the x-axis – how long it took for each event to happen. For a better visibility, Profiler colors with red the events that took too long, so you can always focus on what you need to optimize first.

React Developer Tools

It's a browser extension offered by Facebook that augments DevTools enabling you to inspect React components, checking their call stack, and measure performance in a flame chart.

After installing the extension, you'll find Components and Profiler tabs with a React icon in your DevTools. Just go to the Profiler page, press the record button and wait for the result.

React DevTools come as an extension for Chrome and Firefox and also as a standalone Node package. You can check the documentation to find out all the perks the library provides you with.

DevTools Lighthouse

Another great tool from Google Chrome that helps to improve the quality of the applications. It generates a detailed report that assesses the page against performance, accessibility, SEO optimization, and the best practices of web development.

Here you'll find valuable insights on the metrics like:

• First Contentful Paint, which is when the browser renders the very first bit of the content on the page
• Speed Index
• Time to Interactive or how long it takes for the page to become fully interactive
• Cumulative Layout Shift that shows visual stability of the page

Besides, Lighthouse tries to be helpful and gives you recommendations on optimizing your application, making it faster and even more user-centric.

Other tools to measure application performance

Automated tools are great, but sometimes you want to get your hands dirty with the codebase itself to gain even more control over your measurements. Well, JavaScript has everything you need. Let's take a quick look at some of the JS tools you can use.

PerformanceAPI

source: developer.mozila.org

Provides you with a handful of methods you can spread across your application and make assessments:

• performance.mark() – creates a timestamp in the browser performance entry buffer with the name given as an argument. You can then retrieve the mark using one of the getEntries() methods.

• performance.measure() – allows measuring the time between two events. The method receives three arguments – the name of the measurement and two marks it will measure between.

PerformanceObserver

Performance API also comes with the PerformanceObserver interface that allows you to subscribe to performance event types and receive notifications when they appear in a timeline. You can specify such events through the observer's callback function and then send all the data it returns to any monitoring system or on the backend to build a metric with Grafana or any other visualization tool.

Every event that your observer subscribes you to will be logged in the console. Such an entry has a name, type, and time measures – startTime and duration.

console.time and console.timeEnd

So simple and yet so powerful. Just wrap anything you want to measure inside these two functions:

and they will print in the console the number of milliseconds taken to run the code between them:

The word of caution, though – console.timeEnd may slow down your code as it writes into your console. So the results might be incorrect.

console.timeStamp()

Adds a marker to the browser's DevTools > Performance, letting you match this marker in your code with the events recorded in the timeline during the profiling. Receives the label as an argument to show it alongside the marker.

To sum up

There are many ways to monitor and measure the performance of your JS application. Every tool we described here has much more to offer and deserves its own article. We hope that our tips will be a good starting point before delving deeper into JavaScript performance measurement.