Poradnik: Total Blocking Time (TBT)

TL;DR — Total Blocking Time (TBT) measures how long twój strona jest frozen — unable to respond to a click lub tap — podczas gdy it loads. A lab narzędzie like Lighthouse dodaje up wszystkie the time the main thread jest blocked między the pierwszy paint i gdy the strona becomes interactive. poniżej 200 ms jest good. It’s a lab-tylko liczba, it’s nie a Core Web Vital, i it won’t pokazywać up in Search Console.

co TBT jest

gdy a strona loads, the przeglądarka ma one main thread doing the heavy lifting — running JavaScript, building the strona, reacting to twój clicks. It może tylko robić one thing at a time. If a chunk of JavaScript hogs że thread dla too long, the strona goes momentarily unresponsive: you tap a button i nothing happens until the script finishes.

Total Blocking Time jest a pomiar of exactly że frozen time podczas load. A testing narzędzie like Lighthouse loads twój strona in a controlled environment, watches the main thread, i dodaje up wszystkie the time it był blocked z responding to input.

The 50ms reguła

nie każdy bit of działać counts. The przeglądarka może handle short tasks bez you noticing. The wiersz jest 50 milliseconds: dowolny task że runs longer than że jest a “long task,” i tylko the part above 50 ms counts as blocking time.

So a task że runs dla 70 ms dodaje 20 ms to twój TBT. A task że runs dla 40 ms dodaje nothing. TBT jest the sum of wszystkie tamte “above 50 ms” slivers podczas gdy the strona jest ładowanie.

co’s a good score?

In Lighthouse, on mobilny:

• Good: 200 ms lub mniej
• Needs improvement: up to 600 ms
• Poor: ponad 600 ms

The thing najbardziej people get błędny

TBT jest nie a Core Web Vital. The three Core Web Vitals są LCP, INP, i CLS. TBT jest a lab narzędzie że pomaga predict twój Interaction to następny Paint (INP) — the rzeczywisty-użytkownik metric Google actually używa. You won’t find TBT in Google Search Console lub in pole data, ponieważ it’s measured by simulating a strona load, nie by watching rzeczywisty visitors.

Want the pełny mechanics — the worked przykład, why TBT carries the najbardziej weight in Lighthouse, the TBT-vs-INP difference, i how to actually fix it? Switch to the Advanced tab.

TL;DR — TBT jest the total amount of time, między pierwszy Contentful Paint i Time to Interactive, że the main thread był blocked long enough to zapobiegać input responsiveness. It sums the blocking portion (duration − 50 ms) of każdy long task (dowolny main-thread task ponad 50 ms). It’s a lab metric — the single largest weight (30%) in the Lighthouse 10 score i the lab proxy dla INP — ale it jest nie a Core Web Vital i nigdy appears in CrUX lub Search Console. mobilny thresholds: good ≤200 ms, poor >600 ms. Fix it like you’d fix INP: break up long JS tasks, code-split, defer/remove unused JS, tame third-party scripts. My honest take: fix it dla użytkownicy, nie dla a ranking bump.

co TBT actually measures

Google’s definition jest the place to start. TBT jest “the total amount of time po pierwszy Contentful Paint (FCP) gdzie the main thread był blocked dla long enough to zapobiegać input responsiveness.” The przeglądarka’s main thread procesy one task at a time; podczas gdy it’s busy z a long chunk of działać, it może’t react to a click, a tap, lub a keypress. TBT quantifies how much of twój strona-load window jest spent in że blocked state.

Two definitions robić wszystkie the działać here:

• A long task jest “a task że runs on the main thread dla więcej niż 50 milliseconds.”
• The blocking portion of a task jest jego duration minus 50 ms. Tasks at lub poniżej 50 ms contribute exactly 0 ms.

TBT jest the sum of tamte blocking portions między FCP i Time to Interactive (TTI). So pierwszy Contentful Paint jest the start wiersz: nothing przed the pierwszy paint counts, ponieważ there’s nothing on screen to interact z yet.

The worked przykład

Google’s own tabela jest the clearest illustration. Imagine five tasks run on the main thread między FCP i TTI:

Tasks three i four są poniżej the 50 ms wiersz, so they contribute nothing. Task one bloki dla 250 − 50 = 200 ms, task five dla 155 − 50 = 105 ms. dodaj blocking portions — 200 + 40 + 0 + 0 + 105 — i you get 345 ms of TBT. że’s a “needs improvement” score, driven almost entirely by two heavy tasks.

ten jest the counter-intuitive part worth internalizing: “A mały liczba of tasks on the main thread doesn’t necessarily mean niski blocking time. Conversely, a duży liczba of tasks doesn’t necessarily lead to tons of blocking time.” (że framing jest NitroPack’s, relayed here — reverified wobec the live źródło 2026-07-18.) co matters jest whether individual tasks cross 50 ms, nie how wiele tasks there są.

The pomiar window: FCP to TTI

The window ends at Time to Interactive — “the time z gdy the strona starts ładowanie to gdy jego main sub-zasoby mieć załadowany i it jest capable of reliably responding to użytkownik input quickly.” In Lighthouse, TTI jest found by searching forward dla a five-second “quiet window” z no long tasks i no więcej niż two in-flight network żądania.

Worth noting: TTI itself był removed z Lighthouse 10 ponieważ it proved overly sensitive to outlier network żądania i long tasks, producing wysoki variability. TBT survived i became the primary interactivity metric. As Philip Walton put it, “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), i Interaction to następny Paint (INP) są zwykle better metrics to używać in place of TTI.” TBT didn’t zastępować TTI as the window’s endpoint — it’s a better single liczba dla the same underlying problem. i TTI’s disappearance z the Lighthouse raport UI isn’t the same twierdzenie as TTI no longer bounding Lighthouse’s domyślny navigation window — the window itself jest nadal measured że way poniżej the hood.

One więcej scoping note: “FCP to TTI” describes Lighthouse’s domyślny navigation audit specifically. Other narzędzia, lub Lighthouse itself running a timespan trace zamiast a pełny strona-load navigation, może total a różny measured window — the 50 ms long-task math doesn’t change, ale the start i end points of co gets summed są narzędzie- i trace-mode-specific, nie a universal law of the metric.

jest TBT a Core Web Vital? No.

ten jest the najbardziej common misconception, so let’s być blunt o it. The three Core Web Vitals są LCP, INP, i CLS. TBT jest nie one of them. Google’s own wording: “Total Blocking Time (TBT) jest a lab metrics jest vital in catching i diagnosing potential interactivity problemy że może impact INP. However, it jest nie part of the Core Web Vitals ustawić ponieważ they są nie pole-measurable, nor robić they reflect a użytkownik-centric outcome.” (The grammar in że zdanie jest theirs, nie mine.)

So gdzie robi TBT pokazywać up, i gdzie doesn’t it?

• gdzie you see it: Lighthouse, PageSpeed Insights’ lab tab, i Chrome DevTools — wszystkie simulated/lab environments.
• gdzie you don’t: Google Search Console’s Core Web Vitals raport, CrUX, lub dowolny pole data. tamte tylko carry LCP, INP, i CLS.

If someone tells you they’re “watching TBT in Search Console,” they’re mistaken — GSC raporty pole data, i TBT isn’t a pole metric.

One correction worth będąc precise o: TBT będąc lab-recommended isn’t the same as TBT będąc pole-impossible. You może technically compute a TBT-style total in the pole z the Long Tasks API — Google says so directly: “It jest possible to mierzyć TBT in the pole, ale we don’t rekomendować ten as użytkownik interaction może affect twój strona’s TBT in ways że lead to lots of variance in twój raporty.” że’s a recommendation wobec it, nie a technical wall. co’s actually prawdziwy bez exception jest narrower: CrUX i Search Console’s Core Web Vitals raport nigdy carry TBT, pełny stop — tamte pipelines tylko ever collect LCP, INP, i CLS.

TBT jest the lab proxy dla INP

Here’s why TBT exists at wszystkie. Lab narzędzia load a strona in a simulated environment z no rzeczywisty użytkownik, so they może’t mierzyć Interaction to następny Paint — INP needs rzeczywisty clicks i taps. TBT fills że gap: “the Total Blocking Time (TBT) metric jest lab-measurable i jest a proxy dla INP.”

The two są mechanically powiązany: “Although INP i TBT są calculated differently, they są oba reflections of a blocked main thread podczas the bootstrap proces. gdy the main thread jest blocked, the przeglądarka jest delayed in responding to użytkownik interactions.” And empirically, “A niski TBT często correlates z a niski Interaction to następny Paint (INP).”

ale “proxy” jest nie “substitute.” Google jest explicit: “Total Blocking Time (TBT) może być a reasonable proxy metric dla INP, ale it’s nie a substitute dla INP in i of itself.” They diverge in rzeczywisty ways:

• wysoki TBT, fine INP. TBT measures blocking podczas load. If twój użytkownicy don’t actually try to interact podczas że blocked window — they wait dla the strona to look finished pierwszy — ich INP może być fine even z an ugly TBT.
• Fine TBT, poor INP. INP również covers slow event handlers i renderowanie działać że fire po load, plus things like the przeglądarka’s 300 ms tap opóźnienie on non-mobilny-optimized strony — none of który TBT sees.

gdy the lab i pole disagree, trust the pole. INP (the rzeczywisty-użytkownik liczba) takes priority ponad TBT (the lab estimate).

One historical note że trips people up: TBT używany to być the lab proxy dla pierwszy Input opóźnienie (FID). INP replaced FID as a Core Web Vital on March 12, 2024, so TBT jest now INP’s proxy. The underlying mechanism nigdy changed — it’s zawsze był o a blocked main thread podczas load — ale dowolny older artykuł calling TBT “FID’s proxy” predates że switch.

Why TBT dominates the Lighthouse score

TBT carries the largest single weight in the Lighthouse wydajność score — 30%, a weighting introduced in Lighthouse 10 i, verified live wobec Chrome’s scoring docs on 2026-07-18, nadal unchanged przez the current Lighthouse 13:

Treat że tabela as version-i-date-scoped, nie a permanent constant — Lighthouse ma changed jego weights przed i może again. Re-verify wobec Lighthouse wydajność scoring przed quoting it in an audit deck.

ten jest the practical powód TBT matters dla SEO audits even though it isn’t a ranking signal: a poor TBT ma an outsized effect on że big Lighthouse liczba everyone screenshots. Addy Osmani’s worked przykład makes it concrete — removing one Intersection Observer polyfill cut TBT z 400 ms to 300 ms i lifted the Lighthouse wydajność score z 63 to 70. One fix, seven points, z powodu the 30% weight.

One więcej nuance: the “Good ≤200 ms” kategoria threshold i the Lighthouse score są różny scales. To score 90+ on the TBT subscore you need roughly ≤300 ms on mobilny, i to hit 100 you need ≤100 ms. (tamte subscore figures są DebugBear’s documentation of the scoring curve, reverified wobec the live źródło 2026-07-18.) “Good” i “100” są nie the same bar.

robi TBT affect SEO rankings?

nie directly — i I’ll być straighter o ten than najbardziej.

TBT jest nie a ranking signal. Google’s interactivity ranking input jest INP, a pole metric. TBT jest a diagnostic że pomaga you find i fix the long tasks że hurt INP. poprawiając TBT może poprawić INP, który może marginally pomagać the strona Experience side of rankings — ale że’s two links of “may” away z twój positions.

i here’s my rzeczywisty position on the whole Core Web Vitals question, który I’ve written przed in my szybkość strony poradnik: I don’t think Core Web Vitals mieć much impact on SEO, i unless you’re extremely slow I generally won’t prioritize them. robić them dla użytkownicy i conversions, nie dla a ranking bump. że applies doubly to TBT, który jest a lab proxy dla a pole metric dla a mały ranking input. Fix it ponieważ a frozen strona loses you klienci — nie ponieważ you’re chasing a position.

co causes wysoki TBT

It’s almost zawsze JavaScript:

• Unnecessary JavaScript ładowanie, parsing, lub execution — the Lighthouse audit’s own words. wysyłka a big bundle the strona doesn’t need at load jest the classic cause.
• Inefficient JavaScript statements — heavy synchronous działać że monopolizes the main thread.
• Third-party scripts — znacznik managers, chat widgets, analytics, ad scripts. często the single biggest contributor, i the one you control least.
• Heavy framework bootstrap — React hydration i similar może run long tasks podczas startup.
• Style/layout recalculation i garbage collection — forced synchronous layout, duży style recalcs, i GC pauses pokazywać up as main-thread tasks too; don’t assume każdy long task in the trace jest JavaScript execution.

Don’t assume bundle transfer size jest the whole story, either. Trace attribution ma rzeczywisty gaps: cross-origin frames i worker threads mieć prywatność i security limits on co a long-task observer może raport o them (see Troubleshooting), so an unattributed task in twój trace isn’t proof no third party jest involved — it może just mean the attribution API isn’t allowed to tell you.

How to fix wysoki TBT

The fixes są the same family as the INP fixes — oba come down to a blocked main thread.

1. Find the long tasks. otwarty the Chrome DevTools wydajność panel i look dla tasks ponad 50 ms (they’re flagged z red corners), lub run the Lighthouse “Avoid long main-thread tasks” audit.
2. Audit third-party scripts pierwszy. They’re zwykle the easiest wins. użyj DevTools Coverage i Network tabs to see co każdy script costs, i lazy-load heavy embeds (YouTube, maps, chat) behind a facade.
3. Break up the long tasks. Yield to the main thread so the przeglądarka może handle input między chunks — “gdy tasks są broken up, the przeglądarka może respond to higher-priority działać much sooner—w tym użytkownik interactions.” The modern API jest scheduler.yield(), z a setTimeout(resolve, 0) fallback (see the Cheat Sheets tab dla the pattern). Note że Google no longer recommends isInputPending() — yield regardless of whether input jest pending.
4. Reduce the JavaScript. Code-split duży bundles so mniej parses i evaluates at load, remove unused JS (DevTools Coverage tab pokazuje you co), i defer non-critical scripts.
5. Move heavy computation off the main thread. Web Workers run CPU-heavy działać on a oddzielny thread, leaving the main thread free to respond.

A użyteczny side effect: long tasks że blok the main thread może również opóźnienie Largest Contentful Paint renderowanie, so fixing TBT czasami poprawia LCP too — especially gdy blokujący renderowanie JS jest involved.

gdzie to go następny

TBT lives in the Core Web Vitals family alongside jego pole counterpart Interaction to następny Paint, the ładowanie metrics Largest Contentful Paint i pierwszy Contentful Paint, i the lab narzędzia Lighthouse, PageSpeed Insights, i Speed Index że raport them. If you tylko remember one thing: TBT jest the lab ostrzeżenie light dla pole responsiveness — chase the long tasks, nie the liczba.

AI summary

A condensed take on the Advanced version:

• TBT = blocked main-thread time podczas load. It’s the total time, między FCP i TTI, the main thread był blocked long enough to zapobiegać input responsiveness.
• The math: sum of the blocking portion (duration − 50 ms) of każdy long task (dowolny main-thread task ponad 50 ms). Tasks ≤50 ms dodawać 0 ms. Google’s worked przykład: tasks of 250/90/35/30/155 ms → 345 ms TBT.
• It’s a lab metric. You see it in Lighthouse, PageSpeed Insights’ lab tab, i DevTools — nigdy in CrUX lub Search Console.
• nie a Core Web Vital. The three CWV są LCP, INP, CLS. TBT jest the lab proxy dla INP (historically FID’s proxy; INP replaced FID on March 12, 2024).
• Biggest Lighthouse weight: 30% — the single largest, so a poor TBT tanks the overall score. mobilny thresholds: good ≤200 ms, needs improvement ≤600 ms, poor

  600 ms.

• Rankings: nie a bezpośredni czynnik rankingowy. INP jest the pole signal; TBT tylko pomaga diagnose it. Patrick’s take: fix it dla użytkownicy i conversions, nie dla a ranking bump.
• Fixes (same family as INP): find long tasks in DevTools, audit third-party scripts pierwszy, break up tasks z scheduler.yield(), code-split i remove unused JS, offload heavy działać to Web Workers.
• Caveat: TBT i INP może diverge — wysoki TBT z fine INP (użytkownicy don’t interact podczas load) lub fine TBT z poor INP (slow event handlers po load). pole data wins.
• “Lab-only” means lab-recommended, nie lab-impossible. You może technically compute a TBT-style total z pole data z the Long Tasks API, ale Google advises wobec it (too much run-to-run variance) — CrUX i Search Console simply nigdy carry it either way.
• Trace attribution ma rzeczywisty gaps. Cross-origin frames i worker threads mieć prywatność/security limits on co a long-task observer może raport, so an unattributed task means “cause unknown,” nie “no third party involved.”

Official documentation

Primary-źródło documentation on TBT z Google i the Chrome zespół.

web.dev / Chrome

• Total Blocking Time (TBT) — Philip Walton & Barry Pollard: the canonical definition, the 50 ms long-task reguła, i the worked przykład.
• TBT Lighthouse audit — the audit strona, z the mobilny/komputer stacjonarny scoring thresholds i cited causes.
• Lighthouse wydajność scoring — the metric weights, gdzie TBT’s 30% comes z.
• Web Vitals — why TBT jest nie a Core Web Vital i how it relates to the ustawić.
• Interaction to następny Paint (INP) — the pole metric TBT proxies, i the “proxy, not substitute” caveat.
• Optimize long tasks — Jeremy Wagner & Brendan Kenny on breaking up tasks, scheduler.yield(), i why isInputPending() jest no longer recommended.
• Time to Interactive (TTI) — the metric że defines the end of the TBT window, i why it był removed z Lighthouse 10.
• Lab i pole data differences — the limits of TBT as an INP stand-in.

cytaty z the źródło

On-the-record statements z Google’s documentation. każdy link jest a deep link że jumps to the quoted passage.

Definition i mechanics

• “the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.” — web.dev, Total Blocking Time. Jump to cytat
• “a task that runs on the main thread for more than 50 milliseconds” — the definition of a long task. Jump to cytat
• “To provide a good user experience, sites should strive to have a Total Blocking Time of less than 200 milliseconds when tested on average mobile hardware.” Jump to cytat
• “A low TBT often correlates with a low Interaction to Next Paint (INP).” Jump to cytat

Status: nie a Core Web Vital

• “Total Blocking Time (TBT) is a lab metrics is vital in catching and diagnosing potential interactivity issues that can impact INP. However, it is not part of the Core Web Vitals set because they are not field-measurable, nor do they reflect a user-centric outcome.” — web.dev, Web Vitals (Philip Walton). (Grammar jest verbatim z the źródło.) Jump to cytat

TBT as the INP proxy

• “In such cases, Total Blocking Time (TBT) may be a reasonable proxy metric for INP, but it’s not a substitute for INP in and of itself.” — web.dev, Interaction to następny Paint. Jump to cytat

Long tasks i fixing them

• “The main thread can only process one task at a time. Any task that takes longer than 50 milliseconds is a long task.” — web.dev, Optimize long tasks. Jump to cytat
• “When tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” Jump to cytat
• On isInputPending(): “We no longer recommend using this API, and instead recommend yielding regardless of whether input is pending or not.” Jump to cytat

TTI i why TBT replaced it as the key interactivity liczba

• “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Interaction to Next Paint (INP) are usually better metrics to use in place of TTI.” — web.dev, Time to Interactive (Philip Walton). Jump to cytat

TBT triage checklist

A quick pass gdy Lighthouse hands you a red (lub orange) Total Blocking Time:

• Confirm you’re reading lab data — TBT jest in Lighthouse / PageSpeed Insights’ lab tab / DevTools, nie the pole lub Search Console.
• otwarty the DevTools wydajność panel i find the long tasks (ponad 50 ms, red-cornered) między pierwszy paint i interactive.
• lista twój third-party scripts i co każdy costs (Coverage + Network tabs) — start here; it’s zwykle the biggest, easiest win.
• Lazy-load heavy embeds (YouTube, maps, chat) behind a facade.
• Run the Lighthouse “Avoid long main-thread tasks” i “Reduce unused JavaScript” audits i działać the lista.
• Code-split duży bundles so mniej JS parses/evaluates at load.
• Defer non-critical scripts; dynamiczny-import() co isn’t needed immediately.
• Break up remaining long tasks z scheduler.yield() (setTimeout fallback). Don’t reach dla isInputPending().
• Move CPU-heavy computation to a Web Worker.
• Cross-sprawdź pole: pull INP z CrUX / rzeczywisty-użytkownik monitorowanie. If INP jest fine, don’t ponad-invest in chasing the lab liczba.

TBT cheat sheet

The math, in one wiersz

TBT = Σ (taskDuration − 50 ms) dla każdy task > 50 ms między FCP i TTI. Tasks ≤ 50 ms contribute 0 ms.

Worked przykład (Google’s)

Lighthouse thresholds

(Thresholds vs. the Lighthouse subscore curve differ: 90+ ≈ ≤300 ms mobilny, 100 ≈ ≤100 ms mobilny — DebugBear’s udokumentowany figures, reverified live 2026-07-18.)

TBT vs. INP — the cheat sheet

Yield-to-main pattern (the fix)

function yieldToMain () {
  if (globalThis.scheduler?.yield) {
    return scheduler.yield();
  }
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

używać scheduler.yield() gdzie available, fall back to setTimeout. Don’t używać isInputPending() — Google now recommends yielding regardless of whether input jest pending.

narzędzia dla measuring i fixing TBT

• PageSpeed Insights — read TBT in the lab data sekcja (it’s nie in the pole-data sekcja, ponieważ TBT isn’t a pole metric).
• Lighthouse (Chrome DevTools → Lighthouse panel, lub the CLI) — the źródło of the TBT liczba i the “Avoid long main-thread tasks” / “Reduce unused JavaScript” audits.
• Chrome DevTools — wydajność panel — record a load i find the long tasks (ponad 50 ms, flagged z red corners) że make up twój TBT.
• Chrome DevTools — Coverage tab — see how much of każdy script jest actually używany, to target unused JavaScript i heavy third parties.
• WebPageTest — lab testing z detailed main-thread i CPU breakdowns.
• Long Animation Frames (LoAF) API — a modern, pole-side complement to TBT, nie a replacement dla jego lab load-window calculation: it atrybuty long animation frames w całym a whole visit, który jest closer to how INP problems actually surface, zamiast TBT’s single FCP-to-TTI load window.
• pole-side TBT via the Long Tasks API — technically possible (sum duration − 50 ms dla observed long tasks in production, same as the Scripts tab snippet), ale Google recommends wobec it dla RUM: rzeczywisty użytkownik interaction timing makes the liczba too variable to porównywać run ponad run. Reach dla INP lub LoAF dla pole responsiveness instead.
• gdzie you won’t find it: Google Search Console’s Core Web Vitals raport i CrUX carry LCP, INP, i CLS tylko — nigdy TBT, regardless of co’s technically possible to compute yourself.

TBT mistakes że produce the błędny fix

• Calling TBT a Core Web Vital. TBT jest a lab diagnostic i użyteczny proxy dla main-thread contention; INP jest the rzeczywisty-użytkownik Core Web Vital. raport them osobno.
• Counting the whole long task as blocking time. tylko the portion beyond 50 milliseconds counts. A 70-millisecond task contributes 20 milliseconds, nie 70.
• Optimizing outside the pomiar window. Lighthouse TBT sums blocking między FCP i TTI. działać przed lub po że window może matter to użytkownicy, ale it jest nie part of że TBT wartość.
• Removing pierwszy-party code podczas gdy ignoring the largest third party. użyj trace i żądanie initiators to atrybut long tasks przed choosing an owner lub fix.
• Splitting code bez reducing działać. wiele smaller tasks może poprawić responsiveness, ale wysyłka the same unnecessary JavaScript nadal costs parsing, compilation, i execution. Remove unused działać as well as yielding it.
• Assuming a good lab TBT proves good pole INP. rzeczywisty użytkownicy interact po load on varied urządzenia. Confirm the outcome z pole responsiveness data.

TBT jest wysoki ale the network looks fast

Symptom: zasoby download quickly, yet Lighthouse raporty heavy blocking.

prawdopodobny cause: JavaScript parsing, compilation, execution, hydration, lub third-party działać monopolizes the main thread po the bytes arrive.

Fix i confirmation: Record a wydajność trace, sort long tasks by duration i owner, then remove unused code, defer noncritical działać, lub split the largest task. Confirm the blocking portion falls in repeated matched runs.

A duży bundle jest deferred ale TBT stays wysoki

Symptom: Adding defer changes download/execution order bez materially moving TBT.

prawdopodobny cause: The same expensive code nadal executes inside the FCP-to-TTI window.

Fix i confirmation: Profile functions inside the long task. Code-split by route lub interaction, reduce hydration, lub remove unused/duplicate działać; then verify że execution time, nie merely żądanie start time, declines.

Lighthouse TBT jest good podczas gdy pole INP jest poor

Symptom: Navigation lab tests look responsive, ale CrUX lub RUM raporty slow interactions.

prawdopodobny cause: The problematic task occurs po initial load lub tylko po a rzeczywisty interaction że standard Lighthouse navigation robi nie exercise.

Fix i confirmation: Collect interaction traces dla the poor INP strony i urządzenia, reproduce the action locally, i optimize the event handling i następny paint.

A long task pokazuje up z no jasny owner

Symptom: DevTools lub a Long Tasks API observer flags a blocking task, ale the attribution jest blank, generic, lub labeled something like “unknown” / “cross-origin.”

prawdopodobny cause: ten jest a znany coverage gap, nie a pomiar błąd. The Long Tasks API’s own specification bounds co it będzie raport w całym execution contexts — cross-origin ancestor tasks są deliberately nie reported (“ten jest nie reported z powodu security”), and a deeply embedded cross-origin iframe “robi nie receive dowolny information” o a long task in a cross-origin ancestor. działać happening in a Web Worker lub the przeglądarka’s compositor thread może również fall outside co the attribution surfaces you.

Fix i confirmation: Don’t conclude “no third party is involved” just ponieważ nothing jest named. Cross-sprawdzenie z the Network panel’s initiator column, the Coverage tab, i (gdzie you control the script) pierwszy-party instrumentation inside iframes you own. Treat an unattributed task as “cause unknown,” nie “cause absent.”

TBT varies sharply między runs

Symptom: One run jest green i the następny jest poor z no deployment.

prawdopodobny cause: Variable third-party execution, serwer timing że changes the działać window, pamięć podręczna state, lub test-maszyna contention.

Fix i confirmation: Match settings, run several cold tests, i porównaj long task owners i median wynik zamiast selecting one score.

Turn a trace do an ownership plan

Review this Lighthouse/DevTools trace for Total Blocking Time. For every long task
between FCP and TTI, calculate only duration above 50 ms as blocking time, attribute
the task to first-party code, framework/hydration, or a named third party, and rank
owners by blocking contribution. Propose remove, reduce, defer, split, or yield actions
with a validation test for each. Do not treat TBT as field INP or a direct ranking
factor.

porównywać two wydajność traces

Compare these before/after traces under matched settings. Report FCP, TBT, the largest
long tasks, their initiators, and whether work moved outside the measurement window or
was actually removed. Flag regressions hidden by the aggregate score. Return a verdict,
confidence limits from the supplied runs, and the next smallest experiment. Do not
invent missing timings.

sprawdzenie a third-party script decision

Given this script's business purpose, loading pattern, request initiator, and main-
thread tasks, decide whether to keep, delay, conditionally load, replace, or remove it.
Separate network cost from execution/blocking cost. Include consent and functionality
constraints, owner, implementation step, TBT validation, field-INP follow-up, and
rollback trigger.

Observe long tasks podczas a reproduction

Run ten early in DevTools Console, reproduce the load lub interaction, i inspect każdy task’s blocking portion:

let observedBlocking = 0;
const observer = new PerformanceObserver(list => {
  for (const task of list.getEntries()) {
    const blocking = Math.max(0, task.duration - 50);
    observedBlocking += blocking;
    console.log({ start: task.startTime, duration: task.duration, blocking });
  }
  console.log('Observed blocking total:', observedBlocking);
});
observer.observe({ type: 'longtask', buffered: true });

ten jest a debugging total dla the period you observe, nie Lighthouse’s official TBT unless you deliberately reproduce the same FCP-to-TTI window i test conditions.

Flag scripts z the najbardziej main-thread evaluation time

po recording a DevTools wydajność trace, użyj Bottom-up view grouped by URL. dla a quick network stan magazynowy alongside it, ten Console snippet listy transferred JavaScript z largest to smallest:

performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'script')
  .map(r => ({ script: r.name, transferred: r.transferSize, duration: r.duration }))
  .sort((a, b) => b.transferred - a.transferred);

duży transfer size jest tylko a lead; the wydajność trace jest co atrybuty parsing i execution time to TBT.

Long-task reduction

Test to run: Capture several matched Lighthouse/wydajność traces przed i po the JavaScript change i porównywać long tasks między FCP i TTI.

Expected wynik: The targeted task disappears, shortens, lub yields do smaller tasks, i median TBT poprawia bez delaying FCP lub breaking functionality.

awaria interpretation: działać moved to another bundle/task, nadal executes in the same window, lub normal run variance jest larger than the change.

monitorowanie window: Test immediately in mobilny i komputer stacjonarny lab profiles i watch pole INP podczas the następny reporting window.

Rollback trigger: Roll back if critical interactions break, błędy rise, lub a repeatable FCP/LCP/INP regression outweighs the TBT improvement.

Third-party deferral

Test to run: porównywać a cold trace z the third party in jego current position i z it delayed until zgoda, idle time, lub the relevant interaction.

Expected wynik: jego long tasks leave the initial TBT window podczas gdy the required firma event nadal fires at the intended time.

awaria interpretation: Another loader injects it early, dependent code bloki the strona, lub the script’s main-thread działać jest nie the measured bottleneck.

monitorowanie window: walidować on każdy template że loads the script i monitorować oba wydajność i the firma event po release.

Rollback trigger: Restore the prior ładowanie path if zgoda, analytics, realizacja zakupu, ads, lub another required function loses prawidłowy events.

pole responsiveness follow-up

Test to run: Segment pole INP dla affected templates/urządzenia po the lab TBT change podczas gdy keeping the deployment date annotated.

Expected wynik: pole responsiveness stays stable lub poprawia; a lab-tylko win jest nie reported as a użytkownik outcome until pole dowód obsługuje it.

awaria interpretation: rzeczywisty interaction działać occurs outside initial load lub the optimized cohort jest too mały to move the aggregate.

monitorowanie window: sprawdzenie przez the pełny pole-data reporting window i podczas wysoki-wartość interactions.

Rollback trigger: Investigate lub roll back if pole INP lub critical interaction sukces regresses consistently po the release.

Test yourself: Total Blocking Time

Five quick questions on TBT math i diagnosis. Pick an answer dla każdy, then sprawdzenie.

zasoby worth twój time

Official

• Total Blocking Time (TBT) — the canonical definition i worked przykład.
• Optimize long tasks — the practical fixing poradnik (scheduler.yield(), batching, why nie isInputPending()).
• Web Vitals — gdzie TBT sits relative to the Core Web Vitals.
• Optimizing Web Vitals używając Lighthouse — Addy Osmani; obejmuje the polyfill-removal worked przykład (TBT 400→300 ms, score 63→70).

z others (verify przed quoting)

• DebugBear — Total Blocking Time — strong technical depth on the TBT↔INP mechanism i the Lighthouse scoring curve.
• NitroPack — co jest Total Blocking Time? — the “task count ≠ blocking time” insight.
• BrowserStack — TBT poradnik i Catchpoint — TBT — narzędzie/monitorowanie-oriented overviews.
• web.dev — użytkownik-centric wydajność metrics — Philip Walton’s framework classifying TBT as a lab/load-responsiveness metric vs. pole metrics; użyteczny framing dla explaining why TBT doesn’t appear in CrUX.
• web.dev — Getting started z measuring Web Vitals — covers how TBT serves as the lab proxy dla INP gdy rzeczywisty-użytkownik pomiar isn’t possible in simulated environments.
• WebPageTest — free lab testing narzędzie że raporty TBT alongside detailed main-thread i CPU breakdowns; użyteczny dla diagnosing który tasks są driving a wysoki score.
• wyszukiwarka Journal — Core Web Vitals coverage — ongoing industry reporting on CWV updates, TBT’s role in audits, i how practitioners interpret lab vs. pole gaps.

Stats worth citing

• TBT jest 30% of the Lighthouse wydajność score — the single largest weight of dowolny metric (LCP i CLS są 25% każdy; FCP i Speed Index 10% każdy). Introduced in Lighthouse 10, live-reverified 2026-07-18 as unchanged przez Lighthouse 13. źródło
• The “good” bar jest ≤200 ms on mobilny (≤150 ms komputer stacjonarny); “poor” jest >600 ms mobilny (>350 ms komputer stacjonarny) — Lighthouse audit docs. źródło
• One polyfill = seven points. Removing a single Intersection Observer polyfill cut TBT z 400 ms to 300 ms i lifted the Lighthouse wydajność score z 63 to 70 — a clean illustration of the 30% weight. źródło
• A 250 ms task contributes 200 ms of blocking time — the blocking portion jest zawsze duration − 50 ms. Google’s worked przykład totals 345 ms w całym five tasks. źródło

Dziennik zmian