A media site serving desktop HTML to half its mobile readers

A media site serving desktop HTML to half its mobile readers

A recipe publisher rendered different HTML for mobile and desktop at the origin, then cached at the edge. But they forgot the Vary header. So whichever version cached first got served to everyone — half of London's mobile users got the desktop layout, which broke on small screens and tanked engagement.

The cache was efficient and wrong.

What we changed: rather than Vary on User-Agent (which shatters the cache into thousands of keys), we normalized devices into a single is-mobile flag at the edge and cached two clean variants per URL. Mobile and desktop now keyed separately but only twice.

Wrong-layout incidents dropped to zero. Hit ratio stayed at 95% because we had two variants, not ten thousand. Mobile bounce rate in the UK fell from 58% to 41%, and average pages-per-session rose from 1.6 to 2.3.

The number that mattered: mobile bounce 58% to 41%.