Panduan Total Blocking Time (TBT)

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

Apa TBT adalah

Ketika sebuah halaman memuat, browser memiliki satu main utas melakukan berat lifting — berjalan JavaScript, membangun halaman, reacting untuk Anda clicks. ini dapat hanya melakukan satu hal di sebuah time. jika sebuah chunk dari JavaScript hogs itu utas untuk too panjang, halaman goes momentarily unresponsive: Anda tap sebuah button dan tidak ada apa pun happens until script finishes.

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

50ms aturan

Tidak setiap bit dari berfungsi counts. browser dapat tangani pendek tasks tanpa Anda noticing. line adalah 50 milliseconds: apa pun task itu berjalan lebih lama daripada itu adalah sebuah “long task,” (terjemahan) “panjang task,” dan hanya bagian di atas 50 ms counts sebagai blocking time.

So sebuah task itu berjalan untuk 70 ms menambahkan 20 ms untuk Anda TBT. sebuah task itu berjalan untuk 40 ms menambahkan tidak ada apa pun. TBT adalah sum dari semua itu “di atas 50 ms” (terjemahan) “di atas 50 ms” slivers sementara halaman adalah memuat.

apa sebuah baik score?

di Lighthouse, pada mobile:

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

hal sebagian besar orang mendapatkan wrong

TBT adalah tidak sebuah Core Web Vital. three Core Web Vitals adalah LCP, INP, dan CLS. TBT adalah sebuah lab alat itu helps predict Anda Interaction untuk Berikutnya Paint (INP) — nyata-pengguna metric Google sebenarnya menggunakan. Anda tidak akan temukan TBT di Google Search Console atau di data lapangan, karena ini adalah diukur oleh simulating sebuah pemuatan halaman, tidak oleh watching nyata pengunjung.

ingin penuh mechanics — worked contoh, mengapa TBT carries paling weight di Lighthouse, TBT-vs-INP perbedaan, dan cara sebenarnya perbaiki ini? Switch untuk Advanced tab.

TL;DR — TBT adalah total amount dari time, antara pertama Contentful Paint dan Time untuk Interactive, itu main utas adalah blocked panjang cukup untuk mencegah input responsiveness. ini sums blocking portion (duration − 50 ms) dari setiap panjang task (apa pun main-utas 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 tidak sebuah Core Web Vital dan tidak pernah muncul di CrUX atau Search Console. Mobile thresholds: baik ≤200 ms, poor >600 ms. Perbaiki ini like Anda’d perbaiki INP: break up panjang JS tasks, code-split, defer/hapus unused JS, tame ketiga-party scripts. My honest take: perbaiki ini untuk pengguna, tidak untuk sebuah peringkat bump.

Apa TBT sebenarnya measures

Google’s definition adalah place untuk mulai. TBT adalah “itu total amount dari time setelah Pertama Contentful Paint (FCP) di mana itu main utas adalah blocked untuk long cukup untuk cegah input responsiveness.” (terjemahan) “ total amount dari time setelah pertama Contentful Paint (FCP) di mana main utas adalah blocked untuk panjang cukup untuk mencegah input responsiveness.” browser’s main utas memproses satu task di sebuah time; sementara ini adalah busy dengan sebuah panjang chunk dari berfungsi, ini dapat’t react untuk sebuah click, sebuah tap, atau sebuah keypress. TBT quantifies bagaimana banyak dari Anda halaman-muat window adalah spent di itu blocked state.

Dua definitions melakukan semua berfungsi di sini:

• sebuah panjang task adalah “a task itu berjalan pada itu main utas untuk lebih daripada 50 milliseconds.” (terjemahan) “sebuah task itu berjalan pada main utas untuk lebih daripada 50 milliseconds.”
• blocking portion dari sebuah task adalah -nya duration minus 50 ms. Tasks di atau di bawah 50 ms contribute persis 0 ms.

TBT adalah sum dari itu blocking portions antara FCP dan Time untuk Interactive (TTI). So pertama Contentful Paint adalah mulai line: tidak ada apa pun sebelum pertama paint counts, karena ada tidak ada apa pun pada screen untuk interact dengan namun.

worked contoh

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

Tasks three dan four adalah di bawah 50 ms line, so mereka contribute tidak ada apa pun. Task satu blocks untuk 250 − 50 = 200 ms, task five untuk 155 − 50 = 105 ms. tambahkan blocking portions — 200 + 40 + 0 + 0 + 105 — dan Anda mendapatkan 345 ms dari TBT. itu’s sebuah “memerlukan improvement” (terjemahan) “perlu improvement” score, driven hampir entirely oleh dua berat tasks.

ini adalah counter-intuitive bagian worth internalizing: “A small number dari tasks pada itu main utas tidak niscaya berarti low blocking time. Conversely, a large number dari tasks tidak niscaya lead untuk tons dari blocking time.” (terjemahan) “sebuah kecil angka dari tasks pada main utas tidak niscaya berarti rendah blocking time. Conversely, sebuah besar angka dari tasks tidak niscaya lead untuk tons dari blocking time.” (itu framing adalah NitroPack’s, relayed di sini — reverified terhadap langsung sumber 2026-07-18.) Apa penting adalah apakah individual tasks cross 50 ms, tidak bagaimana banyak tasks ada.

pengukuran window: FCP untuk TTI

window ends di Time untuk Interactive — “itu time dari ketika itu halaman dimulai loading untuk ketika its main sub-resources memiliki loaded dan it adalah capable dari reliably responding untuk user input quickly.” (terjemahan) “ time dari ketika halaman dimulai memuat untuk ketika -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 “tenang window” (terjemahan) “tenang window” dengan Tidak panjang tasks dan Tidak lebih daripada dua di-flight network permintaan.

Worth noting: TTI itself adalah dihapus dari Lighthouse 10 karena ini proved overly sensitive untuk outlier network permintaan dan panjang tasks, producing tinggi variability. TBT survived dan menjadi utama interactivity metric. sebagai Philip Walton put ini, “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Interaction untuk Berikutnya Paint (INP) adalah biasanya better metrics untuk gunakan di place dari TTI.” (terjemahan) “Newer, alternative, metrics like Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Interaction untuk Berikutnya Paint (INP) adalah biasanya better metrics untuk gunakan di place dari TTI.” TBT tidak 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 tidak yang sama claim sebagai TTI Tidak lebih lama bounding Lighthouse’s default navigation window — window itself adalah masih diukur itu cara di bawah hood.

Satu lebih scoping note: “FCP untuk TTI” (terjemahan) “FCP untuk TTI” mendeskripsikan Lighthouse’s default navigation audit secara khusus. lainnya alat, atau Lighthouse itself berjalan sebuah timespan trace alih-alih sebuah penuh halaman-muat navigation, dapat total sebuah berbeda diukur window — 50 ms panjang-task math tidak perubahan, tetapi mulai dan end poin dari apa mendapatkan summed adalah alat- dan trace-mode-spesifik, tidak sebuah universal law dari metric.

adalah TBT sebuah Core Web Vital? Tidak.

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

So di mana melakukan TBT tampilkan up, dan di mana tidak ini?

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

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

«One correction worth being precise about: TBT being lab-recommended isn’t the same as TBT being field-impossible. You can technically compute a TBT-style total in the field with the Long 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.” That’s a recommendation against it, not a technical wall. What’s actually true without exception is narrower: CrUX and Search Console’s Core Web Vitals report never carry TBT, full stop — those pipelines only ever collect LCP, INP, and CLS. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

TBT adalah lab proxy untuk INP

Di sini’s mengapa TBT ada di semua. Lab alat muat sebuah halaman di sebuah simulated environment dengan Tidak nyata pengguna, so mereka dapat’t mengukur Interaction untuk Berikutnya Paint — INP perlu sebenarnya clicks dan taps. TBT fills itu kesenjangan: “itu Total Blocking Time (TBT) metric adalah lab-measurable dan adalah a proxy untuk INP.” (terjemahan) “ Total Blocking Time (TBT) metric adalah lab-measurable dan adalah sebuah proxy untuk INP.”

dua adalah mechanically related: “Although INP dan TBT adalah calculated differently, they adalah keduanya reflections dari a blocked main utas during itu bootstrap proses. Ketika itu main utas adalah blocked, itu browser adalah delayed di responding untuk user interactions.” (terjemahan) “Although INP dan TBT adalah calculated differently, mereka adalah keduanya reflections dari sebuah blocked main utas selama bootstrap proses. Ketika main utas adalah blocked, browser adalah delayed di responding untuk pengguna interactions.” dan empirically, “A low TBT sering correlates dengan a low Interaction untuk Berikutnya Paint (INP).” (terjemahan) “sebuah rendah TBT sering correlates dengan sebuah rendah Interaction untuk Berikutnya Paint (INP).”

tetapi “proxy” (terjemahan) “proxy” adalah tidak “substitute.” (terjemahan) “substitute.” Google adalah jelas: “Total Blocking Time (TBT) mungkin menjadi a reasonable proxy metric untuk INP, tetapi ini tidak a substitute untuk INP di dan dari itself.” (terjemahan) “Total Blocking Time (TBT) dapat menjadi sebuah reasonable proxy metric untuk INP, tetapi ini adalah tidak 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 jangan sebenarnya try untuk interact selama itu blocked window — mereka tunggu 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 hal like browser’s 300 ms tap delay pada non-mobile-dioptimalkan halaman — none dari yang TBT sees.

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

Satu historical note itu trips orang 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 utas selama muat — tetapi apa pun older artikel calling TBT “FID’s proxy” (terjemahan) “FID’s proxy” lebih lama dari itu switch.

Mengapa TBT dominates Lighthouse score

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

Treat itu table sebagai versi-dan-date-scoped, tidak 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 tidak 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 satu Intersection Observer polyfill cut TBT dari 400 ms untuk 300 ms dan lifted Lighthouse performa score dari 63 untuk 70. Satu perbaiki, seven poin, karena 30% weight.

Satu lebih 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 langsung sumber 2026-07-18.) “Good” (terjemahan) “baik” dan “100” (terjemahan) “100” adalah tidak yang sama bar.

melakukan TBT memengaruhi SEO rankings?

Tidak secara langsung — dan I’ll menjadi straighter tentang ini daripada sebagian besar.

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

dan di sini’s my sebenarnya position pada seluruh Core Web Vitals pertanyaan, yang I’ve ditulis sebelum di my kecepatan halaman guide: I jangan think Core Web Vitals memiliki banyak impact pada SEO, dan unless Anda’re extremely slow I umumnya tidak akan prioritize them. melakukan them untuk pengguna dan conversions, tidak untuk sebuah peringkat bump. itu applies doubly untuk TBT, yang adalah sebuah lab proxy untuk sebuah field metric untuk sebuah kecil peringkat input. Perbaiki ini karena sebuah frozen halaman loses Anda customers — tidak karena Anda’re chasing sebuah position.

Apa penyebab tinggi TBT

ini adalah hampir selalu JavaScript:

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

jangan assume bundle transfer size adalah seluruh story, either. Trace attribution memiliki nyata gaps: cross-origin frames dan worker threads memiliki privacy dan security limits pada apa sebuah panjang-task observer dapat report tentang them (see Troubleshooting), so sebuah unattributed task di Anda trace tidak proof Tidak ketiga party adalah involved — ini dapat hanya berarti attribution API tidak diizinkan untuk tell Anda.

cara perbaiki tinggi TBT

memperbaiki adalah yang sama family sebagai INP memperbaiki — keduanya come down untuk sebuah blocked main utas.

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

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

Di mana untuk go berikutnya

TBT lives di Core Web Vitals family alongside -nya field padanan Interaction untuk Berikutnya 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 satu hal: TBT adalah lab warning light untuk field responsiveness — chase panjang tasks, tidak angka.

AI summary

sebuah condensed take pada Advanced versi:

• TBT = blocked main-utas time selama muat. ini adalah total time, antara FCP dan TTI, main utas adalah blocked panjang cukup untuk mencegah input responsiveness.
• ** math:** sum dari blocking portion (duration − 50 ms) dari setiap panjang task (apa pun main-utas 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.
• Tidak sebuah Core Web Vital. three CWV adalah LCP, INP, CLS. TBT adalah lab proxy untuk INP (secara historis 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: tidak sebuah direct peringkat factor. INP adalah field sinyal; TBT hanya helps diagnose ini. Patrick’s take: perbaiki ini untuk pengguna dan conversions, tidak untuk sebuah peringkat bump.
• Memperbaiki (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 berat berfungsi untuk Web Workers.
• Caveat: TBT dan INP dapat diverge — tinggi TBT dengan fine INP (pengguna jangan interact selama muat) atau fine TBT dengan poor INP (slow event handlers setelah muat). Field data wins.
• “Lab-hanya” (terjemahan) “Lab-hanya” berarti lab-recommended, tidak lab-impossible. Anda dapat technically compute sebuah TBT-style total dari data lapangan dengan panjang Tasks API, tetapi Google advises terhadap ini (too banyak jalankan-untuk-jalankan variance) — CrUX dan Search Console sekadar tidak pernah carry ini either cara.
• Trace attribution memiliki nyata gaps. Cross-origin frames dan worker threads memiliki privacy/security limits pada apa sebuah panjang-task observer dapat report, so sebuah unattributed task berarti “cause unknown,” (terjemahan) “penyebab unknown,” tidak “no third party involved.” (terjemahan) “Tidak ketiga party involved.”

Dokumentasi resmi

Utama-sumber 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 penyebab.
• Lighthouse performa scoring — metric weights, di mana TBT’s 30% muncul dari.
• Web Vitals — mengapa TBT adalah tidak sebuah Core Web Vital dan bagaimana ini relates untuk set.
• Interaction untuk Berikutnya Paint (INP) — field metric TBT proxies, dan “proxy, not substitute” (terjemahan) “proxy, tidak substitute” caveat.
• mengoptimalkan panjang tasks — Jeremy Wagner & Brendan Kenny pada breaking up tasks, scheduler.yield(), dan mengapa isInputPending() adalah Tidak lebih lama recommended.
• Time untuk Interactive (TTI) — metric itu defines end dari TBT window, dan mengapa ini adalah dihapus dari Lighthouse 10.
• Lab dan data lapangan differences — limits dari TBT sebagai sebuah INP stand-di.

Quotes dari sumber

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) di mana main utas adalah blocked untuk panjang cukup 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 berjalan pada main utas untuk lebih 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 lebih sedikit daripada 200 milliseconds ketika 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 Berikutnya Paint (INP).” Jump untuk quote

Status: tidak 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. Namun, ini adalah tidak bagian dari Core Web Vitals set karena mereka adalah tidak field-measurable, nor melakukan mereka reflect sebuah pengguna-centric outcome.” — web.dev, Web Vitals (Philip Walton). (Grammar adalah verbatim dari sumber.) 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 tidak sebuah substitute untuk INP di dan dari itself.” — web.dev, Interaction untuk Berikutnya Paint. Jump untuk quote

panjang tasks dan memperbaiki 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 utas dapat hanya proses satu task di sebuah time. apa pun task itu takes lebih lama 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) “Ketika tasks adalah rusak up, browser dapat respond untuk lebih tinggi-priority berfungsi banyak 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 Tidak lebih lama merekomendasikan menggunakan ini API, dan alih-alih merekomendasikan yielding regardless dari apakah input adalah pending atau tidak.” Jump untuk quote

TTI dan mengapa 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 Berikutnya 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 lulus ketika Lighthouse hands Anda sebuah red (atau orange) Total Blocking Time:

• Konfirmasi Anda’re reading lab data — TBT adalah di Lighthouse / PageSpeed Insights’ lab tab / DevTools, tidak 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 apa setiap costs (Coverage + Network tabs) — mulai di sini; ini adalah biasanya biggest, easiest win.
• Lazy-muat berat embeds (YouTube, maps, chat) behind sebuah facade.
• Jalankan Lighthouse “Avoid long main-thread tasks” (terjemahan) “hindari panjang main-utas tasks” dan “Reduce unused JavaScript” (terjemahan) “Reduce unused JavaScript” audits dan berfungsi list.
• Code-split besar bundles so lebih sedikit JS parses/evaluates di muat.
• Defer non-critical scripts; dynamic-import() apa tidak needed immediately.
• Break up remaining panjang tasks dengan scheduler.yield() (setTimeout fallback). jangan reach untuk isInputPending().
• Move CPU-berat computation untuk sebuah Web Worker.
• Cross-periksa field: pull INP dari CrUX / nyata-pengguna monitoring. jika INP adalah fine, jangan di atas-invest di chasing lab angka.

TBT cheat sheet

** math, di satu line**

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

Worked contoh (Google’s)

«| Task | Duration | Blocking time | | --- | --- | --- | | 1 | 250 ms | 200 ms | | 2 | 90 ms | 40 ms | | 3 | 35 ms | 0 ms | | 4 | 30 ms | 0 ms | | 5 | 155 ms | 105 ms | | | Total | 345 ms | » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Lighthouse thresholds

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

TBT vs. INP — cheat sheet

Yield-untuk-main pattern ( perbaiki)

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

gunakan scheduler.yield() di mana tersedia, fall back untuk setTimeout. jangan gunakan isInputPending() — Google now recommends yielding regardless dari apakah input adalah pending.

alat untuk measuring dan memperbaiki TBT

• PageSpeed Insights — baca TBT di data lab bagian (ini adalah tidak di field-data bagian, karena TBT tidak sebuah field metric).
• Lighthouse (Chrome DevTools → Lighthouse panel, atau CLI) — sumber dari TBT angka dan “Avoid long main-thread tasks” (terjemahan) “hindari panjang main-utas 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 bagaimana banyak dari setiap script adalah sebenarnya digunakan, untuk target unused JavaScript dan berat ketiga parties.
• WebPageTest — lab testing dengan detailed main-utas dan CPU breakdowns.
• panjang Animation Frames (LoAF) API — sebuah modern, field-side complement untuk TBT, tidak sebuah replacement untuk -nya lab muat-window calculation: ini attributes panjang animation frames di seluruh sebuah seluruh visit, yang adalah closer untuk bagaimana INP masalah sebenarnya surface, alih-alih TBT’s single FCP-untuk-TTI muat window.
• Field-side TBT melalui 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 bandingkan jalankan di atas jalankan. Reach untuk INP atau LoAF untuk field responsiveness alih-alih.
• Di mana Anda tidak akan temukan ini: Google Search Console’s Core Web Vitals report dan CrUX carry LCP, INP, dan CLS hanya — tidak pernah TBT, regardless dari apa technically mungkin untuk compute yourself.

TBT mistakes itu produce wrong perbaiki

• Calling TBT sebuah Core Web Vital. TBT adalah sebuah lab diagnostic dan berguna proxy untuk main-utas contention; INP adalah nyata-pengguna Core Web Vital. Report them secara terpisah.
• Counting seluruh panjang task sebagai blocking time. hanya portion beyond 50 milliseconds counts. sebuah 70-millisecond task contributes 20 milliseconds, tidak 70.
• Optimizing di luar pengukuran window. Lighthouse TBT sums blocking antara FCP dan TTI. berfungsi sebelum atau setelah itu window dapat penting untuk pengguna, tetapi ini adalah tidak bagian dari itu TBT nilai.
• menghapus pertama-party code sementara ignoring largest ketiga party. gunakan trace dan permintaan initiators untuk attribute panjang tasks sebelum choosing sebuah owner atau perbaiki.
• Splitting code tanpa reducing berfungsi. banyak lebih kecil 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. Konfirmasi outcome dengan field responsiveness data.

TBT adalah tinggi tetapi network looks fast

Symptom: Resources download quickly, namun Lighthouse reports berat blocking.

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

Perbaiki dan konfirmasi: Record sebuah performa trace, sort panjang tasks oleh duration dan owner, lalu hapus unused code, defer noncritical berfungsi, atau split largest task. Konfirmasi blocking portion falls di repeated cocok berjalan.

sebuah besar bundle adalah deferred tetapi TBT tetap tinggi

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

mungkin penyebab: yang sama expensive code masih executes di dalam FCP-untuk-TTI window.

Perbaiki dan konfirmasi: Profile functions di dalam panjang task. Code-split oleh route atau interaction, reduce hydration, atau hapus unused/duplicate berfungsi; lalu verify itu execution time, tidak merely permintaan mulai time, declines.

Lighthouse TBT adalah baik sementara field INP adalah poor

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

mungkin penyebab: problematic task occurs setelah awal muat atau hanya setelah sebuah nyata interaction itu standard Lighthouse navigation melakukan tidak exercise.

Perbaiki dan konfirmasi: Collect interaction traces untuk poor INP halaman dan devices, reproduce tindakan locally, dan mengoptimalkan event menangani dan berikutnya paint.

sebuah panjang task menampilkan up dengan Tidak jelas owner

«Symptom: DevTools or a Long Tasks API observer flags a blocking task, but the attribution is blank, generic, or labeled something like “unknown” / “cross-origin.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus tiga puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

Perbaiki dan konfirmasi: jangan conclude “no third party is involved” (terjemahan) “Tidak ketiga party adalah involved” hanya karena tidak ada apa pun adalah named. Cross-periksa dengan Network panel’s initiator column, Coverage tab, dan (di mana Anda control script) pertama-party instrumentation di dalam iframes Anda own. Treat sebuah unattributed task sebagai “cause unknown,” (terjemahan) “penyebab unknown,” tidak “cause absent.” (terjemahan) “penyebab absent.”

TBT varies sharply antara berjalan

Symptom: Satu jalankan adalah green dan berikutnya adalah poor dengan Tidak deployment.

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

Perbaiki dan konfirmasi: Match settings, jalankan several cold tests, dan bandingkan panjang task owners dan median hasil alih-alih selecting satu score.

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

Bandingkan dua 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

Jalankan 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, tidak Lighthouse’s official TBT unless Anda dengan sengaja reproduce yang sama FCP-untuk-TTI window dan test conditions.

Flag scripts dengan paling main-utas 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 apa attributes parsing dan execution time untuk TBT.

panjang-task reduction

Test untuk jalankan: Capture several cocok Lighthouse/performa traces sebelum dan setelah JavaScript perubahan dan bandingkan panjang tasks antara FCP dan TTI.

Yang diharapkan hasil: targeted task disappears, shortens, atau yields ke lebih kecil tasks, dan median TBT improves tanpa delaying FCP atau breaking functionality.

Failure interpretation: berfungsi moved untuk lainnya bundle/task, masih executes di sama window, atau wajar jalankan variance adalah lebih besar daripada perubahan.

Monitoring window: Test immediately di mobile dan desktop lab profiles dan watch field INP selama berikutnya 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 jalankan: Bandingkan sebuah cold trace dengan ketiga party di -nya saat ini position dan dengan ini delayed until consent, idle time, atau relevant interaction.

Yang diharapkan hasil: -nya panjang tasks leave awal TBT window sementara diperlukan business event masih fires di yang dimaksud time.

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

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

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

Field responsiveness ikuti-up

Test untuk jalankan: Segment field INP untuk affected templates/devices setelah lab TBT perubahan sementara mempertahankan deployment date annotated.

Yang diharapkan hasil: Field responsiveness tetap stable atau improves; sebuah lab-hanya win adalah tidak reported sebagai sebuah pengguna outcome until field evidence mendukung ini.

Failure interpretation: nyata interaction berfungsi occurs di luar awal muat atau dioptimalkan cohort adalah too kecil untuk move aggregate.

Monitoring window: Review melalui penuh 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 rilis.

Uji pemahaman Anda: 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 memperbaiki guide (scheduler.yield(), batching, mengapa tidak isInputPending()).
• Web Vitals — di mana 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 teknis depth pada TBT↔INP mechanism dan Lighthouse scoring curve.
• NitroPack — Apa 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 kerangka kerja classifying TBT sebagai sebuah lab/muat-responsiveness metric vs. field metrics; berguna framing untuk explaining mengapa TBT tidak muncul di CrUX.
• web.dev — Getting dimulai dengan measuring Web Vitals — covers bagaimana TBT menyajikan sebagai lab proxy untuk INP ketika nyata-pengguna pengukuran tidak mungkin di simulated environments.
• WebPageTest — free lab testing alat itu reports TBT alongside detailed main-utas dan CPU breakdowns; berguna untuk diagnosing yang tasks adalah driving sebuah tinggi score.
• mesin pencari Journal — Core Web Vitals coverage — ongoing industry reporting pada CWV memperbarui, TBT’s role di audits, dan bagaimana 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, langsung-reverified 2026-07-18 sebagai unchanged melalui Lighthouse 13. Sumber
• ** “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. Sumber
• Satu 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 bersih illustration dari 30% weight. Sumber
• 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. Sumber

Log perubahan