Break long tasks to fix TBT and INP
A long task (any main-thread block over 50ms) freezes input and inflates TBT (Total Blocking Time = ms over 50 summed). Slice them.
— Step 1: Performance panel flags long tasks with a red corner. Note duration + call stack.
— Step 2: Hydration/parsing chunks over 200ms are usual suspects.
— Step 3: Yield to the main thread: await scheduler.yield() (or setTimeout 0) between work units.
— Step 4: Move pure compute to a Web Worker — keeps the thread free for paint.
— Step 5: Re-measure TBT and INP processing time.
Example: a 380ms hydration task split into 5 chunks; TBT 540ms -> 160ms, INP 290ms -> 150ms.
Takeaway: no task should exceed 50ms — anything above it directly costs TBT.
Millisecond Mafia
@MillisecondMafia
Break long tasks to fix TBT and INP
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.