32,000 DOM nodes turned every keystroke into a 180ms style recalc
DOM size is a hidden INP tax: large trees make style/layout recalculation expensive per interaction.
— A filterable table rendered all 32k rows into the DOM. Each input event triggered a full style recalc: 180ms.
— Lighthouse flagged 'Avoid an excessive DOM size' — most ignore it, but it directly inflates INP.
— Virtualized the list (render only ~40 visible rows): DOM nodes 32k -> 1,400.
— Style recalc per keystroke: 180ms -> 14ms. INP 260ms -> 90ms.
Every interaction re-evaluates style against the whole tree. Fewer nodes = cheaper recalc = lower INP.
Takeaway: 90ms INP after cutting the DOM 95%.
Millisecond Mafia
@MillisecondMafia
32,000 DOM nodes turned every keystroke into a 180ms style recalc
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.