Total Blocking Time

Why It Matters

TBT accounts for 30% of the total Lighthouse Performance score, making it the single heaviest weighted metric in synthetic audits. It serves as the primary laboratory proxy for field Interaction to Next Paint (INP). High TBT means the page looks loaded but freezes when users attempt to click or type.

Google Lighthouse TBT Scoring Thresholds

Practical Implementation Example

Dynamic imports delay JavaScript parsing and execution for complex non-critical components until after the initial page is interactive, keeping TBT under 100 ms.

import dynamic from 'next/dynamic';

// Lazy-load heavy charting library only when user scrolls near it
const HeavyAnalyticsChart = dynamic(
  () => import('./HeavyAnalyticsChart'),
  { ssr: false, loading: () => <div className="h-64 animate-pulse bg-slate-800" /> }
);