Lighthouse’s mobile score dropped for cumulative layout shift after a deploy that, as far as I could tell, hadn’t touched anything related to layout. The desktop score didn’t move at all. Same commit, same HTML, same CSS — one platform regressed and the other didn’t, which is a genuinely confusing place to start debugging from.
Ruling things out
I checked the obvious suspects first: no new images without dimensions, no late-injected ads or embeds (this site has none), no web font swap that I hadn’t already accounted for. Nothing in the diff touched layout-affecting CSS at all. The change that shipped was, as far as the diff was concerned, a copy edit to a blog post.
When the diff says nothing changed and the metric says something did, the thing that changed is usually the environment, not the code.
What was actually different
Mobile Lighthouse runs against a throttled connection, which meant the self-hosted heading font was arriving later relative to first paint than it did on desktop’s faster simulated connection. The fallback font — a generic system sans-serif — has different character metrics than Bricolage Grotesque, so headings rendered narrower in the fallback and then reflowed wider once the real font swapped in, on mobile only, because mobile’s throttling was the only condition slow enough to expose the gap.
The actual fix
font-size-adjust and manually tuned fallback metrics were both more fragile than the simplest fix: reserving layout space that doesn’t depend on which font is currently rendering.
h1, h2 {
font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
line-height: 1.2;
min-height: 1.2em;
}That alone didn’t fully close the gap — the real fix was font-display: optional on the heading face specifically, which tells the browser to skip the swap entirely if the font isn’t ready fast enough, rather than showing a fallback and reflowing later. Headings sometimes render in the fallback font on a very slow connection now. They never reflow after the fact. A silently correct layout that reads in the “wrong” font beats a briefly-fashionable layout that jumps.