Tracking mouse movement/scroll/click events is easy but how do they save the screen and keep it in sync so well?
The pages are rendered very quite well (at least for static HTML pages, haven't tested on Angular or any SPA), the sync is almost perfect.
To generate and upload a 23fps recording of my screen (1920x1080) it would take about 2Mbps of bandwidth. Maybe when recording only when there are some mouse events it would still take some 300-500Kbps on average? That seems way too much...
HTML content and DOM changes get pumped through a websocket and stored by Hotjar (minus sensitive information such as form inputs from the user, unless you've whitelisted them), the CSS isn't stored (it gets loaded by you when you watch the recording).
Because they're only recording user activity and DOM changes, there's a lot less data to record than if they were capturing a full video. The downside is that some Javascript driven widgets won't function correctly in the replay.
Relevant information from Hotjar docs:
- When it comes to recordings, changes to the page are captured using the MutationObserver API which is built-in into every modern browser. This makes it efficient since the change itself is already happening on the page and the browser MutationObserver API allows us to record this change which we then parse and also send through the websocket.
- At regular short intervals, every 100ms or 10 times per second, the cursor position and scroll position are recorded. Clicks are recorded when they happen, capturing the position of the cursor relative to the element being clicked. These are functions which in no way hinder a user's experience as they only capture the location of the pointer when a click happens or every 100ms. The events are sent to the Hotjar servers through frames within the websocket, which is more efficient than sending XHR requests at regular intervals.
Source: https://help.hotjar.com/hc/en-us/articles/115009335727-Will-Hotjar-Slow-Down-My-Site-