browser-sdk
browser-sdk copied to clipboard
🙏 Measuring Total Blocking Time (Core web vitals)
What are you trying to achieve and what is your issue? Please describe.
I am trying to compute a Lighthouse score for our pages. We have most of the information needed to calculate a Lighthouse 10 score, as outlined in the Chrome Web Vitals scoring guide. However, the long task duration numbers do not seem to accurately represent Total Blocking Time (TBT). TBT is defined as a measure of the total time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.
Describe the solution you'd like Considering the above, TBT is essentially the sum of blocking times within the TTI window. How can I calculate this in RUM, and do you have any recommendations if full support on RUM is not currently available?
Describe alternatives you've considered Additionally, it's important to note that long task duration is not synonymous with blocking time. Blocking time refers to the portion of long task duration that extends beyond 50ms.
Hi @chitezh,
As explained in those web.dev articles, TBT and TTI are lab metrics while RUM is a field measurement tool.
From the TBT doc:
While it is possible to measure TBT in the field, it's not recommended as user interaction can affect your page's TBT in ways that lead to lots of variance in your reports. To understand a page's interactivity in the field, you should measure First Input Delay (FID) and Interaction to Next Paint (INP).
So for now we don't plan on collecting TBT or TTI but we do collect FID and INP.
Thanks @bcaudan, that makes sense.
btw, I am looking into supplementing the data using https://www.npmjs.com/package/perfume.js. The LCP values we are seeing on DD are significantly lower than the actual values from a local lighthouse report run even at p95.
Compared to lab measurements, user interaction and page visibility may impact the LCP values that are reported on the field, which may explain the observed difference.
Let us know if you get significantly different data from this tool.