Deep Dive into Chrome’s Performance and Memory Tabs
Dive into the world of Chrome’s developer tools as we unravel the mysteries of the ‘Performance’ and ‘Memory’ tabs. Optimizing the performance and memory usage of web pages are important tabs. It is used to ensure that users have a fast and smooth experience.
Performance
Harness the power of Chrome’s ‘Performance’ tab to diagnose and boost your webpage’s speed and responsiveness. It offers a set of tools to monitor page load time, smoothness of animations, JavaScript operations, and other performance metrics. This way, we can understand why pages are slowing down or how to make them faster. By analyzing performance, we can examine various performance drivers such as network requests, threads, and events.
In short, the devTools performance dashboard provides tools to help us analyze the runtime performance of our applications.
When analyzing the performance of any application, it is best to do it in the incognito mode of the browser. This ensures that the performance measurement is not affected by other factors such as installed plugins. (If plugins are active in the incognito tab, you can create a new user and continue from there)
To access the performance panel, first click on inspect or press (Command + Option + I for Mac) and (Ctrl + Shift + I) for Windows. Open the Chrome tools page. Then click on the Performance tab. We expect a screen like the one below. (Screenshot-1)
We talk about the features of the performance panel, which are as follows, respectively:
- Record Button: Kickstart a live performance analysis, logging the page’s every action and reaction.
- Reload Button: Reloads the page and cleans the data tracked during the performance analysis.
- Screenshots: You can make it select to capture screenshots during performance profiling.
- Memory: You can make it select to catch memory issues that affect performance.
- Settings (Wheel): If you want to further adjust how performance metrics should be captured, you can see and adjust them by clicking on the cogwheel. (Screenshot-2)
Recording Performance
To record the runtime performance of a sheet in your app, open the Performance panel while on that sheet, select the options you want, click the save button, and start using the page as you normally do. DevTools captures performance metrics while the page is running. (Screenshot-3)
Click the stop button when you are done interacting with the page. Performance profiling is stopped and the results are displayed in the Performance panel. (Screenshot-4)
Analyze the Result
The returned performance result includes Network, Frames, Interactions, Main Topic, and several other data. Each data is contained in a section and when you expand a section, the associated data is shown. At the top of the result is the Overview section, which contains both screenshots and information from other sections. Below the result is a Summary tab with a breakdown of all activities.
The Frames section contains data for one of the most important metrics for measuring the performance of animations in your app. The recommended speed is 60FPS (frames per second) and anything above that will result in degraded performance. Hovering over the green bars in the Frames section will show the frame rate for that frame, and any frame above 60 FPS means performance optimization is needed.
Example
Let’s examine together how to measure and analyze performance loss and how to find solutions for it.
As a result of my research on the internet, I tested it by working on a demo site I found to measure performance. I will share the link here. https://googlechrome.github.io/devtools-samples/jank/
We will try to measure performance by increasing the values here. (Screenshot-5)
When I check with Frame, I see that there is a problem with the fps per second. If the condition for all steps is red, it indicates that there is a problem, if it is green, it indicates that everything is in order. According to the example above, I see that there is a problem on the frame side. It says that I need to make improvements related to the animation effects on the site. (Screenshot-6)
We click on the main area, there is general summary information about all features in the Summary section. When we examine it in general here, we can have an idea about what the problem is caused by. In our example, it says that there is a problem with rendering because there is instantaneous movement within the site.(Screenshot-7)
When we examine the task items under Main, “Function Call” appears green. This shows that there is no problem with the called functions. Let’s try the same now on “Animation Frame Fired”. (Screenshot-8)
In the Summary section, it warns us with an extra warning message. We can solve our performance problem by fixing this error. (Screenshot-9)
I refreshed our sample site and got the record the way there are few boxes. When we look at it, the warning about the frame is green, indicating that there is no problem.
For my case, the animation on the site was too much. About 200 boxes were moving up and down at the same time. As a solution to this, I reduced the number of boxes. Another solution was to load the boxes with scroll and delete the invisible boxes from the dom. It may differ on your website, you should investigate and find your problem which is specific for your website.
When we record with Reload, the LCP, FID, and CLS expansions that we see on the main and their values are as follows. (Screenshot-10)
Now that we have learned the Performance tab and examined it with an example, we can move on to the “Memory” tab ↓
Memory
The “Memory” tab provides information about how a page uses memory. If you notice that your website is slowing down, a memory leak should be considered as a possible cause. JavaScript is designed to solve memory issues, including debugging memory leaks.
To investigate memory usage, you are presented with three options. (Screenshot-11)
- Heap snapshot
- Allocation instrumentation on the timeline
- Allocation sampling
The fastest option we have is to take a snapshot of the stack. Initially, these snapshots are stored in the renderer process memory. They are transferred to DevTools for you to view when needed.
Once the snapshot is loaded, you can examine the memory allocation of JavaScript objects and Dom nodes in more detail. (Screenshot-12)
Let’s take a brief overview of the columns in this table
- Constructor: JavaScript function used to create objects.
- Distance: Distance from the root. The greater the distance, the longer it takes to load and process the object.
- Objects Count: The number of objects created by the specified constructor.
- Shallow Size: The shadow size of each object created through a specific constructor.
- Retained Size: The largest protected size of a set of objects.
At the same time, while the snapshot is selected, you can examine 4 different options from the filter section next to the Class filter. For example, you can see Statistics below. (Screenshot-13)
In the profile section: Allocation sampling
It works very similar to the recording function in the Performance panel. After selecting the profile section and starting the registration process, you must interact with the page. When you are done exploring the features and buttons on our page, this time you should examine the results displayed in a table. (Screenshot-14)
In the profile section: Allocation instrumentation on the timeline
It tracks memory consumption from the moment it starts and continues until you stop it. Same as the first item, only here it keeps track as long as you don’t stop it. (Screenshot-15)
Let’s measure it together and see how memory is consumed.
(Screenshot-16)
You can see the sample code I wrote in the screenshot above. I added two buttons on the code. When “Add dates” is clicked, the current date is added 20 times with the dates array push. “Clear dates” makes dates an empty array when pressed. (Screenshot-17)
The page loaded and then I went to the “Memory” tab. I created the first snapshot. When I type “date” with filtering, I see that the data does not come. Now I will click on the “Add dates” button and I will see the memory save. (Screenshot-18)
After pressing add dates, I created Snapshots again and wrote the filter “Date”. This time I indicated in the screenshot that it occurred 20 times and that it also appeared in the array.(Screenshot-19)
When I clicked for the 2nd time, we added 20 more. Now we will reset the “Date” array by saying Clear dates. (Screenshot-20)
You can then see the recovered RAM volume by looking at the Freed Size value. What I showed you was just an example. When more than one situation like this occurs, you can increase the user’s RAM consumption and prevent them from browsing your website. We can cause our page to crash.
Result
Chrome’s ‘Performance’ and ‘Memory’ tabs are a treasure trove for web developers, offering unparalleled insights into webpage dynamics. With these tools, you can identify and resolve performance and memory issues to improve the user experience and make pages run faster and more efficiently. As an integral part of the web development process, these tools are indispensable for those developing websites and applications.
Thank you very much for reading this article.
If you liked this article, I also recommend this one. https://medium.com/insiderengineering/seamlessly-migrating-from-javascript-to-typescript-a-practical-note-6a647a6d9109
See you in another article, Stay safe :)
