We respect your privacy.

We use strictly necessary cookies to keep you signed in and to protect against CSRF. With your permission we also use a small amount of first-party analytics to improve the product. We do not sell your data and we do not use third-party advertising trackers. See our cookie policy and privacy policy .

Crawlmind
← All learn topics

Rule page.performance.tbt-high

Reduce Total Blocking Time (TBT)

page.performance.tbt-high is a check in Crawlmind's site audit that grades medium-impact issues of this kind. This page explains why the rule matters and the exact fix.

Impact: mediumEffort: high

Why it matters

TBT measures how long the main thread is blocked by long JavaScript tasks during page load: the lab proxy for INP (Interaction to Next Paint), Google's current responsiveness Core Web Vital. High TBT means users tap a button and nothing happens for seconds while a fat JS bundle parses. Mobile devices feel it 3-4× worse than your desktop test rig.

The fix

TBT comes down by SHIPPING LESS JAVASCRIPT to the main thread.

1. **Code-split per route**: Next/Nuxt do this by default; verify your bundle analyzer shows distinct chunks.
2. **Dynamic-import below-the-fold widgets**: chat, carousels, modals. They load on interaction, not on page load.
3. **Self-host third-party scripts** OR put them on `defer`. Each external script is a separate render-blocking hop.
4. **Switch heavy interactive components** to lightweight alternatives (Preact instead of React for islands; vanilla JS for simple toggles).
5. **Cut polyfills** for browsers you no longer support: `targets: { esmodules: true }` in your Babel config drops ~30% of legacy compat code.

Measure with Lighthouse → Performance → Total Blocking Time + Long Tasks breakdown.

References