total-blocking-time
•
Savings: 400ms - 1500ms CPU freeze reduction
How to Reduce Total Blocking Time (TBT) & Master INP on Mobile
Total Blocking Time (TBT) measures the total time between FCP and TTI where the CPU main thread was blocked by tasks taking longer than 50ms.
Technical Breakdown: What Causes This Issue?
JavaScript executes on a single main browser thread. When a heavy script performs long tasks (> 50ms) parsing JSON, running animations, or re-rendering React trees, user taps and keystrokes are frozen in queue. In Google Search rankings, TBT is the lab proxy for Interaction to Next Paint (INP).
How to detect if your page is affected:
- Lighthouse TBT is highlighted in Red (> 600ms) or Orange (> 200ms).
- Chrome DevTools Performance panel shows long red triangles on JavaScript execution blocks.
- Mobile taps feel laggy or unresponsive during initial page loading.
Step-by-Step Resolution Workflows
Break up monolithic JavaScript. Delay non-critical tracking pixels (Meta Pixel, TikTok, Hotjar, Clarity) until 3 seconds after window load. Replace jQuery-heavy themes or heavy page builders (Elementor/Divi bloat) with lightweight block builders or headless caching.
add_filter('script_loader_tag', function($tag, $handle) {
if (is_admin()) return $tag;
if (strpos($tag, 'defer') !== false) return $tag;
return str_replace(' src=', ' defer src=', $tag);
}, 10, 2);
Audit third-party app scripts in Shopify Theme App Extensions. Many currency converters, social proof popups, and live chats run continuous CPU polling loops. Disable unessential app features.
<script src="{{ 'theme.js' | asset_url }}" defer></script>
// Break long tasks using scheduler.yield() or requestIdleCallback
async function processLargeDataset(items) {
for (let i = 0; i < items.length; i++) {
processSingleItem(items[i]);
if (i % 50 === 0 && 'scheduler' in window) {
await scheduler.yield(); // Give CPU back to user UI
}
}
}Frequently Asked Questions
How is TBT related to INP (Interaction to Next Paint)?
TBT measures CPU blocking during initial load in lab tests. INP measures real-user interaction latency across the entire page lifecycle in CrUX. Fixing TBT directly fixes INP.
What is considered a Good TBT score?
Under 200ms is Good (Green). Between 200ms and 600ms Needs Improvement (Orange). Over 600ms is Poor (Red).
Does web workers help reduce TBT?
Yes, using Web Workers or tools like Partytown to run analytics scripts off the main thread can eliminate up to 90% of third-party TBT.
Audit Your Live Website
Test if your domain passes this audit with sub-2s mobile loading:
Want guaranteed 90+ score without breaking anything?
Our senior performance engineers optimize your assets, configure server-level caching, and fix total-blocking-time with a 100% money-back guarantee in 48 hours.
Fix on WhatsApp (₹8,999)