The TBT Window – CSS Wizardry

1 June, 2026

Written by Harry Roberts on CSS Wizardry.

View this web page as Markdown.

An incident (and it was an incident!) on a consumer mission bought me considering
in regards to the metrics we use and the significance of absolutely understanding their precise
definitions. Bizarrely-defined and oft-overlooked specs despatched panic round
a crew, however finally make clear a tangible hole in our front-end tooling.

For my consumer, from one SpeedCurve artificial check
to the subsequent, their Whole Blocking Time (TBT) skyrocketed from 495 ms to
5,789 ms. That’s greater than a tenfold enhance! Naturally, it was all
arms on deck to pin down the trigger, and I used to be referred to as in to assist
out.

What I discovered was each enlightening and calming, however it did shine a light-weight on
a spot in the way in which we have a tendency to speak about fashionable internet efficiency metrics.

That is the story behind a new internet efficiency
metric I wish to name
the TBT Window.

A Fast Refresher

Whole Blocking Time is a lab metric meant to
quantify how unavailable the principle thread is throughout web page load. It seems at lengthy
duties—work that occupies the UI thread for
greater than 50 ms—and counts solely the blocking portion of every one.
A 70 ms process contributes 20 ms to TBT; a 250 ms process contributes
200 ms. The primary 50 ms of any process is successfully tolerated, and
something past that’s thought of blocking time.

It’s a lab-based proxy for the extra actual user-centric Interplay to Subsequent
Paint subject metric.

This a lot might be acquainted, however the half that’s usually missed is that
TBT will not be an unbounded sum of all blocking work within the hint: it’s a sum of
all of the blocking time between First Contentful Paint and Time to
Interactive.
That is key to understanding the context of the TBT metric itself.

First Contentful Paint (FCP) opens the window
and is the primary level within the page-load timeline at which the consumer can see
one thing contentful on display—the web page is responding. Time to
Interactive (TTI) closes the window and is the
level at which the web page is taken into account reliably interactive.

TBT is the blocking work that occurs between these two moments.

That is barely clumsy and even sudden as a result of TTI itself has largely
disappeared from our day-to-day vocabulary. Lighthouse 10 eliminated
TTI from the efficiency
rating after a deprecation course of that started in Lighthouse 8, and for completely
wise causes: TTI was extremely variable and overly delicate to outlier
community requests and lengthy duties. It’s also seemingly arbitrarily outlined
and onerous to cause about:

1. Begin at First Contentful Paint (FCP).
2. Search ahead in time for a quiet window of at the very least 5 seconds, the place
   quiet window is outlined as: no lengthy duties and not more than two in-flight
   community GET requests.
3. Search backwards for the final lengthy process earlier than the quiet window, stopping
   at FCP if no lengthy duties are discovered.
4. TTI is the tip time of the final lengthy process earlier than the quiet window (or the
   identical worth as FCP if no lengthy duties are discovered).

Wow.

The truth that TTI has been retired from the report, nonetheless, doesn’t imply it
has stopped influencing the numbers we nonetheless care about. In case you are monitoring
TBT, TTI nonetheless defines the far fringe of the measurement window and adjustments in TTI
scores can affect your TBT scores even in circumstances you may not anticipate.

Hopefully now you may see the issue. Per Google’s personal documentation, TTI
proved overly delicate to outlier community requests and lengthy duties, but
if TTI additionally defines the higher sure for TBT, those self same outliers can enhance
(or lower) the floor space you’re being examined in opposition to.

A degraded TTI rating can degrade your TBT rating. You’re successfully nonetheless
being measured in opposition to it. That is precisely what occurred to my consumer.

The TBT Window

When you consider TBT as a windowed metric, a couple of in any other case stunning
behaviours develop into a lot simpler to elucidate. The TBT Window is the interval between
FCP and TTI throughout which TBT is allowed to rely blocking work. If FCP strikes
earlier, the TBT Window opens earlier, so lengthy duties that used to take a seat earlier than FCP
can out of the blue fall contained in the window. If FCP strikes later, the alternative can
occur: lengthy duties can fall out of scope with out having been faraway from the
web page.

The identical is true on the different finish. If TTI strikes earlier, the window closes
sooner and late lengthy duties might cease contributing to TBT. If TTI strikes later,
the window stays open for longer and extra of the tail of the web page load can
out of the blue develop into countable.

That is the necessary bit: in all of those circumstances, the lengthy duties themselves might
not have modified in any significant method. What modified was the quantity of timeline
that TBT was allowed to examine. That shifting interval is what I imply by the TBT
Window.

In my consumer’s case, their preliminary intuition was solely comprehensible: a TBT
regression seems like a JavaScript regression, and the SpeedCurve chart even had
the phrase JS in it, so the primary place the crew regarded was their bundles. They
checked for brand spanking new packages, third-party adjustments, tag supervisor updates, and any new
hydration or framework price that may have slipped into the discharge.

It was a wise line of investigation, however it turned nothing up and didn’t match
the details. There had been no significant JavaScript-facing change within the
timeframe they have been taking a look at, and the waterfalls instructed a way more attention-grabbing
story. There have been loads of late lengthy duties, however that they had not materially modified
between the earlier than and after traces. What had modified was TTI.

Within the waterfalls beneath, I’ve annotated the five-second quiet window in yellow
and labored again to TTI which is annotated as a vertical pink line. Word that,
for probably the most half, each waterfalls share an identical hallmarks.

Subsequent, let’s look particularly at lengthy and blocking duties. Once more, the hallmarks
of primary thread blocking exercise stay largely unchanged, however the sheer floor
space being measured is considerably bigger:

Earlier than the regression, the web page was thought of interactive earlier than quite a lot of that
late exercise mattered. After the regression, TTI had moved out towards 20
seconds, which meant the TBT Window stretched a lot additional throughout the waterfall
and pulled beforehand out-of-scope work into the metric.

The crew did have a TBT regression by way of pure numbers, however they didn’t
have the JavaScript regression they thought that they had. This can be a essential
distinction as a result of these two interpretations result in solely totally different
investigations. One sends you into bundles, dependencies, hydration, and third
events; the opposite sends you into the definition of the metric and the
circumstances that moved its boundaries.

With out the TBT Window in thoughts, you may find yourself making an attempt to optimise code that did
not trigger the change. The sensible lesson I took from this was easy: if TBT
skyrockets for no apparent JavaScript cause, test the community.

The LCP Enchancment That Tanked TBT

The attention-grabbing a part of this story is what moved TTI within the first place. We had
been engaged on LCP, and had added a preload for the LCP picture on the earlier
day. That is precisely the type of factor I wish to see: establish the necessary
picture, get it found earlier, assist the browser fetch it sooner, enhance the
user-visible expertise. And it labored: the LCP
optimisation was doing what it
was purported to do.

However, sadly, it additionally modified the form of the community. TTI’s calculation
doesn’t solely care about lengthy duties; it additionally seems for a quiet window of at
least 5 seconds, the place quiet means no lengthy duties and not more than two
in-flight community GET requests. By introducing only one extra request
by way of preload, the web page out of the blue fell foul of the community quiet-window
situation. TTI moved later, the TBT Window grew to become a lot bigger, and out of the blue lengthy
duties that had beforehand sat exterior the measurement window have been being
included.

That is the type of factor that makes efficiency work so attention-grabbing and, if we
are trustworthy, generally fairly annoying. A superbly wise optimisation for one
metric made a very totally different metric look catastrophically worse. Extra
particularly, an optimisation meant to enhance LCP precipitated TTI to maneuver later,
which in flip precipitated TBT to incorporate extra of the prevailing long-task tail.

Two metrics which are, from a user-experience perspective, involved with
various things grew to become extremely depending on one another by way of the small print
of their specs.

This isn’t essentially a criticism of Lighthouse, SpeedCurve, WebPageTest, or
the metrics themselves (although I do want TTI can be absolutely sundown, at the same time as
a windowing metric). It’s a reminder that our tooling is doing precisely what it
says on the tin, however we have to learn the tin.

Why TTI Can Transfer

The bizarre factor about TTI is that it sounds extra intuitive than it truly is.
The identify makes it really feel like a direct measure of when the web page turns into usable,
however the calculation is way extra fiddly and esoteric than that. As above, TTI is
collectively depending on lengthy duties and community exercise.

The latter is the a part of TTI that I’ve by no means preferred. The intent might be
wise: a web page that’s nonetheless fetching sources is probably not as settled as one
that has gone quiet, however the threshold itself—not more than two in-flight GET
requests for 5 seconds—is inevitably arbitrary, and permits community behaviour
to affect a metric that many individuals learn as interactivity. Frustratingly, in
a world of tag managers, monitoring, adverts, lazy loading, and extra, forensic management
over community exercise is seldom inside builders’ attain.

Which means TTI can transfer due to lengthy duties, however it could possibly additionally transfer as a result of the
web page fails to succeed in that required community quietness. That is exactly what
occurred right here—a community optimisation modified the community profile, TTI moved,
and the TBT Window grew.

Think about additionally the case of
a render-blocking
<script>. Any lengthy duties contained inside it are, by definition, exempt from
inclusion in TBT as they fall earlier than FCP. The wise and worthwhile
optimisation to make the script
asynchronous will tangibly
enhance milestone timings, however now makes any of these lengthy duties candidates for
inclusion in TBT. In different phrases, dashing up paint timings might negatively
affect interactivity numbers regardless of no materials change within the quantity of primary
thread exercise.

The lengthy duties didn’t worsen, they simply grew to become seen to the metric.

Causality Can Run Each Methods

One factor price being clear about: an expanded TBT Window doesn’t mechanically
imply the TBT regression is a false alarm. As a result of TTI is calculated from each
community quietness and long-task quietness, a real enhance in blocking work
can itself push TTI later. Add a big process at 12 seconds, or transfer a cluster of
duties additional down the hint, and the browser might not discover its quiet
window the place it used to. TTI strikes out, the TBT Window grows, and TBT rises for
two causes without delay: there is extra blocking work and the metric now has extra
timeline through which to rely it.

This can be a important distinction. The TBT Window will not be a approach to clarify away
TBT, however a approach to keep away from guessing. If the window grows as a result of FCP or community
quietness modified, chances are you’ll be taking a look at a windowing artefact; if the window
grows as a result of true long-task exercise bought worse, you might have an actual TBT regression
with a bigger floor space. Both method, plotting the window offers you the
context wanted to inform these eventualities aside.

How We Mounted It

We didn’t. It wasn’t a regression in any actual, user-facing sense and we additionally had
subsequent to no management over the foundation trigger. Reverting the preload change would
have improved the numbers, however it might have materially regressed the consumer
expertise.

As an alternative, I suggested that the consumer put a secondary lever in place and solely deal with
TBT as a regression if it strikes independently (or at a sooner price) than TTI.
All TBT charts now include an identical TTI rating that should diverge past
a sure threshold earlier than we act. In the event you’re monitoring TBT, I’d counsel you do
the identical.

Make the Window Seen

That is the place I believe artificial tooling might assist builders enormously.
Wherever that plots TBT also needs to plot the TBT Window alongside it. Not as
a brand new rating per se, however as a sanity test or management.

The info is already there. If the device is aware of FCP and TTI, and it has used them
to calculate TBT, it could possibly additionally present the dimensions of the window between them. That
single additional line on a chart would make quite a lot of investigations a lot simpler to
cause about. Instruments might even correlate window progress with TBT progress and alert
groups to potential false flags and crimson herrings:

N.B. TBT Window elevated by 37% between these two checks—TBT scores could also be
deceptive.

Within the interim, if you happen to’re already rolling your personal dashboards like you may in
SpeedCurve, you simply have to plot every of First Contentful Paint, Whole Blocking
Time, and Time to Interactive on the identical time collection:

If TBT goes up and the TBT Window stays flat, you’re in all probability taking a look at
a real enhance in blocking work; if TBT goes up and the TBT Window expands
on the identical time, you realize to ask if or why FCP or TTI moved earlier than assuming
blocking time truly bought worse.

Likewise, if TBT improves whereas the window shrinks, you need to be cautious about
celebrating too shortly: you might have eliminated blocking work, or chances are you’ll merely
have stopped counting a few of it.

Within the screenshot above, the TBT spike round 19–20 Could can’t be defined by
a change in TBT Window and was certainly a real TBT regression attributable to a 3rd
social gathering:

In dashboards, I might in all probability expose this as TBT and TBT Window. Monitoring
adjustments throughout each metrics in tandem can spotlight real regressions versus
a bigger floor space.

That is not theoretical: artificial instruments can expose the TBT Window at the moment,
and I believe they need to. Actually, fortunately, after advising
Matt on this precise matter, he added it to
DebugBear which I consider makes them the primary!

None of this adjustments the definition of TBT, and none of it makes TBT any much less
helpful, however it does give groups a greater approach to interpret any motion they’re
already seeing.

Closing Ideas

TBT remains to be a helpful lab metric. It’s not a substitute for Interplay to
Subsequent Paint, and it’s not an ideal mannequin of
real-user interactivity, however it stays a really sensible approach to spot primary thread
rivalry throughout web page load.

Sadly, nonetheless, I really feel it being bounded by the arbitrary definitions of
TTI leaves rather a lot to be desired—solely unrelated and sudden community
exercise can utterly tank in any other case wholesome pages.

TTI might have left the Lighthouse rating, however it has not solely left your
metrics. In the event you monitor TBT, regulate your TBT Window as effectively.
In any other case, ultimately, you can see your self looking for JavaScript
that didn’t even change.

Quotation

I’m making this text obtainable underneath the identical MIT License as the remainder of
this website, however if you happen to quote, doc, implement, or floor the time period
TBT Window in tooling, dashboards, talks, or written materials, please cite
this text as its canonical supply:

Harry Roberts, ‘Entrance-Finish’s Lacking Metric: The TBT Window’, CSS Wizardry,
1 June 2026, https://csswizardry.com/2026/06/front-ends-missing-metric-the-tbt-window/

Incessantly Requested Questions