I open chrome's task manager, which shows total memory usage & CPU usage for each tab in a sortable table. Also in dev tools, I activate the FPS meter overlay.

I open chrome's task manager, which shows total memory usage & CPU usage for each tab in a sortable table. Also in dev tools, I activate the FPS meter overlay. Then I do things in the app to stress it which will depend on your app. If it maintains 60fps through all use cases, you don't need to go any further really. I also use the app for an extended period of time (or programatically simulate that) and ensure memory doesn't creep up continuously. And ensure CPU is 0% or close to it when idle. If it drops below 60fps in a way thats an issue, open the performance/timeline tab in chrome dev tools & record while repeating that action a few times. In this tab you can also throttle CPU, or you could just do a bunch of CPU bound stuff on your main thread every 30ms to simulate a slower CPU From there you'll know what the issue is, n+1 calls into a jquery plugin, memory leaks, garbage collections, it even shows paint issues pretty clearly. From there, you can dig deeper but it depends on your app & frameworks used. For example if you're using react, you might go into react dev tools or redux dev tools. For angularJS apps you could use batarang to try to see what watch queries you have, etc. For paint issues, use the checkbox in devtools to highlight paints, you can easily see at a glance if the whole UI is being repainted, if so it means your virtual DOM library is detecting changes when it should not. Or maybe you have a legacy jquery app that just builds up a huge string and does div.innerHtml = string, which should be rewritten to use virtual DOM libraries. For reflows, I also use the performance tab, it shows up as "recalculate style" or something like that. Usually it means you're doing $(div).width() or something similar inside a loop & you can just cache the value to fix it. Again, it depends on your app. If you have drag & drop widgets & you have 9000 widgets on a page, you're going to have some jank if you're binding jQuery draggable 9000x. You can use optimizations like not binding until the user mouses over each widget. To get rid of the jank, one strategy is you just make jank happen in smaller pieces over time instead of on page load or component mounting.