If you already know that you're calling a specific function a lot, then you should test the performance of it. Generally, you can use easy online tools to quickly check the performance of a function. Then, you can make some optimizations and recheck it.
My favourite tool to do this is perf.link. You can check different functions at the same time, and it will show you how many times it can run in a second.
This is a good way to optimize performance bottlenecks. But how do you the performance bottlenecks in your app? This is where the browser DevTools come into play.
You can use the DevTools in any browser to do performance tests. But, I’m going to use chrome for this post because it has the most in-depth measurement tools. Chrome recently added the new performance insights panel which is easier to use than the old performance tab.
Using the chrome performance insights panel
To open the chrome insights panel, first open the Dev Tools (Ctrl + Shift + I). If you don’t see the Performance Insights panel next to the other tabs (Elements, Network, etc), you can search for it using the command palette (Ctrl + Shift + P).
You can measure the page load performance with this or measure how quickly your app is responding to user interaction.
Measuring Page Load Performance with the Performance Insights Panel
Before you measure the page load performance, you'll want to set up the throttling settings at the top. This allows you to simulate the page load for slower CPUs or slower network connections.
You can also add your own custom network throttling profile to make it closure to your user's network.
This github gist contains the different profile settings for the different network connections.
After setting up the CPU and network throttling, just click on the “Measure page load” button. This will automatically reload the page, start measuring the page load and stop when it’s done.
This will show you a recording of the page-load, with performance related events and insights on the right.
You can click on the insights like Long task, Layout shift, etc to learn more about the issues. It will give you a link to learn how you can fix those issues too.
This is especially helpful for you to debug issues related to Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). These metrics are a part of Core Web Vitals. You can read more about them in my guide to optimizing core web vitals.
You can use this panel to figure out exactly which element is causing the most layout shifts. It will also tell you how much it’s impacting the CLS score. This will then allow you to locate the element in the DOM and prevent the shift from happening.
Additionally, You can click on the Largest Contentful Paint event to figure out which part of the LCP process is taking the longest. This will let you focus on the part that needs the most attention. It also gives you some helpful links to fix some of those issues.
Debugging common performance issues using DevTools
Debugging network issues
The network section can help you figure out what resources are loading, their loading time and their order. It shows all the request from when you start your test to the end.
If you click on the dropdown arrow next to network, you can toggle a view which shows the network requests grouped by the domain name. The insights panel can also show you all the render blocking requests.
When you hover over the render blocking request insight, it will highlight the request in the network section on the left. If you click on it, then it will give you more details like about the request. So, you can figure out why you’re making it and if you can avoid the request.
This panel can show you when long tasks are happening and how long the tasks are going on for. If you enable source-maps for your sites, then it will also show you where the functions are in your codebase.
It will look like this when you have a source map enabled. This tool can also show you if the long tasks are happening on a third-party script.
Tips on using the performance insights panel
Here are some tips on using the performance insights panel that will help you make the most out of it:
- Use network and CPU throttling
- Enable Source maps
- Run your tests in incognito mode without any extensions
- Only enable the sections you’re focusing on
Summary and tips
In summary, here are the main takeaways from this post:
- Poor performance can be caused by various factors, such as unused code, memory leaks, and network issues.
- The performance panel offers valuable insights into a website's performance, including load times and network activity.
- By following these tips and utilizing performance testing tools, developers can create fast, responsive websites that provide an optimal user experience.