Hướng dẫn về Total Blocking Time (TBT)

Tóm tắt — Total Blocking Time (TBT) measures Cách dài của bạn trang là frozen — unable để respond để nhấp hoặc tap — trong khi nó loads. lab tool như Lighthouse adds lên all time main chuỗi trao đổi là blocked giữa đầu tiên paint và Khi trang becomes interactive. Dưới 200 ms là good. nó lab-chỉ number, nó không Cốt lõi Web Vital, và nó sẽ không hiển thị lên trong Search Console.

Điều gì TBT là

Khi trang loads, trình duyệt có một main chuỗi trao đổi đang làm nặng lifting — đang chạy JavaScript, building trang, reacting để của bạn clicks. nó có thể chỉ làm một điều tại time. nếu chunk của JavaScript hogs đó chuỗi trao đổi cho cũng dài, trang goes momentarily unresponsive: bạn tap button và không có gì happens cho đến khi script finishes.

Total Blocking Time là việc đo lường của chính xác đó frozen time during load. kiểm thử tool như Lighthouse loads của bạn trang trong controlled environment, watches main chuỗi trao đổi, và adds lên all time nó là blocked từ responding để input.

50ms rule

không mỗi bit của hoạt động được tính. trình duyệt có thể xử lý ngắn tasks không có bạn noticing. line là 50 milliseconds: bất kỳ task đó chạy lâu hơn Đó là “dài task,” và chỉ part trên 50 ms được tính as blocking time.

So task đó chạy cho 70 ms adds 20 ms để của bạn TBT. task đó chạy cho 40 ms adds không có gì. TBT là sum của all những điều đó “trên 50 ms” slivers trong khi trang là loading.

Điều gì good score?

Trong Lighthouse, on mobile:

• Good: 200 ms hoặc ít hơn
• Cần improvement: lên để 600 ms
• Poor: over 600 ms

điều phần lớn mọi người nhận sai

TBT không phải một Cốt lõi Web Vital. Đó three Core Web Vitals là LCP, INP, và CLS. TBT là một lab tool đó helps predict của bạn Interaction để Tiếp theo Paint (INP) — đó real-người dùng chỉ số Google thực ra dùng. Bạn sẽ không tìm TBT trong Google Search Console hoặc trong trường dữ liệu, vì đây là measured by simulating một trang load, không by watching real khách truy cập.

Muốn đầy đủ mechanics — worked ví dụ, Vì sao TBT carries phần lớn weight trong Lighthouse, TBT-so với-INP khác biệt, và Cách thực ra khắc phục nó? Chuyển để Nâng cao tab.

Tóm tắt — TBT là total amount của time, giữa đầu tiên Contentful Paint và Time để Interactive, đó main chuỗi trao đổi là blocked dài đủ để ngăn input responsiveness. nó sums blocking portion (duration − 50 ms) của mỗi dài task (bất kỳ main-chuỗi trao đổi task over 50 ms). nó lab chỉ số — single largest weight (30%) trong Lighthouse 10 score và lab proxy cho INP — nhưng nó là không Cốt lõi Web Vital và không bao giờ xuất hiện trong CrUX hoặc Search Console. Mobile thresholds: good ≤200 ms, poor >600 ms. khắc phục nó như bạn’d khắc phục INP: break lên dài JS tasks, code-split, defer/xóa unused JS, tame thứ ba-party scripts. My honest take: khắc phục nó cho người dùng, không cho xếp hạng bump.

Điều gì TBT thực ra measures

Google definition là đó place để bắt đầu. TBT là “the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.” (bản dịch) «đó total amount of time sau Đầu tiên Contentful Paint (FCP) nơi đó main chuỗi trao đổi đã là blocked cho dài đủ để ngăn input responsiveness.» Đó trình duyệt main chuỗi trao đổi xử lý một task tại một time; trong khi đây là busy với một dài chunk of hoạt động, điều này không thể react để một nhấp, một tap, hoặc một keypress. TBT quantifies cách nhiều of trang của bạn-load window là spent trong đó blocked state.

Hai definitions làm all hoạt động ở đây:

• MỘT dài task là “a task that runs on the main thread for more than 50 milliseconds.” (bản dịch) «một task đó chạy on đó main chuỗi trao đổi cho hơn 50 milliseconds.»
• Đó blocking portion of một task là của nó duration minus 50 ms. Tasks tại hoặc dưới 50 ms contribute chính xác 0 ms.

TBT là sum của những điều đó blocking portions giữa FCP và Time để Interactive (TTI). So đầu tiên Contentful Paint là bắt đầu line: không có gì trước khi đầu tiên paint được tính, vì có không có gì on screen để interact với tuy vậy.

worked ví dụ

Google own bảng là clearest illustration. Imagine five tasks chạy on main chuỗi trao đổi giữa FCP và TTI:

Tasks three và four là dưới đó 50 ms line, so they contribute không có gì. Task một chặn cho 250 − 50 = 200 ms, task five cho 155 − 50 = 105 ms. Thêm đó blocking portions — 200 + 40 + 0 + 0 + 105 — và bạn nhận 345 ms of TBT. đó là một “needs improvement” (bản dịch) «cần improvement» score, driven gần như hoàn toàn by hai nặng tasks.

Này là đó counter-intuitive part 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.” (bản dịch) «MỘT nhỏ number of tasks on đó main chuỗi trao đổi không nhất thiết có nghĩa là thấp blocking time. Conversely, một lớn number of tasks không nhất thiết lead để tons of blocking time.» (Đó cách diễn đạt là NitroPack, relayed ở đây — reverified so với đó trực tiếp nguồn 2026-07-18.) Điều gì matters là liệu riêng lẻ tasks cross 50 ms, không cách nhiều tasks có.

việc đo lường window: FCP để TTI

Đó window ends tại Time để 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.” (bản dịch) «đó time từ khi đó trang bắt đầu loading để khi của nó main sub-các tài nguyên có loaded và điều này là capable of reliably responding để người dùng input quickly.» Trong Lighthouse, TTI là được tìm thấy by searching forward cho một five-second “quiet window” (bản dịch) «yên lặng window» với không dài tasks và không hơn hai trong-flight network các yêu cầu.

Worth noting: TTI itself đã là đã xóa từ Lighthouse 10 vì điều này proved overly sensitive để outlier network các yêu cầu và dài tasks, producing cao variability. TBT survived và trở thành đó chính interactivity chỉ số. As Philip Walton put điều này, “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.” (bản dịch) «Newer, alternative, các chỉ số như Largest Contentful Paint (LCP), Total Blocking Time (TBT), và Interaction để Tiếp theo Paint (INP) là thường tốt hơn các chỉ số để dùng trong place of TTI.» TBT đã không replace TTI as đó window endpoint — đây là một tốt hơn single number cho đó giống nhau underlying vấn đề. Và TTI disappearance từ đó Lighthouse báo cáo UI không đó giống nhau claim as TTI không lâu hơn bounding Lighthouse default navigation window — đó window itself là vẫn measured đó way dưới đó hood.

Một nhiều hơn scoping note: “FCP để TTI” mô tả Lighthouse default navigation audit cụ thể. khác tools, hoặc Lighthouse itself đang chạy timespan trace thay vì đầy đủ trang-load navigation, có thể total khác measured window — 50 ms dài-task math không thay đổi, nhưng bắt đầu và end points của Điều gì nhận summed là tool- và trace-chế độ-cụ thể, không universal law của chỉ số.

là TBT Cốt lõi Web Vital? Không.

Này là đó hầu hết phổ biến misconception, so let là blunt về điều này. Đó three Cốt lõi Web Chỉ số quan trọng là LCP, INP, và CLS. TBT không phải một of them. Google 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.” (bản dịch) «Total Blocking Time (TBT) là một lab các chỉ số là vital trong catching và diagnosing potential interactivity các vấn đề đó có thể impact INP. Tuy nhiên, điều này không phải part of đó Core Web Vitals set vì they không phải trường-measurable, nor làm they reflect một người dùng-centric outcome.» (Đó grammar trong đó sentence là theirs, không mine.)

So nơi làm TBT hiển thị lên, và nơi không nó?

• nơi bạn see nó: Lighthouse, PageSpeed Insights’ lab tab, và Chrome DevTools — all simulated/lab environments.
• nơi bạn không: Google Search Console’s Core Web Vitals báo cáo, CrUX, hoặc bất kỳ trường dữ liệu. những điều đó chỉ carry LCP, INP, và CLS.

Nếu ai đó tells bạn họ là “watching TBT in Search Console,” (bản dịch) «watching TBT trong Search Console,» họ là mistaken — GSC các báo cáo trường dữ liệu, và TBT không một trường chỉ số.

Một correction worth đang precise về: TBT đang lab-được khuyến nghị không đó giống nhau as TBT đang trường-không thể. Bạn có thể technically compute một TBT-style total trong đó trường với đó Dài Tasks API — Google says so trực tiếp: “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.” (bản dịch) «Điều này là có thể để đo lường TBT trong đó trường, nhưng we không khuyến nghị này as người dùng interaction có thể ảnh hưởng trang của bạn TBT trong ways đó lead để lots of variance trong của bạn các báo cáo.» đó là một khuyến nghị so với điều này, không một kỹ thuật wall. điều gì là thực ra đúng không có exception là hẹp hơn: CrUX và Search Console’s Core Web Vitals báo cáo không bao giờ carry TBT, đầy đủ dừng — những pipelines chỉ bao giờ collect LCP, INP, và CLS.

TBT là lab proxy cho INP

Ở đây vì sao TBT tồn tại all. Lab tools load một trang trong một simulated environment với không real người dùng, so they không thể đo lường Interaction để Tiếp theo Paint — INP cần thực tế clicks và taps. TBT fills đó khoảng trống: “the Total Blocking Time (TBT) metric is lab-measurable and is a proxy for INP.” (bản dịch) «đó Total Blocking Time (TBT) chỉ số là lab-measurable và là một proxy cho INP.»

Đó hai là 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.” (bản dịch) «Although INP và TBT là calculated differently, they là cả hai reflections of một blocked main chuỗi trao đổi during đó bootstrap xử lý. Khi đó main chuỗi trao đổi là blocked, đó trình duyệt là delayed trong responding để người dùng interactions.» Và empirically, “A low TBT often correlates with a low Interaction to Next Paint (INP).” (bản dịch) «MỘT thấp TBT thường correlates với một thấp Interaction để Tiếp theo Paint (INP).»

Nhưng “proxy” không phải “substitute.” Google là rõ ràng: “Total Blocking Time (TBT) may be a reasonable proxy metric for INP, but it’s not a substitute for INP in and of itself.” (bản dịch) «Total Blocking Time (TBT) có thể là một reasonable proxy chỉ số cho INP, nhưng đây là không một substitute cho INP trong và of itself.» They diverge trong real ways:

• Cao TBT, fine INP. TBT measures blocking during load. nếu của bạn người dùng không thực ra try để interact during đó blocked window — họ chờ cho trang để look finished đầu tiên — của họ INP có thể là fine ngay cả với ugly TBT.
• Fine TBT, poor INP. INP cũng covers chậm event handlers và kết xuất hoạt động đó fire sau khi load, plus điều như trình duyệt 300 ms tap delay on non-mobile-optimized các trang — none của mà TBT sees.

Khi lab và trường disagree, trust trường. INP ( thực-người dùng number) takes priority over TBT ( lab estimate).

Một lịch sử note đó trips mọi người lên: TBT được sử dụng để là lab proxy cho đầu tiên Input Delay (FID). INP replaced FID as Cốt lõi Web Vital vào ngày 12 tháng 3 năm 2024, so TBT là hiện tại INP proxy. underlying mechanism không bao giờ changed — nó luôn là về blocked main chuỗi trao đổi during load — nhưng bất kỳ older bài viết calling TBT “FID proxy” có trước đó chuyển.

Vì sao TBT dominates Lighthouse score

TBT carries largest single weight trong Lighthouse Performance score — 30%, weighting introduced trong Lighthouse 10 và, verified trực tiếp so với Chrome scoring tài liệu on 2026-07-18, vẫn unchanged qua hiện tại Lighthouse 13:

Treat đó bảng as version-và-date-scoped, không vĩnh viễn constant — Lighthouse có changed của nó weights trước khi và có thể again. Re-verify so với Lighthouse performance scoring trước khi quoting nó trong audit deck.

Đây là practical reason TBT matters Đối với SEO audits mặc dù nó không phải tín hiệu xếp hạng: poor TBT có outsized effect on đó big Lighthouse number mọi người screenshots. Addy Osmani worked ví dụ làm nó concrete — removing một Intersection Observer polyfill cut TBT từ 400 ms để 300 ms và lifted Lighthouse Performance score từ 63 để 70. Một khắc phục, seven points, vì của 30% weight.

Một hơn nuance: đó “Good ≤200 ms” (bản dịch) «Good ≤200 ms» category ngưỡng và đó Lighthouse score là khác nhau scales. Để score 90+ on đó TBT subscore bạn cần khoảng ≤300 ms on mobile, và để hit 100 bạn cần ≤100 ms. (Những subscore figures là DebugBear tài liệu of đó scoring curve, reverified so với đó trực tiếp nguồn 2026-07-18.) “Good” và “100” không phải đó giống nhau bar.

Làm TBT ảnh hưởng SEO thứ hạng?

không trực tiếp — và I’ll là straighter về điều này hơn phần lớn.

TBT không phải tín hiệu xếp hạng. Google interactivity xếp hạng input là INP, trường chỉ số. TBT là diagnostic đó helps bạn tìm và khắc phục dài tasks đó hurt INP. Improving TBT có thể improve INP, mà có thể marginally help trang Experience side của thứ hạng — nhưng đó hai links của “có thể” away từ của bạn positions.

và ở đây my thực tế position on toàn bộ Core Web Vitals câu hỏi, mà I’ve được viết trước khi trong my trang speed hướng dẫn: I không think Core Web Vitals có nhiều impact on SEO, và trừ khi bạn’re extremely chậm I generally sẽ không prioritize them. Làm them cho người dùng và conversions, không cho xếp hạng bump. đó áp dụng doubly để TBT, mà là lab proxy cho trường chỉ số cho nhỏ xếp hạng input. khắc phục nó vì frozen trang loses bạn customers — không vì bạn’re chasing position.

Điều gì gây ra cao TBT

nó gần như luôn JavaScript:

• Unnecessary JavaScript loading, phân tích cú pháp, hoặc execution — Lighthouse audit own words. Shipping big bundle trang không cần tại load là kinh điển nguyên nhân.
• Inefficient JavaScript statements — nặng synchronous hoạt động đó monopolizes main chuỗi trao đổi.
• thứ ba-party scripts — tag managers, chat widgets, phân tích, quảng cáo scripts. thường single biggest contributor, và một bạn control least.
• Nặng framework bootstrap — React hydration và similar có thể chạy dài tasks during startup.
• Style/layout recalculation và garbage collection — forced synchronous layout, lớn style recalcs, và GC pauses hiển thị lên as main-chuỗi trao đổi tasks cũng; không assume mỗi dài task trong trace là JavaScript execution.

không assume bundle transfer size là toàn bộ story, either. Trace attribution có thực gaps: cross-origin frames và worker threads có quyền riêng tư và security limits on Điều gì dài-task observer có thể báo cáo về them (see Khắc phục sự cố), so unattributed task trong của bạn trace không phải proof không thứ ba party là involved — nó có thể chỉ có nghĩa là attribution API không phải được phép để tell bạn.

Cách khắc phục cao TBT

các cách sửa là giống nhau family as INP các cách sửa — cả hai come xuống để blocked main chuỗi trao đổi.

1. Tìm đó dài tasks. Open đó Chrome DevTools Performance panel và tìm tasks over 50 ms (họ là flagged với red corners), hoặc chạy đó Lighthouse “Avoid long main-thread tasks” (bản dịch) «Tránh dài main-chuỗi trao đổi tasks» audit.
2. Audit bên thứ ba scripts đầu tiên. họ là thường đó easiest wins. Dùng đó DevTools Coverage và Network tabs để see điều gì mỗi script costs, và lazy-load nặng embeds (YouTube, maps, chat) behind một facade.
3. Break lên đó dài tasks. Yield để đó main chuỗi trao đổi so đó trình duyệt có thể xử lý input giữa chunks — “when tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” (bản dịch) «khi tasks là hỏng lên, đó trình duyệt có thể respond để cao hơn-priority hoạt động nhiều sooner—including người dùng interactions.» Đó modern API là scheduler.yield(), với một setTimeout(resolve, 0) fallback (see đó Cheat Sheets tab cho đó pattern). Note đó Google không lâu hơn khuyến nghị isInputPending() — yield regardless of liệu input là pending.
4. Reduce đó JavaScript. Code-split lớn bundles so ít hơn parses và evaluates tại load, xóa unused JS (DevTools Coverage tab cho thấy bạn điều gì), và defer non-cốt yếu scripts.
5. Move nặng computation off đó main chuỗi trao đổi. Web Workers chạy CPU-nặng hoạt động on một tách biệt chuỗi trao đổi, leaving đó main chuỗi trao đổi free để respond.

hữu ích side effect: dài tasks đó block main chuỗi trao đổi có thể cũng delay Largest Contentful Paint kết xuất, so sửa TBT đôi khi improves LCP cũng — especially Khi render-blocking JS là involved.

nơi để go tiếp theo

TBT lives trong Core Web Vitals family alongside của nó trường đối tác tương ứng Interaction để tiếp theo Paint, loading các chỉ số Largest Contentful Paint và đầu tiên Contentful Paint, và lab tools Lighthouse, PageSpeed Insights, và Speed chỉ mục đó báo cáo them. nếu bạn chỉ remember một điều: TBT là lab warning light cho trường responsiveness — chase dài tasks, không number.

AI summary

condensed take on Nâng cao version:

• TBT = blocked main-chuỗi trao đổi time during load. đây là đó total time, giữa FCP và TTI, đó main chuỗi trao đổi đã là blocked dài đủ để ngăn input responsiveness.
• Đó math: sum of đó blocking portion (duration − 50 ms) of mỗi dài task (bất kỳ main-chuỗi trao đổi task over 50 ms). Tasks ≤50 ms thêm 0 ms. Google worked ví dụ: tasks of 250/90/35/30/155 ms → 345 ms TBT.
• đây là một lab chỉ số. Bạn see điều này trong Lighthouse, PageSpeed Insights’ lab tab, và DevTools — không bao giờ trong CrUX hoặc Search Console.
• Không một Cốt lõi Web Vital. Đó three CWV là LCP, INP, CLS. TBT là đó lab proxy cho INP (trong lịch sử FID proxy; INP replaced FID vào ngày 12 tháng 3 năm 2024).
• Biggest Lighthouse weight: 30% — đó single largest, so một poor TBT tanks đó overall score. Mobile thresholds: good ≤200 ms, cần improvement ≤600 ms, poor

  600 ms.

• Thứ hạng: không một trực tiếp xếp hạng factor. INP là đó trường tín hiệu; TBT chỉ helps diagnose điều này. Patrick take: cách sửa điều này cho người dùng và conversions, không cho một xếp hạng bump.
• Các cách sửa (giống nhau family as INP): tìm dài tasks trong DevTools, audit bên thứ ba scripts đầu tiên, break lên tasks với scheduler.yield(), code-split và xóa unused JS, offload nặng hoạt động để Web Workers.
• Caveat: TBT và INP có thể diverge — cao TBT với fine INP (người dùng không interact during load) hoặc fine TBT với poor INP (chậm event handlers sau load). Trường dữ liệu wins.
• “Lab-chỉ” có nghĩa là lab-được khuyến nghị, không lab-không thể. Bạn có thể technically compute một TBT-style total từ trường dữ liệu với đó Dài Tasks API, nhưng Google advises so với điều này (cũng nhiều chạy-để-chạy variance) — CrUX và Search Console đơn giản không bao giờ carry điều này either way.
• Trace attribution có real gaps. Cross-origin frames và worker threads có quyền riêng tư/security limits on điều gì một dài-task observer có thể báo cáo, so an unattributed task có nghĩa là “cause unknown,” (bản dịch) «nguyên nhân unknown,» không “no third party involved.” (bản dịch) «không bên thứ ba involved.»

Tài liệu chính thức

Chính-nguồn tài liệu on TBT từ Google và Chrome team.

web.dev / Chrome

• Total Blocking Time (TBT) — Philip Walton & Barry Pollard: đó canonical definition, đó 50 ms dài-task rule, và đó worked ví dụ.
• TBT Lighthouse audit — đó audit trang, với đó mobile/desktop scoring thresholds và cited gây ra.
• Lighthouse performance scoring — đó chỉ số weights, nơi TBT 30% xuất hiện từ.
• Web Chỉ số quan trọng — vì sao TBT là không một Cốt lõi Web Vital và cách điều này relates để đó set.
• Interaction để Tiếp theo Paint (INP) — đó trường chỉ số TBT proxies, và đó “proxy, not substitute” (bản dịch) «proxy, không substitute» caveat.
• Optimize dài tasks — Jeremy Wagner & Brendan Kenny on breaking lên tasks, scheduler.yield(), và vì sao isInputPending() là không lâu hơn được khuyến nghị.
• Time để Interactive (TTI) — đó chỉ số đó defines đó end of đó TBT window, và vì sao điều này đã là đã xóa từ Lighthouse 10.
• Lab và trường dữ liệu differences — đó limits of TBT as an INP stand-trong.

Quotes từ nguồn

On—record statements từ tài liệu củ Google. mỗi link là deep link đó jumps để quoted passage.

Definition và mechanics

• “the total amount of time after First Contentful Paint (FCP) where the main thread was blocked for long enough to prevent input responsiveness.” (bản dịch) «đó total amount of time sau Đầu tiên Contentful Paint (FCP) nơi đó main chuỗi trao đổi đã là blocked cho dài đủ để ngăn input responsiveness.» — web.dev, Total Blocking Time. Nhảy đến trích dẫn
• “a task that runs on the main thread for more than 50 milliseconds” (bản dịch) «một task đó chạy on đó main chuỗi trao đổi cho hơn 50 milliseconds» — đó definition of một dài task. Nhảy đến trích dẫn
• “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.” (bản dịch) «Để cung cấp một good người dùng experience, các trang nên strive để có một Total Blocking Time of ít hơn 200 milliseconds khi tested on average mobile hardware.» Nhảy đến trích dẫn
• “A low TBT often correlates with a low Interaction to Next Paint (INP).” (bản dịch) «MỘT thấp TBT thường correlates với một thấp Interaction để Tiếp theo Paint (INP).» Nhảy đến trích dẫn

Status: không Cốt lõi 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.” (bản dịch) «Total Blocking Time (TBT) là một lab các chỉ số là vital trong catching và diagnosing potential interactivity các vấn đề đó có thể impact INP. Tuy nhiên, điều này không phải part of đó Core Web Vitals set vì they không phải trường-measurable, nor làm they reflect một người dùng-centric outcome.» — web.dev, Web Chỉ số quan trọng (Philip Walton). (Grammar là verbatim từ đó nguồn.) Nhảy đến trích dẫn

TBT as 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.” (bản dịch) «Trong such cases, Total Blocking Time (TBT) có thể là một reasonable proxy chỉ số cho INP, nhưng đây là không một substitute cho INP trong và of itself.» — web.dev, Interaction để Tiếp theo Paint. Nhảy đến trích dẫn

Dài tasks và sửa them

• “The main thread can only process one task at a time. Any task that takes longer than 50 milliseconds is a long task.” (bản dịch) «Đó main chuỗi trao đổi có thể chỉ xử lý một task tại một time. Bất kỳ task đó takes lâu hơn 50 milliseconds là một dài task.» — web.dev, Optimize dài tasks. Nhảy đến trích dẫn
• “When tasks are broken up, the browser can respond to higher-priority work much sooner—including user interactions.” (bản dịch) «Khi tasks là hỏng lên, đó trình duyệt có thể respond để cao hơn-priority hoạt động nhiều sooner—including người dùng interactions.» Nhảy đến trích dẫn
• On isInputPending(): “We no longer recommend using this API, and instead recommend yielding regardless of whether input is pending or not.” (bản dịch) «We không lâu hơn khuyến nghị dùng này API, và thay vì khuyến nghị yielding regardless of liệu input là pending hoặc không.» Nhảy đến trích dẫn

TTI và Vì sao TBT replaced nó as Điểm mấu chốt interactivity number

• “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.” (bản dịch) «Newer, alternative, các chỉ số như Largest Contentful Paint (LCP), Total Blocking Time (TBT), và Interaction để Tiếp theo Paint (INP) là thường tốt hơn các chỉ số để dùng trong place of TTI.» — web.dev, Time để Interactive (Philip Walton). Nhảy đến trích dẫn

TBT triage checklist

nhanh truyền Khi Lighthouse hands bạn red (hoặc orange) Total Blocking Time:

• Xác nhận bạn là reading lab dữ liệu — TBT là trong Lighthouse / PageSpeed Insights’ lab tab / DevTools, không đó trường hoặc Search Console.
• Open đó DevTools Performance panel và tìm đó dài tasks (over 50 ms, red-cornered) giữa đầu tiên paint và interactive.
• List của bạn bên thứ ba scripts và điều gì mỗi costs (Coverage + Network tabs) — bắt đầu ở đây; đây là thường đó biggest, easiest win.
• Lazy-load nặng embeds (YouTube, maps, chat) behind một facade.
• Chạy đó Lighthouse “Avoid long main-thread tasks” (bản dịch) «Tránh dài main-chuỗi trao đổi tasks» và “Reduce unused JavaScript” (bản dịch) «Reduce unused JavaScript» audits và hoạt động đó list.
• Code-split lớn bundles so ít hơn JS parses/evaluates tại load.
• Defer non-cốt yếu scripts; dynamic-import() điều gì không needed immediately.
• Break lên remaining dài tasks với scheduler.yield() (setTimeout fallback). không reach cho isInputPending().
• Move CPU-nặng computation để một Web Worker.
• Cross-kiểm tra đó trường: pull INP từ CrUX / real-người dùng monitoring. Nếu INP là fine, không over-invest trong chasing đó lab number.

TBT bảng tra nhanh

** math, trong một line**

TBT = Σ (taskDuration − 50 ms) cho mỗi task > 50 ms giữa FCP và TTI. Tasks ≤ 50 ms contribute 0 ms.

Worked ví dụ (Google)

Lighthouse thresholds

(Thresholds so với. Lighthouse subscore curve differ: 90+ ≈ ≤300 ms mobile, 100 ≈ ≤100 ms mobile — DebugBear được ghi lại figures, reverified trực tiếp 2026-07-18.)

TBT so với. INP — bảng tra nhanh

Yield-để-main pattern ( khắc phục)

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

sử dụng scheduler.yield() nơi khả dụng, fall lại để setTimeout. không sử dụng isInputPending() — Google hiện tại khuyến nghị yielding regardless của liệu input là pending.

Tools cho measuring và sửa TBT

• PageSpeed Insights — đọc TBT trong đó lab dữ liệu section (đây là không trong đó trường-dữ liệu section, vì TBT không một trường chỉ số).
• Lighthouse (Chrome DevTools → Lighthouse panel, hoặc đó CLI) — đó nguồn of đó TBT number và đó “Avoid long main-thread tasks” (bản dịch) «Tránh dài main-chuỗi trao đổi tasks» / “Reduce unused JavaScript” (bản dịch) «Reduce unused JavaScript» audits.
• Chrome DevTools — Performance panel — record một load và tìm đó dài tasks (over 50 ms, flagged với red corners) đó làm lên của bạn TBT.
• Chrome DevTools — Coverage tab — see cách nhiều of mỗi script là thực ra dùng, để đích unused JavaScript và nặng third parties.
• WebPageTest — lab kiểm thử với detailed main-chuỗi trao đổi và CPU breakdowns.
• Dài Animation Frames (LoAF) API — một modern, trường-side complement để TBT, không một replacement cho của nó lab load-window calculation: điều này các thuộc tính dài animation frames trên một toàn bộ visit, mà là closer để cách INP các vấn đề thực ra surface, thay vì TBT single FCP-để-TTI load window.
• Trường-side TBT qua đó Dài Tasks API — technically có thể (sum duration − 50 ms cho observed dài tasks trong production, giống nhau as đó Scripts tab snippet), nhưng Google khuyến nghị so với điều này cho RUM: real người dùng interaction timing làm đó number cũng variable để so sánh chạy over chạy. Reach cho INP hoặc LoAF cho trường responsiveness thay vì.
• Nơi bạn sẽ không tìm điều này: Google Search Console’s Core Web Vitals báo cáo và CrUX carry LCP, INP, và CLS chỉ — không bao giờ TBT, regardless of điều gì là technically có thể để compute yourself.

TBT mistakes đó produce sai khắc phục

• Calling TBT Cốt lõi Web Vital. TBT là lab diagnostic và hữu ích proxy cho main-chuỗi trao đổi contention; INP là thực-người dùng Cốt lõi Web Vital. Báo cáo them riêng.
• Counting toàn bộ dài task as blocking time. chỉ portion beyond 50 milliseconds được tính. 70-millisecond task contributes 20 milliseconds, không 70.
• Optimizing bên ngoài việc đo lường window. Lighthouse TBT sums blocking giữa FCP và TTI. Hoạt động trước khi hoặc sau khi đó window có thể quan trọng để người dùng, nhưng nó không phải part của đó TBT giá trị.
• Removing đầu tiên-party code trong khi ignoring largest thứ ba party. sử dụng trace và yêu cầu initiators để thuộc tính dài tasks trước khi chọn owner hoặc khắc phục.
• Splitting code không có reducing hoạt động. nhiều nhỏ hơn tasks có thể improve responsiveness, nhưng shipping giống nhau unnecessary JavaScript vẫn costs phân tích cú pháp, compilation, và execution. Xóa unused hoạt động cũng như yielding nó.
• Assuming good lab TBT proves good trường INP. thực người dùng interact sau khi load on varied devices. xác nhận outcome với trường responsiveness dữ liệu.

TBT là cao nhưng network looks fast

Symptom: các tài nguyên download quickly, tuy vậy Lighthouse các báo cáo nặng blocking.

có khả năng nguyên nhân: JavaScript phân tích cú pháp, compilation, execution, hydration, hoặc thứ ba-party hoạt động monopolizes main chuỗi trao đổi sau khi bytes arrive.

khắc phục và xác nhận: Record Performance trace, loại dài tasks by duration và owner, sau đó xóa unused code, defer noncritical hoạt động, hoặc split largest task. xác nhận blocking portion falls trong repeated khớp chạy.

lớn bundle là deferred nhưng TBT vẫn giữ cao

Symptom: Thêm defer thay đổi download/execution order không có materially moving TBT.

có khả năng nguyên nhân: giống nhau expensive code vẫn executes bên trong FCP-để-TTI window.

khắc phục và xác nhận: Profile functions bên trong dài task. Code-split by route hoặc interaction, reduce hydration, hoặc xóa unused/duplicate hoạt động; sau đó verify đó execution time, không merely yêu cầu bắt đầu time, declines.

Lighthouse TBT là good trong khi trường INP là poor

Symptom: Navigation lab các kiểm thử look responsive, nhưng CrUX hoặc RUM các báo cáo chậm interactions.

có khả năng nguyên nhân: problematic task occurs sau khi ban đầu load hoặc chỉ sau khi thực interaction đó tiêu chuẩn Lighthouse navigation không exercise.

khắc phục và xác nhận: Collect interaction traces cho poor INP các trang và devices, reproduce hành động locally, và optimize event xử lý và tiếp theo paint.

dài task hiển thị lên với không clear owner

Symptom: DevTools hoặc một Dài Tasks API observer flags một blocking task, nhưng đó attribution là blank, generic, hoặc labeled điều gì đó như “unknown” / “cross-origin.” (bản dịch) «cross-origin.»

Có khả năng nguyên nhân: Này là một known coverage khoảng trống, không một việc đo lường lỗi. Đó Dài Tasks API own đặc tả bounds điều gì điều này sẽ báo cáo trên execution contexts — cross-origin ancestor tasks là có chủ ý không reported (“this is not reported because of security” (bản dịch) «này không phải reported làm security»), và một deeply embedded cross-origin iframe “does not receive any information” (bản dịch) «không nhận bất kỳ information» về một dài task trong một cross-origin ancestor. Hoạt động happening trong một Web Worker hoặc đó trình duyệt compositor chuỗi trao đổi có thể cũng fall bên ngoài điều gì đó attribution surfaces bạn.

Cách sửa và xác nhận: không conclude “no third party is involved” (bản dịch) «không bên thứ ba là involved» chỉ vì không có gì là named. Cross-kiểm tra với đó Network panel initiator cột, đó Coverage tab, và (nơi bạn control đó script) đầu tiên-party instrumentation bên trong iframes bạn own. Treat an unattributed task as “cause unknown,” (bản dịch) «nguyên nhân unknown,» không “cause absent.” (bản dịch) «nguyên nhân absent.»

TBT varies sharply giữa chạy

Symptom: Một chạy là green và tiếp theo là poor với không deployment.

có khả năng nguyên nhân: Variable thứ ba-party execution, máy chủ timing đó thay đổi hoạt động window, bộ nhớ đệm state, hoặc kiểm thử-machine contention.

khắc phục và xác nhận: Match settings, chạy several cold các kiểm thử, và so sánh dài task owners và median kết quả thay vì selecting một score.

Turn trace vào quyền sở hữu 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.

So sánh hai performance 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 thứ ba-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 dài tasks during reproduction

Chạy điều này sớm trong DevTools Console, reproduce load hoặc interaction, và inspect mỗi task 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 });

Đây là gỡ lỗi total cho period bạn observe, không Lighthouse chính thức TBT trừ khi bạn có chủ ý reproduce giống nhau FCP-để-TTI window và kiểm thử conditions.

Flag scripts với phần lớn main-chuỗi trao đổi evaluation time

sau khi recording DevTools Performance trace, sử dụng Bottom-lên view grouped by URL. cho nhanh network inventory alongside nó, điều này Console snippet lists transferred JavaScript từ largest để 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);

Lớn transfer size là chỉ lead; Performance trace là Điều gì các thuộc tính phân tích cú pháp và execution time để TBT.

Dài-task reduction

Kiểm thử để chạy: Capture several khớp Lighthouse/Performance traces trước khi và sau khi JavaScript thay đổi và so sánh dài tasks giữa FCP và TTI.

Dự kiến kết quả: targeted task disappears, shortens, hoặc yields vào nhỏ hơn tasks, và median TBT improves không có delaying FCP hoặc breaking functionality.

thất bại interpretation: Hoạt động moved để một bundle/task, vẫn executes trong giống nhau window, hoặc thông thường chạy variance là lớn hơn thay đổi.

Monitoring window: Kiểm thử immediately trong mobile và desktop lab profiles và watch trường INP during tiếp theo reporting window.

Rollback trigger: Roll lại nếu cốt yếu interactions break, các lỗi rise, hoặc repeatable FCP/LCP/INP regression outweighs TBT improvement.

thứ ba-party deferral

Kiểm thử để chạy: So sánh cold trace với thứ ba party trong của nó hiện tại position và với nó delayed cho đến khi consent, idle time, hoặc relevant interaction.

Dự kiến kết quả: Của nó dài tasks leave ban đầu TBT window trong khi bắt buộc business event vẫn fires tại dự kiến time.

thất bại interpretation: một loader injects nó sớm, phụ thuộc code chặn trang, hoặc script main-chuỗi trao đổi hoạt động không phải measured bottleneck.

Monitoring window: Validate on mỗi template đó loads script và monitor cả hai performance và business event sau khi phát hành.

Rollback trigger: Restore prior loading path nếu consent, phân tích, checkout, quảng cáo, hoặc một bắt buộc function loses hợp lệ events.

Trường responsiveness follow-lên

Kiểm thử để chạy: Segment trường INP cho affected templates/devices sau khi lab TBT thay đổi trong khi giữ deployment date annotated.

Dự kiến kết quả: Trường responsiveness vẫn giữ ổn định hoặc improves; lab-chỉ win là không reported as người dùng outcome cho đến khi trường evidence hỗ trợ nó.

thất bại interpretation: thực interaction hoạt động occurs bên ngoài ban đầu load hoặc optimized cohort là cũng nhỏ để move aggregate.

Monitoring window: Review qua đầy đủ trường-dữ liệu reporting window và during cao-giá trị interactions.

Rollback trigger: Investigate hoặc roll lại nếu trường INP hoặc cốt yếu interaction thành công regresses consistently sau khi phát hành.

Tự kiểm tra: Total Blocking Time

Five nhanh các câu hỏi on TBT math và diagnosis. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

Chính thức

• Total Blocking Time (TBT) — canonical definition và worked ví dụ.
• Optimize dài tasks — practical sửa hướng dẫn (scheduler.yield(), batching, Vì sao không isInputPending()).
• Web Chỉ số quan trọng — nơi TBT sits relative để Core Web Vitals.
• Optimizing Web Chỉ số quan trọng sử dụng Lighthouse — Addy Osmani; bao gồm polyfill-removal worked ví dụ (TBT 400→300 ms, score 63→70).

Từ others (verify trước quoting)

• DebugBear — Total Blocking Time — mạnh kỹ thuật depth on đó TBT↔INP mechanism và đó Lighthouse scoring curve.
• NitroPack — Điều gì là Total Blocking Time? — đó “task count ≠ blocking time” (bản dịch) «task count ≠ blocking time» insight.
• BrowserStack — TBT hướng dẫn và Catchpoint — TBT — tool/monitoring-oriented overviews.
• web.dev — Người dùng-centric performance các chỉ số — Philip Walton framework classifying TBT as một lab/load-responsiveness chỉ số so với. trường các chỉ số; hữu ích cách diễn đạt cho explaining vì sao TBT không xuất hiện trong CrUX.
• web.dev — Getting đã bắt đầu với measuring Web Chỉ số quan trọng — covers cách TBT serves as đó lab proxy cho INP khi real-người dùng việc đo lường không có thể trong simulated environments.
• WebPageTest — free lab kiểm thử tool đó các báo cáo TBT alongside detailed main-chuỗi trao đổi và CPU breakdowns; hữu ích cho diagnosing mà tasks là driving một cao score.
• Search Engine Journal — Core Web Vitals coverage — ongoing ngành reporting on CWV cập nhật, TBT role trong audits, và cách practitioners interpret lab so với. trường gaps.

Số liệu worth citing

• TBT là 30% của Lighthouse Performance score — single largest weight của bất kỳ chỉ số (LCP và CLS là 25% mỗi; FCP và Speed chỉ mục 10% mỗi). Introduced trong Lighthouse 10, trực tiếp-reverified 2026-07-18 as unchanged qua Lighthouse 13. Nguồn
• ** “good” bar là ≤200 ms on mobile** (≤150 ms desktop); “poor” là >600 ms mobile (>350 ms desktop) — Lighthouse audit tài liệu. Nguồn
• Một polyfill = seven points. Removing single Intersection Observer polyfill cut TBT từ 400 ms để 300 ms và lifted Lighthouse Performance score từ 63 để 70 — sạch illustration của 30% weight. Nguồn
• ** 250 ms task contributes 200 ms của blocking time** — blocking portion là luôn duration − 50 ms. Google worked ví dụ totals 345 ms trên five tasks. Nguồn

Nhật ký thay đổi