Find Performance Bottlenecks In Web App

In this article, I want to point how debug our application and how find performance issues in our web application by using chrome dev tools , In this article I don’t want to suggest a solution for fix each item , because it depends on very options like your code base and your knowledge and etc.

Symptoms of performance issues

In the first step, I see to mention some problems and we’ll get to know them more in the following .

1. Frame Drop: When we feel slowness or delay in the page .
2. Battery Drain: In the using of application we notice our device gets hot or battery of device gets over earlier.
3. Crashed: Sometimes we get an error from our web browser with Memory leaks content or we see crashed page in the browser.
4. Slow Application Feedback: We see a delay when an event fired or an element clicked.
5. Just be Slow on Mobile Devices: Maybe it happens for you , an application works well on desktop, but when we open it on the mobile , we see slowness.
6. Takes a long time for load page: In some Web Application we should wait more to see full content in the page .

In this part , I want to talk more about these problems , First I introduce each part and after , suggest tools and ways to identify these problems:

Frame Drop

We see frame drop more in the places we have more animations and scrolling the pages because it’s important for us to have 60 fps frame and if we have a lower frame , Our eyes feels the changes.

1. Use Performance Timeline:
   We can record our application for 5 or more second in the performance tab (We get more familiar with this tool) . For checking frame drop we can see changes in the frame chart for example in the following picture we see our FPS has no stable amount and changes a lot . When we have severe reduction of frame , we see a red progress bar .

Frame Drop

2. Use Rendering Tab:
If we want to have exact number of FPS, we should active this option in following path:

Dev tools -> More Tools -> Rendering -> Frame Rendering Stats

Battery Drain

One of the important items for mobile users is battery usage of the applications or sites. Some wrong code can make battery drain but we can check with these way:

1. Check idle time:
   Each activity in the browser like click, scroll , fetch ,… makes cpu bussy for a period time , we should notice when the user has no activity in the application , make battery usage as low as possible , For example when user is out of the viewport , stop animation with intersection api and etc.
   To check this item we can follow this :

performance tab -> After record a few second -> check idle in the summary tab

Crash

Maybe it happens for you , when you touch some element or an event fired , application crashed, or we see ‘Aw, Snap!’ in the chrome , One reason can be memory leaks :

1. Use Task Manager
   We can open this tool in more tools option when you click three dots

There are two columns as Memory footprint and Javascript memory.
First one shows memory of the DOM Node that created , for example if we increase our DOM node , memory footprint increase.

The second part is js memory , it shows how much the RAM is used by that object. If this part increase we figure out we have a problem in our code and its memory leaks .

2. Use Memory Profiler
We can use this tool in the memory tab and select allocation on timeline and record the activity , after a few seconds, we have a table that shows a memory allocation.

Memory allocation

The most important part is grey sections , these sections are deleted by garbage collector .Tnx GC :)
If a part not deleted , it seems maybe there is a problem and we should check our code.

3. Check Shallow size and Retained Size
Objects use memory in two ways , 1) They store data 2) They store references of other objects.
The second part causes the Garbage Collector not works correctly and extra data not clear completely . so we check shallow size and Retained size.

To understand better , it’s better to know about Dominator Graph Theory, actually consider memory as graph.

As default , all objects occupies space , we call this as shallow size , but the retained size is shallow size and size of all objects that referenced only by first object , recursively.
example in the following picture , for obj 2 node , obj3 and one primitive node are retained node.

There is one primitive node that connected to root and obj3 , we not select this node , notice on ONLY keyword

So , for checking ,we should record twice , before and after an action , and compare each other and see what happens and is it logical or not .

4. Use Performance Timeline
Please execute following code and record after click.

I record for 5 second and we have :

If I introduce shortly , we appended a lot of element to the DOM for this reason , We see that the ascending green line has grown, and js heap too .
If you notice , we have a first drop , I’ll talk about it , but you see the size increased after garbage collector frees the memory and it increase until the app crash , it seems we have a big problem.

There is a collect garbage collector button in dev tool , I used it for have better experimental for this reason we have first drop.

For proof the existence of GC , you can see following picture that major GC exist:

We have two kind of GC , minor and major , check difference if you want.

Slow Application Feedback

Sometimes we click on a button , we see it’s slower than default , or we feel the app has delay :

1. Use Performance timeline for finding Long Task and Recalculate Style
   we can see a red flag in the recalculate style box as purple color

Recalculate Style

Just be Slow on Mobile Devices

1. Use CPU Throttling
CPU throttling in the performance tab helps us to decrease power of cpu 4x or 6x and simulate as a normal mobile device . we can record activities and use timeline and check what happens in the new situation .

we have this feature for network too , we can check load time in the slow network.

2. Use React DevTool for checking re-rendering
React devtool is a powerful tool that helps us to check re rendering.

Takes a long time for load page

I think this problem can have a lot of reasons , also this is so important to load our page quickly
1. Use coverage for css and unused js
It’s very important to how load components and files because it It will definitely affect the bundle size.

Of course we can use tree shaking and code splitting to avoid this problem

On of the most useful tools , is coverage tab , we can see this in the more tools , for example in the following picture we can see extra and unused css and js code .

2. Use Lighthouse
We can use this tool to check our application base some requirements and check the items we need for convert our application to PWA , we can check LCP,FCP and etc . you can read more in this link.

3. Check how css and js files are loaded
We can make better decision to load js files in our application , we have some options to load js files in the html , it depends on our use case , you can read more on this link .

Thank you for reading this article , if you have suggestion to improve content or have question, comment it, I appreciate it .