In May 2019 I talked about monitoring Magento front-end performance at 2 local Magento meetups. First event was in Munich and second in Vienna. During Vienna’s talk I presented about 40% new content and part of the new ideas came from a feedback I got from Munich’s attendees.
They shared with me that some of the demos would be better understood if they required user interaction and represented real world example.
Great idea! Such demo would help me invite the attendees to try it on their mobile devices and feel how bad is the user experience when user interacts with the UI while browser’s main thread is busy.
I created simple Product Details page where visitor must click/tap on different UI elements in order to add a product to shopping basket. In this demo I repeat the following operations: I keep the main thread busy for 700 ms and then free it for 70 ms.
I found it important to demonstrate “rage clicks”. Every time the user clicks on same UI element 3 or more times an angry face emoji shows on main thread timeline. (To demonstrate “rage clicks” I reverse engineered some code from Boomerang JS Continuity plugin)
That’s all and feel free to use this example in order to demonstrate how busy main thread affects user experience.