Full-page hydration was blocking their own buttons
A content site server-rendered everything, then hydrated the whole page as one React tree. Indexing was fine. But INP was 'Poor', engagement cratered, and organic slid -14% as Core Web Vitals weight bit.
The investigation profiled the main thread. After HTML painted, a 600ms hydration task locked everything — taps on the menu did nothing until the entire app booted. The content was visible but dead. Google's INP field data caught what the lab missed: real users tapping a frozen page.
Turns out full-page hydration treats a mostly-static article like a fully-interactive app, paying interactivity cost on components that never needed it. The alternative — islands architecture — hydrates only the interactive bits and leaves static content as plain HTML.
They moved to an islands approach (Astro), hydrating only the search box and share widget.
Main-thread hydration: 600ms → 90ms. INP field 75th percentile: 410ms → 160ms, flipping CWV to 'Good'; organic recovered +12% in nine weeks. Don't hydrate a newspaper like it's a spreadsheet. Hydrate the islands, ship the rest as HTML.
Hydrate Diaries
@HydrateDiaries
Full-page hydration was blocking their own buttons
Этот пост опубликован в Telegram-канале Hydrate Diaries. Подписаться можно по ссылке: @HydrateDiaries.