How to Fix Total Blocking Time (TBT)

What Lighthouse Is Telling You

When Lighthouse flags Total Blocking Time, it means JavaScript tasks on the main thread are running too long during page load. TBT carries a weight of 30 — the heaviest single metric in the Lighthouse Performance score. It measures the total milliseconds where the main thread was blocked by long tasks between First Contentful Paint and Time to Interactive.

A “long task” is any JavaScript execution that takes more than 50 ms. TBT sums the blocking portion of each long task — the time beyond 50 ms. A task that runs for 120 ms contributes 70 ms to TBT.

Why TBT Is High

• Large JavaScript bundles — Parsing and executing a 500 KB bundle blocks the main thread for hundreds of milliseconds
• Third-party scripts — Analytics, ad networks, chat widgets, and tag managers each add their own long tasks
• Synchronous rendering — React hydration on a complex component tree can produce a single long task that blocks the thread for 200+ ms
• No code splitting — Loading the entire application JavaScript on every page instead of splitting by route
• Heavy computations on load — Data processing, sorting large arrays, or building complex data structures during initial render

The Old Way to Fix It

1. Run Lighthouse in DevTools and find the TBT score
2. Open the Performance panel and record a page load
3. Look for long tasks (highlighted with red corners) in the flame chart
4. Click each long task to identify which script and function is responsible
5. Switch to your editor, find the script
6. Refactor: split large bundles with dynamic import(), defer non-critical scripts, move heavy computation to a Web Worker
7. Re-run Lighthouse and check TBT
8. Repeat for each long task

Debugging TBT requires correlating flame chart entries with source files, which is tedious when third-party scripts and framework internals are intermixed with application code.

The Frontman Way

Tell Frontman to fix your Lighthouse issues. That is the entire workflow.

Frontman has a built-in Lighthouse tool. It runs the audit, reads the failing scores, fixes the underlying code, and re-runs the audit to verify the score went up. If issues remain, it keeps going — iterating through fixes and re-checks until the metrics pass. You do not spelunk flame charts or correlate long tasks with source files. You say “fix the Lighthouse issues on this page” and Frontman handles the rest.

Key Fixes for TBT

• Defer non-critical JavaScript — Add defer or async to <script> tags that are not needed for initial render
• Code split by route — Use dynamic import() to load page-specific code only when needed. Frameworks like Next.js and Vite do this by default for routes, but component-level splitting often requires manual setup
• Remove unused JavaScript — Audit your bundle with source maps and remove dead code
• Move heavy work to Web Workers — Data processing, sorting, and computation that does not need DOM access can run off the main thread
• Break up long tasks — Use requestIdleCallback, setTimeout(fn, 0), or the scheduler.yield() API to yield to the main thread between chunks of work
• Reduce third-party impact — Load analytics and chat widgets after the page is interactive, or use Partytown to run them in a Web Worker
• Minify JavaScript — Smaller files parse faster

People Also Ask

How is TBT calculated?

TBT sums the blocking portions of all long tasks between First Contentful Paint and Time to Interactive. For each task longer than 50 ms, the blocking time equals the task duration minus 50 ms. A task of 200 ms contributes 150 ms to TBT.

What is the relationship between TBT and INP?

TBT measures blocking during page load; Interaction to Next Paint measures responsiveness to user interactions throughout the page’s lifetime. They both reflect main-thread availability, so fixes that reduce TBT (code splitting, deferring scripts) often improve INP too.

Does server-side rendering help TBT?

Server-side rendering reduces time to first paint but does not eliminate TBT. The client still needs to hydrate components, which requires parsing and executing JavaScript. Partial hydration, progressive hydration, or React Server Components can reduce hydration cost.

What tools besides Lighthouse measure TBT?

Chrome DevTools Performance panel shows individual long tasks. WebPageTest reports TBT. The Web Vitals Chrome extension shows real-time metrics. For field data, TBT is not directly measurable in the field, but INP serves as its real-user equivalent.

---

You can use Frontman to automatically fix this and any other Lighthouse issue. Frontman runs the audit, reads the results, applies the fixes, and verifies the improvement — all inside the browser you are already working in. Get started with one install command.