Experiments showing the impact on web page performance about clarity-js

[ssivov]

We did experiment with Clarity on a few of our internal resources and also tried it out on top100 popular websites. In the early stages there has been some noticeable impact, but we optimized for performance a lot since then and now it is running well on the vast majority of sites.

If you are experiencing performance issues on some website or have suggestions on how to improve perf even further, please let us know and we'll address such issues.

[Nithanaroy]

@ssivov That's awesome. Will certainly do if we observe any.

• Could you share some high level learnings and optimizations you did?
• Also could you share some numbers / charts on the top 100 popular sites?

These would help me persuade my case better. Thank you.

[Nithanaroy]

Every mutation takes ~0.25 ms to process. Since we have thousands of mutations, it takes up to 500 ms. This is just an estimate on our synthetic runs. It may be more / less on real user data. Due to this we are unable to proceed with this powerful library. Hence was requesting some numbers / charts based on your results. Thank you.

[ssivov]

Nithanaroy, we analyzed the function-level aggregate timings and eliminated the biggest bottlenecks. Given the large amount of invocations, DOM access and HTMLCollections showed to be really slow, blocking the thread for multiple seconds in extreme cases. Switching from getting elements by id in the shadowdom document to manual "id to element" mapping in array yielded great gains. Also, iterating over HTMLCollection (getElementsByClassName) turned out to be much slower than turning that HTMLCollection into an array and iterating that array. Besides that we added web workers to carry out data compression in a different thread, which was our biggest perf improvement to date. We continue our work to reduce payloads so that there is less work done for compressing them, less data to send over network and store on the back end - all of those factor into better perf too.

Of course, websites with the high end amount of mutations are going to be more complex to observe no matter what implementation you use - there are simply more things going on, however what it really comes down to is the end user experience. If your mutations are small enough that thread is consistently yielded to the browser, it will not have such a sever impact on the user. Or, if your mutations are spread in time over multiple seconds and come as a result of user's interaction with the page - it will also be unlikely to cause noticeable slow down.

We do have a plan of adding monitoring of how much time Clarity actually takes in the browser for its main functions (page discovery, mutations processing, compression), so we will be able to talk more detailed numbers when that's ready.

[Nithanaroy]

That's great. Thank you.