<b>A mobile-unfriendly flag from content that loaded fine</b>

<b>A mobile-unfriendly flag from content that loaded fine</b>

A travel blog got hit with "Content wider than screen" and "Clickable elements too close" mobile-usability errors across 3,000 pages, and lost mobile rankings — even though the pages looked flawless on every phone we tested.

The gap was timing. The site's responsive layout, including the CSS grid and tap-target spacing, was applied by a JavaScript styling library that ran on hydration. Before hydration, the raw HTML rendered with default browser styles — a desktop-width, cramped layout. Google's mobile crawler evaluated usability on a render that, in its capture window, sometimes reflected the pre-hydration state: wide, unstyled, overlapping links.

The pages were fine for humans, who saw them post-hydration. The crawler intermittently judged the unstyled skeleton.

We moved critical responsive CSS into a real server-delivered stylesheet instead of a JS runtime, so the layout was correct from the first byte.

—Mobile-usability errors: 3,000 → 0 in 5 weeks
—Mobile organic: recovered +18% over baseline

If your layout depends on JavaScript to become responsive, the crawler might grade the version before the makeover.