What is hydration?
Hydration occurs on the user’s computer for websites that undergo server-side generation.
Why is hydration expensive?
At first glance, the < button > example above doesn’t make hydration seem too complicated in a computational sense. You just need to find the right button and assign an event to it. However, problems arise if the page has several thousand similar elements, all of which contain complex conditions that are dependent on each other, such as on Reffine websites.
Of course, modern computers and smartphones cope with such tasks in less than a few hundred milliseconds. However, this level of complexity and the need to perform hydration on so many elements can rapidly scale up the cost as the amount of computing power needed to render the page rises.
Total Blocking Time
A few hundred milliseconds isn’t much, right?
Well, it becomes a bigger issue when we take the interactivity of the website into account. When a user visits our website, he or she expects to be able to immediately interact with any elements that appear.
Total Blocking Time (TBT) is a metric that determines how long the page was blocked for the user, during which time interaction was not possible. According to google: “TBT measures the total time between First Contentful Paint (FCP) and Time to Interactive, where the main-thread was blocked for long enough to prevent input responsiveness”.
The main thread is where a browser processes user events, paints, and anything else we refer to as tasks. When any one of these tasks runs for longer than 50 ms, they become known as a Long Task and the main-thread is considered blocked because the browser cannot interrupt a task in progress. So, if we have five long tasks and each of them lasts 100 ms, the following equation will determine the TBT metric: (100ms-50ms)5=250ms.
While the ideal TBT is, of course, 0 ms, the average result is 600 ms. Meanwhile, if a website’s TBT climbs above 3000 ms, this typically means that something has gone wrong. Returning to our example, if we could break those five long tasks into 10 tasks that are 50 ms each, we could bring the TBT to 0.