You get an email from a boss or client-- "The website is running slow." You have no idea what could be causing this, but you know you need to fix it, and fast. Let's take a look at the tools and techniques available that allow us to dig into these nebulous issues, and allow us to pinpoint a more exact cause. Luckily, most of these tools have been made available by nearly all modern browsers, so we don't have to install any new software or complicate the setup.
Browser developer tools have been evolving at a high speed over the last few years, driven by the advent of more robust web applications. But these tools are seen mostly as a way to find issues with CSS and JavaScript, and debug running code. However, there are tabs in these tools that allow you to debug performance issues, such as viewing network calls, memmory usage, and code run time. These tools will help us find and diagnose our nebulous performance problems.
In the performance tab, you're able to record a segment of time in which you interect with the app, and be presented with a profile of the time used for each code task. This information can help you determine if your slowdown is a code issue-- if you're requiring a lot of redraws, for instance, this tab will show it clearly in its drill-downs and flame graphs.
This tab will show you the network calls that your application or page is making, and the time it takes to complete them. This tab can help you diagnose issues with external API calls, like analytics, that can be slowing down your site.
The memory tab will allow you to run profiles similar to the performance tab, but it shows memory usage by group: the DOM, JavaScript objects, etc. This tab will help you diagnose memory use issues, which include memory leaks.
If this feels like a lot of information to gather and sift through, that's because it is! Luckily, third-party tools like LogRocket can aid you in this search. These tools allow you to define parameters to search on, such as a certain threshold of memory use or a certain page load time. They can also help with issues that can't be replicated on your machine or setup by showing you data from your user's perspective.
Keeping tabs (eh?) on your performance is an important part of building any robust web application. Knowing what tools are at your disposal to track and diagnose performance issues can alieviate headaches and create a better development cycle for you along with a better user experience for your users.
