So while the total time spent running tasks on the main thread is 560 ms, only 345 ms of that time is considered blocking time.
|Task duration||Task blocking time|
|Task one||250 ms||200 ms|
|Task two||90 ms||40 ms|
|Task three||35 ms||0 ms|
|Task four||30 ms||0 ms|
|Task five||155 ms||105 ms|
|Total Blocking Time||345 ms|
How does TBT relate to TTI? #
TBT is a great companion metric for TTI because it helps quantify the severity of how non-interactive a page is prior it to becoming reliably interactive.
TTI considers a page “reliably interactive” if the main thread has been free of long tasks for at least five seconds. This means that three, 51 ms tasks spread out over 10 seconds can push back TTI just as far as a single 10-second long task—but those two scenarios would feel very different to a user trying to interact with the page.
In the first case, three, 51 ms tasks would have a TBT of 3 ms. Whereas a single, 10-second long tasks would have a TBT of 9950 ms. The larger TBT value in the second case quantifies the worse experience.