Main Thread Blocking (TBT)

Total Blocking Time (TBT) measures how long the main thread is blocked by long tasks.

Why It Matters

High TBT reduces responsiveness, delays interaction readiness, and makes pages feel sluggish even when content appears quickly.

Common TBT Sources

• Large JavaScript bundles executed during startup.
• Heavy third-party scripts.
• Synchronous parsing/transforms on the main thread.
• Long event handlers and expensive re-renders.

Improvement Ideas

• Reduce JavaScript execution cost.
• Split large bundles and defer non-critical code.
• Break long tasks into smaller chunks.
• Delay non-essential third-party scripts until after initial interaction.

Measurement Tips

• Use Lighthouse and performance traces to identify long tasks.
• Correlate TBT with interaction delays in real-user telemetry.
• Re-test on lower-end mobile profiles where blocking effects are amplified.

Quick Checklist

• Startup JS payload is minimized.
• Non-critical scripts are deferred/lazy-loaded.
• Long tasks are reduced below blocking thresholds.
• Third-party tags are audited and prioritized.

Final Takeaway

Lower TBT improves interactive performance and perceived quality. Fast paint without responsiveness is still a poor user experience.