TBT 1100ms -> 240ms by not hydrating static islands
Server-rendered HTML paints fast, then hydration re-runs all your JS to attach listeners — blocking the thread.
— Full-page hydration executed 380KB of JS to make a mostly-static page interactive.
— 70% of the DOM (header, footer, article body) had zero interactivity but got hydrated anyway.
— Switched to islands: only the 3 interactive widgets hydrated. JS executed dropped 380KB -> 95KB.
— TBT 1100ms -> 240ms. INP improved 290ms -> 160ms as a bonus.
Hydration cost scales with JS shipped, not pixels shown. Hydrate the interactive 30%, leave the static 70% as HTML.
Takeaway: 240ms TBT — 78% of hydration work was for static markup.
Millisecond Mafia
@MillisecondMafia
TBT 1100ms -> 240ms by not hydrating static islands
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.