Panduan Total Blocking Time (TBT)

TL;DR — Total Blocking Time (TBT) measures how panjang Anda halaman adalah frozen — unable untuk respond untuk sebuah click atau tap — while ini memuat. sebuah lab alat like Lighthouse menambahkan up semua time main thread adalah blocked antara pertama paint dan when halaman becomes interactive. di bawah 200 ms adalah baik. ini adalah sebuah lab-hanya angka, ini adalah not sebuah Core Web Vital, dan ini won’t tampilkan up di Search Console.

What TBT adalah

When sebuah halaman memuat, browser memiliki one main thread doing heavy lifting — running JavaScript, membangun halaman, reacting untuk Anda clicks. ini dapat hanya melakukan one thing di sebuah time. jika sebuah chunk dari JavaScript hogs itu thread untuk too panjang, halaman goes momentarily unresponsive: Anda tap sebuah button dan nothing happens until script finishes.

Total Blocking Time adalah sebuah pengukuran dari exactly itu frozen time selama muat. sebuah testing alat like Lighthouse memuat Anda halaman di sebuah controlled environment, watches main thread, dan menambahkan up semua time ini adalah blocked dari responding untuk input.

50ms aturan

Not setiap bit dari berfungsi counts. browser dapat handle pendek tasks without Anda noticing. line adalah 50 milliseconds: apa pun task itu runs longer daripada itu adalah sebuah “long task,” (terjemahan) “panjang task,” dan hanya bagian above 50 ms counts sebagai blocking time.

So sebuah task itu runs untuk 70 ms menambahkan 20 ms untuk Anda TBT. sebuah task itu runs untuk 40 ms menambahkan nothing. TBT adalah sum dari semua itu “above 50 ms” (terjemahan) “above 50 ms” slivers while halaman adalah memuat.

What’s sebuah baik score?

di Lighthouse, pada mobile:

• baik: 200 ms atau less
• perlu improvement: up untuk 600 ms
• Poor: di atas 600 ms

thing sebagian besar people get wrong

TBT adalah not sebuah Core Web Vital. three Core Web Vitals adalah LCP, INP, dan CLS. TBT adalah sebuah lab alat itu helps predict Anda Interaction untuk Next Paint (INP) — nyata-pengguna metric Google actually menggunakan. Anda won’t temukan TBT di Google Search Console atau di data lapangan, because ini adalah diukur oleh simulating sebuah pemuatan halaman, not oleh watching nyata pengunjung.

ingin full mechanics — worked contoh, why TBT carries paling weight di Lighthouse, TBT-vs-INP difference, dan cara actually fix ini? Switch untuk Advanced tab.

TL;DR — TBT adalah total amount dari time, antara pertama Contentful Paint dan Time untuk Interactive, itu main thread adalah blocked panjang enough untuk mencegah input responsiveness. ini sums blocking portion (duration − 50 ms) dari setiap panjang task (apa pun main-thread task di atas 50 ms). ini adalah sebuah lab metric — single largest weight (30%) di Lighthouse 10 score dan lab proxy untuk INP — tetapi ini adalah not sebuah Core Web Vital dan tidak pernah appears di CrUX atau Search Console. Mobile thresholds: baik ≤200 ms, poor >600 ms. Fix ini like Anda’d fix INP: break up panjang JS tasks, code-split, defer/hapus unused JS, tame ketiga-party scripts. My honest take: fix ini untuk pengguna, not untuk sebuah peringkat bump.

What TBT actually measures

Google’s definition adalah place untuk start. TBT adalah “the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.” (terjemahan) “ total amount dari time setelah pertama Contentful Paint (FCP) where main thread adalah blocked untuk panjang enough untuk mencegah input responsiveness.” browser’s main thread processes one task di sebuah time; while ini adalah busy dengan sebuah panjang chunk dari berfungsi, ini dapat’t react untuk sebuah click, sebuah tap, atau sebuah keypress. TBT quantifies how much dari Anda halaman-muat window adalah spent di itu blocked state.

Two definitions melakukan semua berfungsi here:

• sebuah panjang task adalah “a task that runs on the main thread for more than 50 milliseconds.” (terjemahan) “sebuah task itu runs pada main thread untuk more daripada 50 milliseconds.”
• blocking portion dari sebuah task adalah -nya duration minus 50 ms. Tasks di atau di bawah 50 ms contribute exactly 0 ms.

TBT adalah sum dari itu blocking portions antara FCP dan Time untuk Interactive (TTI). So pertama Contentful Paint adalah start line: nothing sebelum pertama paint counts, because there’s nothing pada screen untuk interact dengan yet.

worked contoh

Google’s own table adalah clearest illustration. Imagine five tasks run pada main thread antara FCP dan TTI:

Tasks three dan four adalah di bawah 50 ms line, so mereka contribute nothing. Task one blocks untuk 250 − 50 = 200 ms, task five untuk 155 − 50 = 105 ms. tambahkan blocking portions — 200 + 40 + 0 + 0 + 105 — dan Anda get 345 ms dari TBT. itu’s sebuah “needs improvement” (terjemahan) “perlu improvement” score, driven almost entirely oleh two heavy tasks.

ini adalah counter-intuitive bagian worth internalizing: “A small number of tasks on the main thread doesn’t necessarily mean low blocking time. Conversely, a large number of tasks doesn’t necessarily lead to tons of blocking time.” (terjemahan) “sebuah kecil angka dari tasks pada main thread doesn’t necessarily berarti rendah blocking time. Conversely, sebuah besar angka dari tasks doesn’t necessarily lead untuk tons dari blocking time.” (itu framing adalah NitroPack’s, relayed here — reverified terhadap live source 2026-07-18.) What penting adalah whether individual tasks cross 50 ms, not how banyak tasks ada.

pengukuran window: FCP untuk TTI

window ends di Time untuk Interactive — “the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.” (terjemahan) “ time dari when halaman starts memuat untuk when -nya main sub-resources memiliki dimuat dan ini adalah capable dari reliably responding untuk pengguna input quickly.” di Lighthouse, TTI adalah ditemukan oleh searching forward untuk sebuah five-kedua “quiet window” (terjemahan) “quiet window” dengan no panjang tasks dan no more daripada two di-flight network permintaan.

Worth noting: TTI itself adalah dihapus dari Lighthouse 10 because ini proved overly sensitive untuk outlier network permintaan dan panjang tasks, producing tinggi variability. TBT survived dan became primary interactivity metric. sebagai Philip Walton put ini, “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.” (terjemahan) “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Interaction untuk Next Paint (INP) adalah biasanya better metrics untuk gunakan di place dari TTI.” TBT didn’t replace TTI sebagai window’s endpoint — ini adalah sebuah better single angka untuk yang sama underlying masalah. dan TTI’s disappearance dari Lighthouse report UI isn’t yang sama claim sebagai TTI no longer bounding Lighthouse’s default navigation window — window itself adalah masih diukur itu cara di bawah hood.

One more scoping note: “FCP to TTI” (terjemahan) “FCP untuk TTI” describes Lighthouse’s default navigation audit specifically. lainnya alat, atau Lighthouse itself running sebuah timespan trace alih-alih sebuah full halaman-muat navigation, dapat total sebuah berbeda diukur window — 50 ms panjang-task math doesn’t perubahan, tetapi start dan end poin dari what gets summed adalah alat- dan trace-mode-spesifik, not sebuah universal law dari metric.

adalah TBT sebuah Core Web Vital? No.

ini adalah paling umum misconception, so let’s menjadi blunt tentang ini. three Core Web Vitals adalah LCP, INP, dan CLS. TBT adalah not one dari them. Google’s own wording: “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.” (terjemahan) “Total Blocking Time (TBT) adalah sebuah lab metrics adalah vital di catching dan diagnosing potential interactivity issues itu dapat impact INP. However, ini adalah not bagian dari Core Web Vitals set because mereka adalah not field-measurable, nor melakukan mereka reflect sebuah pengguna-centric outcome.” ( grammar di itu kalimat adalah theirs, not mine.)

So where melakukan TBT tampilkan up, dan where doesn’t ini?

• Where Anda see ini: Lighthouse, PageSpeed Insights’ lab tab, dan Chrome DevTools — semua simulated/lab environments.
• Where Anda tidak: Google Search Console’s Core Web Vitals report, CrUX, atau apa pun data lapangan. itu hanya carry LCP, INP, dan CLS.

jika someone tells Anda mereka’re “watching TBT in Search Console,” (terjemahan) “watching TBT di Search Console,” mereka’re mistaken — GSC reports data lapangan, dan TBT isn’t sebuah field metric.

One correction worth menjadi precise tentang: TBT menjadi lab-recommended isn’t sama sebagai TBT menjadi field-impossible. Anda dapat technically compute sebuah TBT-style total di lapangan dengan panjang Tasks API — Google says so directly: “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.” (terjemahan) “ini adalah mungkin untuk mengukur TBT di lapangan, tetapi kami don’t recommend ini sebagai pengguna interaction dapat affect Anda halaman’s TBT di cara itu lead untuk lots dari variance di Anda reports.” itu’s sebuah recommendation terhadap ini, not sebuah technical wall. What’s actually benar without exception adalah narrower: CrUX dan Search Console’s Core Web Vitals report tidak pernah carry TBT, full stop — itu pipelines hanya ever collect LCP, INP, dan CLS.

TBT adalah lab proxy untuk INP

Here’s why TBT exists di semua. Lab alat muat sebuah halaman di sebuah simulated environment dengan no nyata pengguna, so mereka dapat’t mengukur Interaction untuk Next Paint — INP perlu actual clicks dan taps. TBT fills itu gap: “the Total Blocking Time (TBT) metric is lab-measurable and is a proxy for INP.” (terjemahan) “ Total Blocking Time (TBT) metric adalah lab-measurable dan adalah sebuah proxy untuk INP.”

two adalah mechanically related: “Although INP and TBT are calculated differently, they are both reflections of a blocked main thread during the bootstrap process. When the main thread is blocked, the browser is delayed in responding to user interactions.” (terjemahan) “Although INP dan TBT adalah calculated differently, mereka adalah both reflections dari sebuah blocked main thread selama bootstrap process. When main thread adalah blocked, browser adalah delayed di responding untuk pengguna interactions.” dan empirically, “A low TBT often correlates with a low Interaction to Next Paint (INP).” (terjemahan) “sebuah rendah TBT sering correlates dengan sebuah rendah Interaction untuk Next Paint (INP).”

tetapi “proxy” (terjemahan) “proxy” adalah not “substitute.” (terjemahan) “substitute.” Google adalah explicit: “Total Blocking Time (TBT) may be a reasonable proxy metric for INP, but it’s not a substitute for INP in and of itself.” (terjemahan) “Total Blocking Time (TBT) dapat menjadi sebuah reasonable proxy metric untuk INP, tetapi ini adalah not sebuah substitute untuk INP di dan dari itself.” mereka diverge di nyata cara:

• tinggi TBT, fine INP. TBT measures blocking selama muat. jika Anda pengguna don’t actually try untuk interact selama itu blocked window — mereka wait untuk halaman untuk look finished pertama — mereka INP dapat menjadi fine bahkan dengan sebuah ugly TBT.
• Fine TBT, poor INP. INP juga covers slow event handlers dan rendering berfungsi itu fire setelah muat, plus things like browser’s 300 ms tap delay pada non-mobile-dioptimalkan halaman — none dari which TBT sees.

When lab dan field disagree, trust field. INP ( nyata-pengguna angka) takes priority di atas TBT ( lab estimate).

One historical note itu trips people up: TBT digunakan untuk menjadi lab proxy untuk pertama Input Delay (FID). INP replaced FID sebagai sebuah Core Web Vital pada March 12, 2024, so TBT adalah now INP’s proxy. underlying mechanism tidak pernah changed — ini adalah selalu telah tentang sebuah blocked main thread selama muat — tetapi apa pun older artikel calling TBT “FID’s proxy” (terjemahan) “FID’s proxy” predates itu switch.

Why TBT dominates Lighthouse score

TBT carries largest single weight di Lighthouse performa score — 30%, sebuah weighting introduced di Lighthouse 10 dan, verified live terhadap Chrome’s scoring docs pada 2026-07-18, masih unchanged melalui saat ini Lighthouse 13:

Treat itu table sebagai versi-dan-date-scoped, not sebuah permanent constant — Lighthouse memiliki changed -nya weights sebelum dan dapat again. Re-verify terhadap Lighthouse performa scoring sebelum quoting ini di sebuah audit deck.

ini adalah practical alasan TBT penting untuk SEO audits bahkan though ini isn’t sebuah sinyal peringkat: sebuah poor TBT memiliki sebuah outsized effect pada itu big Lighthouse angka everyone screenshots. Addy Osmani’s worked contoh membuat ini concrete — menghapus one Intersection Observer polyfill cut TBT dari 400 ms untuk 300 ms dan lifted Lighthouse performa score dari 63 untuk 70. One fix, seven poin, karena 30% weight.

One more nuance: “Good ≤200 ms” (terjemahan) “baik ≤200 ms” category threshold dan Lighthouse score adalah berbeda scales. untuk score 90+ pada TBT subscore Anda perlu roughly ≤300 ms pada mobile, dan untuk hit 100 Anda perlu ≤100 ms. (itu subscore figures adalah DebugBear’s documentation dari scoring curve, reverified terhadap live source 2026-07-18.) “Good” (terjemahan) “baik” dan “100” (terjemahan) “100” adalah not yang sama bar.

melakukan TBT affect SEO rankings?

Not directly — dan I’ll menjadi straighter tentang ini daripada sebagian besar.

TBT adalah not sebuah sinyal peringkat. Google’s interactivity peringkat input adalah INP, sebuah field metric. TBT adalah sebuah diagnostic itu helps Anda temukan dan fix panjang tasks itu hurt INP. Improving TBT dapat meningkatkan INP, which mungkin marginally help halaman Experience side dari rankings — tetapi itu’s two tautan dari “may” (terjemahan) “dapat” away dari Anda positions.

dan here’s my actual position pada whole Core Web Vitals pertanyaan, which I’ve written sebelum di my kecepatan halaman guide: I don’t think Core Web Vitals memiliki much impact pada SEO, dan unless Anda’re extremely slow I umumnya won’t prioritize them. melakukan them untuk pengguna dan conversions, not untuk sebuah peringkat bump. itu applies doubly untuk TBT, which adalah sebuah lab proxy untuk sebuah field metric untuk sebuah kecil peringkat input. Fix ini because sebuah frozen halaman loses Anda customers — not because Anda’re chasing sebuah position.

What causes tinggi TBT

ini adalah almost selalu JavaScript:

• Unnecessary JavaScript memuat, parsing, atau execution — Lighthouse audit’s own kata. Shipping sebuah big bundle halaman doesn’t perlu di muat adalah classic cause.
• Inefficient JavaScript statements — heavy synchronous berfungsi itu monopolizes main thread.
• ketiga-party scripts — tag managers, chat widgets, analytics, ad scripts. sering single biggest contributor, dan one Anda control least.
• Heavy framework bootstrap — React hydration dan similar dapat run panjang tasks selama startup.
• Style/layout recalculation dan garbage collection — forced synchronous layout, besar style recalcs, dan GC pauses tampilkan up sebagai main-thread tasks too; don’t assume setiap panjang task di trace adalah JavaScript execution.

Don’t assume bundle transfer size adalah whole story, either. Trace attribution memiliki nyata gaps: cross-origin frames dan worker threads memiliki privacy dan security limits pada what sebuah panjang-task observer dapat report tentang them (see Troubleshooting), so sebuah unattributed task di Anda trace isn’t proof no ketiga party adalah involved — ini dapat hanya berarti attribution API isn’t allowed untuk tell Anda.

cara fix tinggi TBT

fixes adalah yang sama family sebagai INP fixes — both come down untuk sebuah blocked main thread.

1. temukan panjang tasks. Open Chrome DevTools performa panel dan cari tasks di atas 50 ms (mereka’re flagged dengan red corners), atau run Lighthouse “Avoid long main-thread tasks” (terjemahan) “hindari panjang main-thread tasks” audit.
2. Audit ketiga-party scripts pertama. mereka’re biasanya easiest wins. gunakan DevTools Coverage dan Network tabs untuk see what setiap script costs, dan lazy-muat heavy embeds (YouTube, maps, chat) behind sebuah facade.
3. Break up panjang tasks. Yield untuk main thread so browser dapat handle input antara chunks — “when tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” (terjemahan) “when tasks adalah broken up, browser dapat respond untuk higher-priority berfungsi much sooner—including pengguna interactions.” modern API adalah scheduler.yield(), dengan sebuah setTimeout(resolve, 0) fallback (see Cheat Sheets tab untuk pattern). Note itu Google no longer recommends isInputPending() — yield regardless dari whether input adalah pending.
4. Reduce JavaScript. Code-split besar bundles so less parses dan evaluates di muat, hapus unused JS (DevTools Coverage tab menampilkan Anda what), dan defer non-critical scripts.
5. Move heavy computation off main thread. Web Workers run CPU-heavy berfungsi pada sebuah separate thread, leaving main thread free untuk respond.

sebuah berguna side effect: panjang tasks itu block main thread dapat juga delay Largest Contentful Paint rendering, so fixing TBT sometimes improves LCP too — terutama when render-blocking JS adalah involved.

Where untuk go next

TBT lives di Core Web Vitals family alongside -nya field counterpart Interaction untuk Next Paint, memuat metrics Largest Contentful Paint dan pertama Contentful Paint, dan lab alat Lighthouse, PageSpeed Insights, dan Speed indeks itu report them. jika Anda hanya remember one thing: TBT adalah lab warning light untuk field responsiveness — chase panjang tasks, not angka.

AI summary

sebuah condensed take pada Advanced versi:

• TBT = blocked main-thread time selama muat. ini adalah total time, antara FCP dan TTI, main thread adalah blocked panjang enough untuk mencegah input responsiveness.
• ** math:** sum dari blocking portion (duration − 50 ms) dari setiap panjang task (apa pun main-thread task di atas 50 ms). Tasks ≤50 ms tambahkan 0 ms. Google’s worked contoh: tasks dari 250/90/35/30/155 ms → 345 ms TBT.
• ini adalah sebuah lab metric. Anda see ini di Lighthouse, PageSpeed Insights’ lab tab, dan DevTools — tidak pernah di CrUX atau Search Console.
• Not sebuah Core Web Vital. three CWV adalah LCP, INP, CLS. TBT adalah lab proxy untuk INP (historically FID’s proxy; INP replaced FID pada March 12, 2024).
• Biggest Lighthouse weight: 30% — single largest, so sebuah poor TBT tanks overall score. Mobile thresholds: baik ≤200 ms, perlu improvement ≤600 ms, poor

600 ms.

• Rankings: not sebuah direct peringkat factor. INP adalah field signal; TBT hanya helps diagnose ini. Patrick’s take: fix ini untuk pengguna dan conversions, not untuk sebuah peringkat bump.
• Fixes (sama family sebagai INP): temukan panjang tasks di DevTools, audit ketiga-party scripts pertama, break up tasks dengan scheduler.yield(), code-split dan hapus unused JS, offload heavy berfungsi untuk Web Workers.
• Caveat: TBT dan INP dapat diverge — tinggi TBT dengan fine INP (pengguna don’t interact selama muat) atau fine TBT dengan poor INP (slow event handlers setelah muat). Field data wins.
• “Lab-only” (terjemahan) “Lab-hanya” berarti lab-recommended, not lab-impossible. Anda dapat technically compute sebuah TBT-style total dari data lapangan dengan panjang Tasks API, tetapi Google advises terhadap ini (too much run-untuk-run variance) — CrUX dan Search Console simply tidak pernah carry ini either cara.
• Trace attribution memiliki nyata gaps. Cross-origin frames dan worker threads memiliki privacy/security limits pada what sebuah panjang-task observer dapat report, so sebuah unattributed task berarti “cause unknown,” (terjemahan) “cause unknown,” not “no third party involved.” (terjemahan) “no ketiga party involved.”

Official documentation

Primary-source documentation pada TBT dari Google dan Chrome team.

web.dev / Chrome

• Total Blocking Time (TBT) — Philip Walton & Barry Pollard: canonical definition, 50 ms panjang-task aturan, dan worked contoh.
• TBT Lighthouse audit — audit halaman, dengan mobile/desktop scoring thresholds dan cited causes.
• Lighthouse performa scoring — metric weights, where TBT’s 30% comes dari.
• Web Vitals — why TBT adalah not sebuah Core Web Vital dan how ini relates untuk set.
• Interaction untuk Next Paint (INP) — field metric TBT proxies, dan “proxy, not substitute” (terjemahan) “proxy, not substitute” caveat.
• mengoptimalkan panjang tasks — Jeremy Wagner & Brendan Kenny pada breaking up tasks, scheduler.yield(), dan why isInputPending() adalah no longer recommended.
• Time untuk Interactive (TTI) — metric itu defines end dari TBT window, dan why ini adalah dihapus dari Lighthouse 10.
• Lab dan data lapangan differences — limits dari TBT sebagai sebuah INP stand-di.

Quotes dari source

pada—record statements dari Google’s documentation. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

Definition dan mechanics

• “the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.” (terjemahan) “ total amount dari time setelah pertama Contentful Paint (FCP) where main thread adalah blocked untuk panjang enough untuk mencegah input responsiveness.” — web.dev, Total Blocking Time. Jump untuk quote
• “a task that runs on the main thread for more than 50 milliseconds” (terjemahan) “sebuah task itu runs pada main thread untuk more daripada 50 milliseconds” — definition dari sebuah panjang task. Jump untuk quote
• “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.” (terjemahan) “untuk menyediakan sebuah baik pengguna experience, situs seharusnya strive untuk memiliki sebuah Total Blocking Time dari less daripada 200 milliseconds when tested pada average mobile hardware.” Jump untuk quote
• “A low TBT often correlates with a low Interaction to Next Paint (INP).” (terjemahan) “sebuah rendah TBT sering correlates dengan sebuah rendah Interaction untuk Next Paint (INP).” Jump untuk quote

Status: not sebuah 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.” (terjemahan) “Total Blocking Time (TBT) adalah sebuah lab metrics adalah vital di catching dan diagnosing potential interactivity issues itu dapat impact INP. However, ini adalah not bagian dari Core Web Vitals set because mereka adalah not field-measurable, nor melakukan mereka reflect sebuah pengguna-centric outcome.” — web.dev, Web Vitals (Philip Walton). (Grammar adalah verbatim dari source.) Jump untuk quote

TBT sebagai 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.” (terjemahan) “di such cases, Total Blocking Time (TBT) dapat menjadi sebuah reasonable proxy metric untuk INP, tetapi ini adalah not sebuah substitute untuk INP di dan dari itself.” — web.dev, Interaction untuk Next Paint. Jump untuk quote

panjang tasks dan 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.” (terjemahan) “ main thread dapat hanya process one task di sebuah time. apa pun task itu takes longer daripada 50 milliseconds adalah sebuah panjang task.” — web.dev, mengoptimalkan panjang tasks. Jump untuk quote
• “When tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” (terjemahan) “When tasks adalah broken up, browser dapat respond untuk higher-priority berfungsi much sooner—including pengguna interactions.” Jump untuk quote
• pada isInputPending(): “We no longer recommend using this API, and instead recommend yielding regardless of whether input is pending or not.” (terjemahan) “kami no longer recommend menggunakan ini API, dan instead recommend yielding regardless dari whether input adalah pending atau not.” Jump untuk quote

TTI dan why TBT replaced ini sebagai key interactivity angka

• “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.” (terjemahan) “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Interaction untuk Next Paint (INP) adalah biasanya better metrics untuk gunakan di place dari TTI.” — web.dev, Time untuk Interactive (Philip Walton). Jump untuk quote

TBT triage checklist

sebuah quick pass when Lighthouse hands Anda sebuah red (atau orange) Total Blocking Time:

• Confirm Anda’re reading lab data — TBT adalah di Lighthouse / PageSpeed Insights’ lab tab / DevTools, not field atau Search Console.
• Open DevTools performa panel dan temukan panjang tasks (di atas 50 ms, red-cornered) antara pertama paint dan interactive.
• List Anda ketiga-party scripts dan what setiap costs (Coverage + Network tabs) — start here; ini adalah biasanya biggest, easiest win.
• Lazy-muat heavy embeds (YouTube, maps, chat) behind sebuah facade.
• Run Lighthouse “Avoid long main-thread tasks” (terjemahan) “hindari panjang main-thread tasks” dan “Reduce unused JavaScript” (terjemahan) “Reduce unused JavaScript” audits dan berfungsi list.
• Code-split besar bundles so less JS parses/evaluates di muat.
• Defer non-critical scripts; dynamic-import() what isn’t needed immediately.
• Break up remaining panjang tasks dengan scheduler.yield() (setTimeout fallback). Don’t reach untuk isInputPending().
• Move CPU-heavy computation untuk sebuah Web Worker.
• Cross-periksa field: pull INP dari CrUX / nyata-pengguna monitoring. jika INP adalah fine, don’t di atas-invest di chasing lab angka.

TBT cheat sheet

** math, di one line**

TBT = Σ (taskDuration − 50 ms) untuk setiap task > 50 ms antara FCP dan TTI. Tasks ≤ 50 ms contribute 0 ms.

Worked contoh (Google’s)

Lighthouse thresholds

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

TBT vs. INP — cheat sheet

Yield-untuk-main pattern ( fix)

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

gunakan scheduler.yield() where available, fall back untuk setTimeout. Don’t gunakan isInputPending() — Google now recommends yielding regardless dari whether input adalah pending.

alat untuk measuring dan fixing TBT

• PageSpeed Insights — read TBT di data lab bagian (ini adalah not di field-data bagian, because TBT isn’t sebuah field metric).
• Lighthouse (Chrome DevTools → Lighthouse panel, atau CLI) — source dari TBT angka dan “Avoid long main-thread tasks” (terjemahan) “hindari panjang main-thread tasks” / “Reduce unused JavaScript” (terjemahan) “Reduce unused JavaScript” audits.
• Chrome DevTools — performa panel — record sebuah muat dan temukan panjang tasks (di atas 50 ms, flagged dengan red corners) itu membuat up Anda TBT.
• Chrome DevTools — Coverage tab — see how much dari setiap script adalah actually digunakan, untuk target unused JavaScript dan heavy ketiga parties.
• WebPageTest — lab testing dengan detailed main-thread dan CPU breakdowns.
• panjang Animation Frames (LoAF) API — sebuah modern, field-side complement untuk TBT, not sebuah replacement untuk -nya lab muat-window calculation: ini attributes panjang animation frames di seluruh sebuah whole visit, which adalah closer untuk how INP masalah actually surface, alih-alih TBT’s single FCP-untuk-TTI muat window.
• Field-side TBT via panjang Tasks API — technically mungkin (sum duration − 50 ms untuk observed panjang tasks di production, sama sebagai Scripts tab snippet), tetapi Google recommends terhadap ini untuk RUM: nyata pengguna interaction timing membuat angka too variable untuk compare run di atas run. Reach untuk INP atau LoAF untuk field responsiveness instead.
• Where Anda won’t temukan ini: Google Search Console’s Core Web Vitals report dan CrUX carry LCP, INP, dan CLS hanya — tidak pernah TBT, regardless dari what’s technically mungkin untuk compute yourself.

TBT mistakes itu produce wrong fix

• Calling TBT sebuah Core Web Vital. TBT adalah sebuah lab diagnostic dan berguna proxy untuk main-thread contention; INP adalah nyata-pengguna Core Web Vital. Report them separately.
• Counting whole panjang task sebagai blocking time. hanya portion beyond 50 milliseconds counts. sebuah 70-millisecond task contributes 20 milliseconds, not 70.
• Optimizing outside pengukuran window. Lighthouse TBT sums blocking antara FCP dan TTI. berfungsi sebelum atau setelah itu window dapat penting untuk pengguna, tetapi ini adalah not bagian dari itu TBT nilai.
• menghapus pertama-party code while ignoring largest ketiga party. gunakan trace dan permintaan initiators untuk attribute panjang tasks sebelum choosing sebuah owner atau fix.
• Splitting code without reducing berfungsi. banyak smaller tasks dapat meningkatkan responsiveness, tetapi shipping yang sama unnecessary JavaScript masih costs parsing, compilation, dan execution. hapus unused berfungsi serta yielding ini.
• Assuming sebuah baik lab TBT proves baik field INP. pengguna nyata interact setelah muat pada varied devices. Confirm outcome dengan field responsiveness data.

TBT adalah tinggi tetapi network looks fast

Symptom: Resources download quickly, yet Lighthouse reports heavy blocking.

mungkin cause: JavaScript parsing, compilation, execution, hydration, atau ketiga-party berfungsi monopolizes main thread setelah bytes arrive.

Fix dan confirmation: Record sebuah performa trace, sort panjang tasks oleh duration dan owner, lalu hapus unused code, defer noncritical berfungsi, atau split largest task. Confirm blocking portion falls di repeated matched runs.

sebuah besar bundle adalah deferred tetapi TBT stays tinggi

Symptom: menambahkan defer perubahan download/execution order without materially moving TBT.

mungkin cause: yang sama expensive code masih executes inside FCP-untuk-TTI window.

Fix dan confirmation: Profile functions inside panjang task. Code-split oleh route atau interaction, reduce hydration, atau hapus unused/duplicate berfungsi; lalu verify itu execution time, not merely permintaan start time, declines.

Lighthouse TBT adalah baik while field INP adalah poor

Symptom: Navigation lab tests look responsive, tetapi CrUX atau RUM reports slow interactions.

mungkin cause: problematic task occurs setelah initial muat atau hanya setelah sebuah nyata interaction itu standard Lighthouse navigation melakukan not exercise.

Fix dan confirmation: Collect interaction traces untuk poor INP halaman dan devices, reproduce tindakan locally, dan mengoptimalkan event handling dan next paint.

sebuah panjang task menampilkan up dengan no jelas owner

Symptom: DevTools atau sebuah panjang Tasks API observer flags sebuah blocking task, tetapi attribution adalah blank, generic, atau labeled something like “unknown” (terjemahan) “unknown” / “cross-origin.” (terjemahan) “cross-origin.”

mungkin cause: ini adalah sebuah known coverage gap, not sebuah pengukuran error. panjang Tasks API’s own specification bounds what ini akan report di seluruh execution contexts — cross-origin ancestor tasks adalah deliberately not reported (“this is not reported because of security” (terjemahan) “ini adalah not reported karena security”), dan sebuah deeply embedded cross-origin iframe “does not receive any information” (terjemahan) “melakukan not menerima apa pun informasi” tentang sebuah panjang task di sebuah cross-origin ancestor. berfungsi happening di sebuah Web Worker atau browser’s compositor thread dapat juga fall outside what attribution surfaces Anda.

Fix dan confirmation: Don’t conclude “no third party is involved” (terjemahan) “no ketiga party adalah involved” hanya because nothing adalah named. Cross-periksa dengan Network panel’s initiator column, Coverage tab, dan (where Anda control script) pertama-party instrumentation inside iframes Anda own. Treat sebuah unattributed task sebagai “cause unknown,” (terjemahan) “cause unknown,” not “cause absent.” (terjemahan) “cause absent.”

TBT varies sharply antara runs

Symptom: One run adalah green dan next adalah poor dengan no deployment.

mungkin cause: Variable ketiga-party execution, server timing itu perubahan berfungsi window, cache state, atau test-machine contention.

Fix dan confirmation: Match settings, run several cold tests, dan compare panjang task owners dan median hasil alih-alih selecting one score.

Turn sebuah trace ke sebuah 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.

Compare two performa 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.

Review sebuah ketiga-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 panjang tasks selama sebuah reproduction

Run ini early di DevTools Console, reproduce muat atau interaction, dan inspect setiap 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 });

ini adalah sebuah debugging total untuk period Anda observe, not Lighthouse’s official TBT unless Anda deliberately reproduce yang sama FCP-untuk-TTI window dan test conditions.

Flag scripts dengan paling main-thread evaluation time

setelah recording sebuah DevTools performa trace, gunakan Bottom-up view grouped oleh URL. untuk sebuah quick network inventory alongside ini, ini Console snippet lists transferred JavaScript dari largest untuk 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);

besar transfer size adalah hanya sebuah lead; performa trace adalah what attributes parsing dan execution time untuk TBT.

panjang-task reduction

Test untuk run: Capture several matched Lighthouse/performa traces sebelum dan setelah JavaScript perubahan dan compare panjang tasks antara FCP dan TTI.

Expected hasil: targeted task disappears, shortens, atau yields ke smaller tasks, dan median TBT improves without delaying FCP atau breaking functionality.

Failure interpretation: berfungsi moved untuk lainnya bundle/task, masih executes di sama window, atau normal run variance adalah larger daripada perubahan.

Monitoring window: Test immediately di mobile dan desktop lab profiles dan watch field INP selama next reporting window.

Rollback trigger: Roll back jika critical interactions break, errors rise, atau sebuah repeatable FCP/LCP/INP regression outweighs TBT improvement.

ketiga-party deferral

Test untuk run: Compare sebuah cold trace dengan ketiga party di -nya saat ini position dan dengan ini delayed until consent, idle time, atau relevant interaction.

Expected hasil: -nya panjang tasks leave initial TBT window while diperlukan business event masih fires di intended time.

Failure interpretation: lainnya loader injects ini early, dependent code blocks halaman, atau script’s main-thread berfungsi adalah not diukur bottleneck.

Monitoring window: Validate pada setiap template itu memuat script dan monitor both performa dan business event setelah release.

Rollback trigger: Restore prior memuat path jika consent, analytics, checkout, ads, atau lainnya diperlukan function loses valid events.

Field responsiveness ikuti-up

Test untuk run: Segment field INP untuk affected templates/devices setelah lab TBT perubahan while keeping deployment date annotated.

Expected hasil: Field responsiveness stays stable atau improves; sebuah lab-hanya win adalah not reported sebagai sebuah pengguna outcome until field evidence mendukung ini.

Failure interpretation: nyata interaction berfungsi occurs outside initial muat atau dioptimalkan cohort adalah too kecil untuk move aggregate.

Monitoring window: Review melalui full field-data reporting window dan selama tinggi-nilai interactions.

Rollback trigger: Investigate atau roll back jika field INP atau critical interaction success regresses consistently setelah release.

Test yourself: Total Blocking Time

Five quick pertanyaan pada TBT math dan diagnosis. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

Official

• Total Blocking Time (TBT) — canonical definition dan worked contoh.
• mengoptimalkan panjang tasks — practical fixing guide (scheduler.yield(), batching, why not isInputPending()).
• Web Vitals — where TBT sits relative untuk Core Web Vitals.
• Optimizing Web Vitals menggunakan Lighthouse — Addy Osmani; mencakup polyfill-removal worked contoh (TBT 400→300 ms, score 63→70).

dari others (verify sebelum quoting)

• DebugBear — Total Blocking Time — strong technical depth pada TBT↔INP mechanism dan Lighthouse scoring curve.
• NitroPack — What adalah Total Blocking Time? — “task count ≠ blocking time” (terjemahan) “task count ≠ blocking time” insight.
• BrowserStack — TBT guide dan Catchpoint — TBT — alat/monitoring-oriented overviews.
• web.dev — pengguna-centric performa metrics — Philip Walton’s framework classifying TBT sebagai sebuah lab/muat-responsiveness metric vs. field metrics; berguna framing untuk explaining why TBT doesn’t appear di CrUX.
• web.dev — Getting started dengan measuring Web Vitals — covers how TBT menyajikan sebagai lab proxy untuk INP when nyata-pengguna pengukuran isn’t mungkin di simulated environments.
• WebPageTest — free lab testing alat itu reports TBT alongside detailed main-thread dan CPU breakdowns; berguna untuk diagnosing which tasks adalah driving sebuah tinggi score.
• mesin pencari Journal — Core Web Vitals coverage — ongoing industry reporting pada CWV updates, TBT’s role di audits, dan how practitioners interpret lab vs. field gaps.

Stats worth citing

• TBT adalah 30% dari Lighthouse performa score — single largest weight dari apa pun metric (LCP dan CLS adalah 25% setiap; FCP dan Speed indeks 10% setiap). Introduced di Lighthouse 10, live-reverified 2026-07-18 sebagai unchanged melalui Lighthouse 13. Source
• ** “good” (terjemahan) “baik” bar adalah ≤200 ms pada mobile** (≤150 ms desktop); “poor” (terjemahan) “poor” adalah >600 ms mobile (>350 ms desktop) — Lighthouse audit docs. Source
• One polyfill = seven poin. menghapus sebuah single Intersection Observer polyfill cut TBT dari 400 ms untuk 300 ms dan lifted Lighthouse performa score dari 63 untuk 70 — sebuah clean illustration dari 30% weight. Source
• sebuah 250 ms task contributes 200 ms dari blocking time — blocking portion adalah selalu duration − 50 ms. Google’s worked contoh totals 345 ms di seluruh five tasks. Source

Log perubahan