Poradnik: Total Blocking Czas (TBT)

TL;DR — Total Blocking Czas (TBT) measures jak long twój strona jest frozen — unable robić respond robić kliknięcie lub tap — podczas gdy robić loads. lab narzędzie like Lighthouse dodaje up wszystkie czas main thread jest blocked między pierwszy paint i gdy strona becomes interactive. poniżej 200 ms jest dobry. Robić’s lab-tylko liczba, robić’s nie Core Web Vital, i robić won’t pokazywać up w Wyszukiwanie Console.

co TBT jest

gdy strona loads, przeglądarka ma jeden main thread doing heavy lifting — running JavaScript, building strona, reacting robić twój clicks. Robić może tylko robić jeden element przy czas. Jeśli chunk z JavaScript hogs że thread dla too long, strona goes momentarily unresponsive: ty tap button i nothing zdarza się until script finishes.

Total Blocking Czas jest pomiar z exactly że frozen czas podczas load. testing narzędzie like Lighthouse loads twój strona w controlled environment, watches main thread, i dodaje up wszystkie czas robić przezł blocked z responding robić input.

50ms reguł

nie każdy bit z działć counts. przeglądarka może handle short tasks bez ty noticing. wiersz jest 50 milliseconds: dowolny task że runs longer niż że jest “long task,” i tylko part powyżej 50 ms counts jako blocking czas.

Więc task że runs dla 70 ms dodaje 20 ms robić twój TBT. task że runs dla 40 ms dodaje nothing. TBT jest sum z wszystkie tamte “powyżej 50 ms” slivers podczas gdy strona jest ładowanie.

co’s dobry score?

W Lighthouse, na mobilny:

• Dobry: 200 ms lub mniej
• Potrzebuje improvement: up robić 600 ms
• Poor: ponad 600 ms

element najbardziej people uzyskać błędny

TBT jest nie Core Web Vital. trzy Core Web Vitals są LCP, INP, i CLS. TBT jest lab narzędzie że pomaga predict twój Interaction robić następny Paint (INP) — rzeczywisty-użytkownik metric Google faktycznie używa. Ty won’t znaleźć TBT w Google Wyszukiwanie Console lub w pole dane, ponieważ robić’s measured przez simulating strona load, nie przez watching rzeczywisty visitors.

Chcieć pełny mechanics — worked przykład, dlaczego TBT carries najbardziej weight w Lighthouse, TBT-vs-INP różnica, i jak robić faktycznie poprawka robić? Switch robić Advanced tab.

TL;DR — TBT jest total amount z czas, między pierwszy Contentful Paint i Czas robić Interactive, że main thread przezł blocked long enough robić zapobiegać input responsiveness. Robić sums blocking portion (duration − 50 ms) z każdy long task (dowolny main-thread task ponad 50 ms). Robić’s lab metric — single largest weight (30%) w Lighthouse 10 score i lab proxy dla INP — ale robić jest nie Core Web Vital i nigdy appears w CrUX lub Wyszukiwanie Console. mobilny thresholds: dobry ≤200 ms, poor >600 ms. Poprawka robić like ty’d poprawka INP: break up long JS tasks, code-split, defer/usunąć unused JS, tame third-party scripts. My honest take: poprawka robić dla użytkownicy, nie dla ranking bump.

co TBT faktycznie measures

Google’s definition jest place robić start. TBT jest ” total amount z czas po pierwszy Contentful Paint (FCP) gdzie main thread przezł blocked dla long enough robić zapobiegać input responsiveness.” przeglądarka’s main thread procesy jeden task przy czas; podczas gdy robić’s busy z long chunk z działć, robić może’t react robić kliknięcie, tap, lub keypress. TBT quantifies jak dużo z twój strona-load window jest spent w że blocked state.

Dwa definitions robić wszystkie działć here:

• long task jest ” task że runs na main thread dla więcej niż 50 milliseconds.”
• blocking portion z task jest jego duration minus 50 ms. Tasks przy lub poniżej 50 ms contribute exactly 0 ms.

TBT jest sum z tamte blocking portions między FCP i Czas robić Interactive (TTI). Więc pierwszy Contentful Paint jest start wiersz: nothing przed pierwszy paint counts, ponieważ there’s nothing na screen robić interact z yet.

worked przykład

Google’s own tabela jest clearest illustration. Imagine five tasks uruchomić na main thread między FCP i TTI:

Tasks trzy i four są poniżej 50 ms wiersz, więc jeden contribute nothing. Task jeden bloki dla 250 − 50 = 200 ms, task five dla 155 − 50 = 105 ms. dodaj blocking portions — 200 + 40 + 0 + 0 + 105 — i ty uzyskać 345 ms z TBT. że’s “potrzebuje improvement” score, driven almost entirely przez dwa heavy tasks.

ten jest counter-intuitive part worth internalizing: ” mały liczba z tasks na main thread doesn’t necessarily oznaczać niski blocking czas. Conversely, duży liczba z tasks doesn’t necessarily lead robić tons z blocking czas.” (że framing jest NitroPack’s, relayed here — reverified wobec na-żywo źródło 2026-07-18.) co matters jest whether individual tasks cross 50 ms, nie jak wiele tasks there są.

pomiar window: FCP robić TTI

window ends przy Czas robić Interactive — ” czas z gdy strona starts ładowanie robić gdy jego main sub-zasoby mieć załadowany i robić jest capable z reliably responding robić użytkownik input quickly.” W Lighthouse, TTI jest znaleziony przez searching forward dla five-second “quiet window” z brak long tasks i brak więcej niż dwa w-flight network żądania.

Worth noting: TTI itself przezł removed z Lighthouse 10 ponieważ robić proved overly sensitive robić outlier network żądania i long tasks, producing wysoki variability. TBT survived i became główny interactivity metric. Jako Philip Walton umieścić robić, “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Czas (TBT), i Interaction robić następny Paint (INP) są zwykle better metrics robić używać w place z TTI.” TBT didn’t zastępować TTI jako window’s endpoint — robić’s better single liczba dla ten-sam underlying problem. i TTI’s disappearance z Lighthouse raport UI isn’t ten-sam twierdzenie jako TTI brak longer bounding Lighthouse’s domyślny navigation window — window itself jest nadal measured że sposób poniżej hood.

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

jest TBT Core Web Vital? Brak.

ten jest najbardziej common misconception, więc let’s przezć blunt o robić. trzy Core Web Vitals są LCP, INP, i CLS. TBT jest nie jeden z them. Google’s own wording: “Total Blocking Czas (TBT) jest lab metrics jest vital w catching i diagnosing potential interactivity problemy że może impact INP. However, robić jest nie part z Core Web Vitals ustawić ponieważ jeden są nie pole-measurable, nor robić jeden reflect użytkownik-centric outcome.” ( grammar w że zdanie jest theirs, nie mine.)

Więc gdzie robi TBT pokazywać up, i gdzie doesn’t robić?

• gdzie ty widzieć robić: Lighthouse, PageSpeed Insights’ lab tab, i Chrome DevTools — wszystkie simulated/lab environments.
• gdzie ty don’t: Google Wyszukiwanie Console’s Core Web Vitals raport, CrUX, lub dowolny pole dane. tamte tylko carry LCP, INP, i CLS.

Jeśli someone tells ty jeden’re “watching TBT w Wyszukiwanie Console,” jeden’re mistaken — GSC raporty pole dane, i TBT isn’t pole metric.

Jeden correction worth będąc precise o: TBT będąc lab-recommended isn’t ten-sam jako TBT będąc pole-impossible. Ty może technically compute TBT-style total w polu za pomocą Long Tasks API — Google mówi wprost: “It is possible to measure TBT in the field, but we don’t recommend this as user interaction can affect your page’s TBT in ways that lead to lots of variance in your reports.” (tłumaczenie) „Można mierzyć TBT w terenie, lecz nie jest to zalecane, ponieważ interakcje użytkowników powodują dużą zmienność raportów”. że’s recommendation wobec robić, nie technical wall. co’s faktycznie prawdziwy bez exception jest narrower: CrUX i Wyszukiwanie Console’s Core Web Vitals raport nigdy carry TBT, pełny stop — tamte pipelines tylko ever collect LCP, INP, i CLS.

TBT jest lab proxy dla INP

Here’s dlaczego TBT exists przy wszystkie. Lab narzędzia load strona w simulated environment z brak rzeczywisty użytkownik, więc jeden może’t mierzyć Interaction robić następny Paint — INP potrzebuje rzeczywisty clicks i taps. TBT fills że gap: ” Total Blocking Czas (TBT) metric jest lab-measurable i jest proxy dla INP.”

dwa są mechanically powiązany: “Although INP i TBT są calculated differently, jeden są oba reflections z blocked main thread podczas bootstrap proces. gdy main thread jest blocked, przeglądarka jest delayed w responding robić użytkownik interactions.” I empirically, ” niski TBT często correlates z niski Interaction robić następny Paint (INP).”

ale “proxy” jest nie “substitute.” Google jest explicit: “Total Blocking Czas (TBT) może przezć reasonable proxy metric dla INP, ale robić’s nie substitute dla INP w i z itself.” Jeden diverge w rzeczywisty sposoby:

• wysoki TBT, fine INP. TBT measures blocking podczas load. Jeśli twój użytkownicy don’t faktycznie try robić interact podczas że blocked window — jeden wait dla strona robić wyglądać finished pierwszy — ich INP może przezć fine nawet z ugly TBT.
• Fine TBT, poor INP. INP również covers slow event handlers i renderowanie działć że fire po load, plus elementy like przeglądarka’s 300 ms tap opóźnienie na non-mobilny-optimized strony — none z który TBT sees.

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

Jeden historical note że trips people up: TBT używany robić przezć lab proxy dla pierwszy Input opóźnienie (FID). INP replaced FID jako Core Web Vital na March 12, 2024, więc TBT jest teraz INP’s proxy. underlying mechanism nigdy zmieniony — robić’s zawsze przezł o blocked main thread podczas load — ale dowolny older artykuł calling TBT “FID’s proxy” predates że switch.

Dlaczego TBT dominates Lighthouse score

TBT carries largest single weight w Lighthouse wydajność score — 30%, weighting introduced w Lighthouse 10 i, verified na-żywo wobec Chrome’s scoring docs na 2026-07-18, nadal unchanged przez bieżący Lighthouse 13:

Treat że tabela jako version-i-date-scoped, nie permanent constant — Lighthouse ma zmieniony jego weights przed i może again. Re-zweryfikować wobec Lighthouse wydajność scoring przed quoting robić w audit deck.

ten jest practical powód TBT matters dla SEO audits nawet though robić isn’t ranking signal: poor TBT ma outsized effect na że duży Lighthouse liczba everyone screenshots. Addy Osmani’s worked przykład tworzy robić concrete — removing jeden Intersection Observer polyfill cut TBT z 400 ms robić 300 ms i lifted Lighthouse wydajność score z 63 robić 70. Jeden poprawka, seven points, z powodu 30% weight.

Jeden więcej nuance: “Dobry ≤200 ms” kategoria threshold i Lighthouse score są różny scales. Robić score 90+ na TBT subscore ty potrzebować roughly ≤300 ms na mobilny, i robić hit 100 ty potrzebować ≤100 ms. (tamte subscore figures są DebugBear’s documentation z scoring curve, reverified wobec na-żywo źródło 2026-07-18.) “Dobry” i “100” są nie ten-sam bar.

robi TBT affect SEO rankings?

nie directly — i I’ll przezć straighter o ten niż najbardziej.

TBT jest nie ranking signal. Google’s interactivity ranking input jest INP, pole metric. TBT jest diagnostic że pomaga ty znaleźć i poprawka long tasks że hurt INP. poprawiając TBT może poprawić INP, który może marginally pomagać strona Experience side z rankings — ale że’s dwa linki z “może” away z twój positions.

i here’s my rzeczywisty position na whole Core Web Vitals question, który I’ve written przed w my szybkość strony poradnik: I don’t think Core Web Vitals mieć dużo impact na SEO, i unless ty’re extremely slow I ogólnie won’t prioritize them. robić them dla użytkownicy i conversions, nie dla ranking bump. że applies doubly robić TBT, który jest lab proxy dla pole metric dla mały ranking input. Poprawka robić ponieważ frozen strona loses ty klienci — nie ponieważ ty’re chasing position.

co causes wysoki TBT

Robić’s almost zawsze JavaScript:

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

Don’t assume bundle transfer size jest whole story, either. Trace attribution ma rzeczywisty gaps: cross-origin frames i worker threads mieć prywatność i security limits na co long-task observer może raport o them (widzieć Troubleshooting), więc unattributed task w twój trace isn’t proof brak third party jest involved — robić może tylko oznaczać attribution API isn’t allowed robić tell ty.

Jak robić poprawka wysoki TBT

poprawki są ten-sam family jako INP poprawki — oba come down robić blocked main thread.

1. Znaleźć long tasks. otwarty Chrome DevTools wydajność panel i wyglądać dla tasks ponad 50 ms (jeden’re flagged z red corners), lub uruchomić Lighthouse “Avoid long main-thread tasks” audit.
2. Audit third-party scripts pierwszy. Jeden’re zwykle easiest wins. użyj DevTools Coverage i Network tabs robić widzieć co każdy script costs, i lazy-load heavy embeds (YouTube, maps, chat) za facade.
3. Break up long tasks. Yield robić main thread więc przeglądarka może handle input między chunks — “gdy tasks są broken up, przeglądarka może respond robić higher-priority działć dużo sooner—w tym użytkownik interactions.” modern API jest scheduler.yield(), z setTimeout(resolve, 0) fallback (widzieć Cheat Sheets tab dla pattern). Note że Google brak longer recommends isInputPending() — yield regardless z whether input jest pending.
4. Reduce JavaScript. Code-split duży bundles więc mniej parses i evaluates przy load, usunąć unused JS (DevTools Coverage tab pokazuje ty co), i defer non-critical scripts.
5. Move heavy computation off main thread. Web Workers uruchomić CPU-heavy działć na oddzielny thread, leaving main thread free robić respond.

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

gdzie robić go następny

TBT lives w Core Web Vitals family alongside jego pole counterpart Interaction robić następny Paint, ładowanie metrics Largest Contentful Paint i pierwszy Contentful Paint, i lab narzędzia Lighthouse, PageSpeed Insights, i Speed Index że raport them. Jeśli ty tylko remember jeden element: TBT jest lab ostrzeżenie light dla pole responsiveness — chase long tasks, nie liczba.

AI summary

condensed take na Advanced version:

• TBT = blocked main-thread czas podczas load. Robić’s total czas, między FCP i TTI, main thread przezł blocked long enough robić zapobiegać input responsiveness.
• ** math:** sum z blocking portion (duration − 50 ms) z każdy long task (dowolny main-thread task ponad 50 ms). Tasks ≤50 ms dodawać 0 ms. Google’s worked przykład: tasks z 250/90/35/30/155 ms → 345 ms TBT.
• Robić’s lab metric. Ty widzieć robić w Lighthouse, PageSpeed Insights’ lab tab, i DevTools — nigdy w CrUX lub Wyszukiwanie Console.
• nie Core Web Vital. trzy CWV są LCP, INP, CLS. TBT jest lab proxy dla INP (historically FID’s proxy; INP replaced FID na March 12, 2024).
• Biggest Lighthouse weight: 30% — single largest, więc poor TBT tanks overall score. mobilny thresholds: dobry ≤200 ms, potrzebuje improvement ≤600 ms, poor

600 ms.

• Rankings: nie bezpośredni czynnik rankingowy. INP jest pole signal; TBT tylko pomaga diagnose robić. Patrick’s take: poprawka robić dla użytkownicy i conversions, nie dla ranking bump.
• Poprawki (ten-sam family jako INP): znaleźć long tasks w DevTools, audit third-party scripts pierwszy, break up tasks z scheduler.yield(), code-split i usunąć unused JS, offload heavy działć robić 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 dane wins.
• “Lab-tylko” oznacza lab-recommended, nie lab-impossible. Ty może technically compute TBT-style total z pole dane z Long Tasks API, ale Google advises wobec robić (too dużo uruchomić-robić-uruchomić variance) — CrUX i Wyszukiwanie Console simply nigdy carry robić either sposób.
• Trace attribution ma rzeczywisty gaps. Cross-origin frames i worker threads mieć prywatność/security limits na co long-task observer może raport, więc unattributed task oznacza “cause unknown,” nie “brak third party involved.”

Oficjalny documentation

Główny-źródło documentation na TBT z Google i Chrome zespół.

web.dev / Chrome

• Total Blocking Czas (TBT) — Philip Walton & Barry Pollard: canonical definition, 50 ms long-task reguł, i worked przykład.
• TBT Lighthouse audit — audit strona, z mobilny/komputer stacjonarny scoring thresholds i cited causes.
• Lighthouse wydajność scoring — metric weights, gdzie TBT’s 30% comes z.
• Web Vitals — dlaczego TBT jest nie Core Web Vital i jak robić relates robić ustawić.
• Interaction robić następny Paint (INP) — pole metric TBT proxies, i “proxy, nie substitute” caveat.
• Optimize long tasks — Jeremy Wagner & Brendan Kenny na breaking up tasks, scheduler.yield(), i dlaczego isInputPending() jest brak longer recommended.
• Czas robić Interactive (TTI) — metric że defines end z TBT window, i dlaczego robić przezł removed z Lighthouse 10.
• Lab i pole dane differences — limits z TBT jako INP stand-w.

cytaty z źródło

Na—record statements z Google’s documentation. każdy link jest deep link że jumps robić 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.” (tłumaczenie) „Łączny czas po FCP, w którym główny wątek był blokowany na tyle długo, by uniemożliwić reakcję na dane wejściowe”. — web.dev, Total Blocking Czas. Jump robić cytat
• “a task that runs on the main thread for more than 50 milliseconds” (tłumaczenie) „zadanie działające w głównym wątku przez ponad 50 milisekund” — definicja długiego zadania. Jump robić 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.” (tłumaczenie) „Aby zapewnić dobre wrażenia, witryny powinny dążyć do TBT poniżej 200 milisekund na przeciętnym urządzeniu mobilnym”. Jump robić cytat
• “A low TBT often correlates with a low Interaction to Next Paint (INP).” (tłumaczenie) „Niski TBT często koreluje z niskim INP”. Jump robić cytat

Status: nie Core Web Vital

• “Total Blocking Czas (TBT) jest lab metrics jest vital w catching i diagnosing potential interactivity problemy że może impact INP. However, robić jest nie part z Core Web Vitals set ponieważ jeden są nie field-measurable, nor robić jeden reflect użytkownik-centric outcome.” — web.dev, Web Vitals (Philip Walton). (Grammar jest verbatim z źródło.) Jump robić cytat

TBT jako INP proxy

• “W such cases, Total Blocking Czas (TBT) może przezć reasonable proxy metric dla INP, ale robić’s nie substitute dla INP w i z itself.” — web.dev, Interaction robić następny Paint. Jump robić 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.” (tłumaczenie) „Główny wątek może przetwarzać tylko jedno zadanie naraz. Zadanie trwające ponad 50 milisekund jest długim zadaniem”. — web.dev, Optimize long tasks. Jump robić cytat
• “When tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” (tłumaczenie) „Po podzieleniu zadań przeglądarka może znacznie szybciej reagować na prace o wyższym priorytecie, w tym interakcje”. Jump robić cytat
• O isInputPending(): “We no longer recommend using this API, and instead recommend yielding regardless of whether input is pending or not.” (tłumaczenie) „Nie zalecamy już tego API; zalecamy ustępowanie wątku niezależnie od oczekujących danych wejściowych”. Jump robić cytat

TTI i dlaczego TBT replaced robić jako key interactivity liczba

• “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Czas (TBT), i Interaction robić Next Paint (INP) są zwykle better metrics robić używać w place z TTI.” — web.dev, Czas robić Interactive (Philip Walton). Jump robić cytat

TBT triage checklist

quick pass gdy Lighthouse hands ty red (lub orange) Total Blocking Czas:

• Potwierdzić ty’re reading lab dane — TBT jest w Lighthouse / PageSpeed Insights’ lab tab / DevTools, nie pole lub Wyszukiwanie Console.
• otwarty DevTools wydajność panel i znaleźć 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; robić’s zwykle biggest, easiest win.
• Lazy-load heavy embeds (YouTube, maps, chat) za facade.
• Uruchomić Lighthouse “Avoid long main-thread tasks” i “Reduce unused JavaScript” audits i działć lista.
• Code-split duży bundles więc mniej JS parses/evaluates przy 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 robić Web Worker.
• Cross-sprawdź pole: pull INP z CrUX / rzeczywisty-użytkownik monitorowanie. Jeśli INP jest fine, don’t ponad-invest w chasing lab liczba.

TBT cheat sheet

** math, w jeden 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. Lighthouse subscore curve differ: 90+ ≈ ≤300 ms mobilny, 100 ≈ ≤100 ms mobilny — DebugBear’s udokumentowany figures, reverified na-żywo 2026-07-18.)

TBT vs. INP — cheat sheet

Yield-robić-main pattern ( poprawka)

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

używać scheduler.yield() gdzie dostępny, fall back robić setTimeout. Don’t używać isInputPending() — Google teraz recommends yielding regardless z whether input jest pending.

narzędzia dla measuring i fixing TBT

• PageSpeed Insights — czytać TBT w lab dane sekcja (robić’s nie w pole-dane sekcja, ponieważ TBT isn’t pole metric).
• Lighthouse (Chrome DevTools → Lighthouse panel, lub CLI) — źródło z TBT liczba i “Avoid long main-thread tasks” / “Reduce unused JavaScript” audits.
• Chrome DevTools — wydajność panel — record load i znaleźć long tasks (ponad 50 ms, flagged z red corners) że tworzyć up twój TBT.
• Chrome DevTools — Coverage tab — widzieć jak dużo z każdy script jest faktycznie używany, robić target unused JavaScript i heavy third parties.
• WebPageTest — lab testing z detailed main-thread i CPU breakdowns.
• Long Animation Frames (LoAF) API — modern, pole-side complement robić TBT, nie replacement dla jego lab load-window calculation: robić atrybuty long animation frames w całym whole visit, który jest closer robić jak INP problemy faktycznie surface, zamiast TBT’s single FCP-robić-TTI load window.
• pole-side TBT via Long Tasks API — technically możliwy (sum duration − 50 ms dla observed long tasks w production, ten-sam jako Scripts tab snippet), ale Google recommends wobec robić dla RUM: rzeczywisty użytkownik interaction timing tworzy liczba too variable robić porównywać uruchomić ponad uruchomić. Reach dla INP lub LoAF dla pole responsiveness zamiast.
• gdzie ty won’t znaleźć robić: Google Wyszukiwanie Console’s Core Web Vitals raport i CrUX carry LCP, INP, i CLS tylko — nigdy TBT, regardless z co’s technically możliwy robić compute yourself.

TBT mistakes że produce błędny poprawka

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

TBT jest wysoki ale network wygląda fast

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

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

Poprawka i confirmation: Record wydajność trace, sort long tasks przez duration i owner, wtedy usunąć unused code, defer noncritical działć, lub split largest task. Potwierdzić blocking portion falls w repeated matched runs.

duży bundle jest deferred ale TBT stays wysoki

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

prawdopodobny cause: ten-sam expensive code nadal executes inside FCP-robić-TTI window.

Poprawka i confirmation: Profile functions inside long task. Code-split przez route lub interaction, reduce hydration, lub usunąć unused/duplicate działć; wtedy zweryfikować że execution czas, nie merely żądanie start czas, declines.

Lighthouse TBT jest dobry podczas gdy pole INP jest poor

Symptom: Navigation lab tests wyglądać responsive, ale CrUX lub RUM raporty slow interactions.

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

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

long task pokazuje up z brak jasny owner

Symptom: DevTools lub Long Tasks API observer flags blocking task, ale attribution jest pusty, ogólny lub oznaczony jako „nieznany” albo „z innego pochodzenia”.

prawdopodobny cause: ten jest znany coverage gap, nie pomiar błąd. Long Tasks API’s own specification bounds co robić będzie raport w całym execution contexts — cross-origin ancestor tasks są deliberately nie reported (“this is not reported because of security” (tłumaczenie) „nie jest to raportowane ze względów bezpieczeństwa”), i deeply embedded cross-origin iframe “robi nie receive dowolny information” o long task w cross-origin ancestor. działć happening w Web Worker lub przeglądarka’s compositor thread może również fall outside co attribution surfaces ty.

Poprawka i confirmation: Don’t conclude “brak third party jest involved” tylko ponieważ nothing jest named. Cross-sprawdzenie z Network panel’s initiator column, Coverage tab, i (gdzie ty control script) pierwszy-party instrumentation inside iframes ty own. Treat unattributed task jako “cause unknown,” nie “cause absent.”

TBT varies sharply między runs

Symptom: Jeden uruchomić jest green i następny jest poor z brak deployment.

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

Poprawka i confirmation: Match settings, uruchomić several cold tests, i porównaj long task owners i median wynik zamiast selecting jeden score.

Turn trace robić 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ć dwa 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 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 reproduction

Uruchomić ten early w DevTools Console, reproduce 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 debugging total dla period ty observe, nie Lighthouse’s oficjalny TBT unless ty deliberately reproduce ten-sam FCP-robić-TTI window i test conditions.

Flag scripts z najbardziej main-thread evaluation czas

po recording DevTools wydajność trace, użyj Bottom-up widok grouped przez URL. dla quick network stan magazynowy alongside robić, ten Console snippet listy transferred JavaScript z largest robić 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 lead; wydajność trace jest co atrybuty parsing i execution czas robić TBT.

Long-task reduction

Test robić uruchomić: Capture several matched Lighthouse/wydajność traces przed i po JavaScript zmieniać i porównywać long tasks między FCP i TTI.

Oczekiwany wynik: targeted task disappears, shortens, lub yields robić smaller tasks, i median TBT poprawia bez delaying FCP lub breaking functionality.

awaria interpretation: działć moved robić another bundle/task, nadal executes w ten-sam window, lub normal uruchomić variance jest larger niż zmieniać.

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

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

Third-party deferral

Test robić uruchomić: porównywać cold trace z third party w jego bieżący position i z robić delayed until zgoda, idle czas, lub istotny interaction.

Oczekiwany wynik: jego long tasks leave initial TBT window podczas gdy required firma event nadal fires przy intended czas.

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

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

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

pole responsiveness follow-up

Test robić uruchomić: Segment pole INP dla affected templates/urządzenia po lab TBT zmieniać podczas gdy keeping deployment date annotated.

Oczekiwany wynik: pole responsiveness stays stable lub poprawia; lab-tylko win jest nie reported jako użytkownik outcome until pole dowód obsługuje robić.

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

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

Rollback trigger: Investigate lub roll back jeśli pole INP lub critical interaction sukces regresses consistently po release.

Test yourself: Total Blocking Czas

Five quick questions na TBT math i diagnosis. Wybrać answer dla każdy, wtedy sprawdzenie.

zasoby worth twój czas

Oficjalny

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

Z innych źródeł (zweryfikuj przed cytowaniem)

• DebugBear — Total Blocking Time — szczegółowe techniczne omówienie związku TBT z INP oraz krzywej punktacji Lighthouse.
• NitroPack — co jest Total Blocking Czas? — “task count ≠ blocking czas” insight.
• BrowserStack — TBT poradnik i Catchpoint — TBT — narzędzie/monitorowanie-oriented overviews.
• web.dev — metryki wydajności skupione na użytkowniku — model Philipa Waltona klasyfikujący TBT jako laboratoryjną metrykę responsywności ładowania; wyjaśnia brak TBT w CrUX.
• web.dev — Getting started z measuring Web Vitals — covers jak TBT serves jako lab proxy dla INP gdy rzeczywisty-użytkownik pomiar isn’t możliwy w 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 wysoki score.
• Search Engine Journal — materiały o Core Web Vitals — bieżące wiadomości branżowe o CWV, roli TBT w audytach i interpretacji różnic między laboratorium a polem.

Stats worth citing

• TBT jest 30% z Lighthouse wydajność score — single largest weight z dowolny metric (LCP i CLS są 25% każdy; FCP i Speed Index 10% każdy). Introduced w Lighthouse 10, na-żywo-reverified 2026-07-18 jako unchanged przez Lighthouse 13. źródło
• ** “dobry” bar jest ≤200 ms na mobilny** (≤150 ms komputer stacjonarny); “poor” jest >600 ms mobilny (>350 ms komputer stacjonarny) — Lighthouse audit docs. źródło
• Jeden polyfill = seven points. Removing single Intersection Observer polyfill cut TBT z 400 ms robić 300 ms i lifted Lighthouse wydajność score z 63 robić 70 — clean illustration z 30% weight. źródło
• ** 250 ms task contributes 200 ms z blocking czas** — 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