I ran into a really confusing Core Web Vitals issue recently.
In Chrome DevTools, my site’s CLS looked completely fine. Lighthouse scores were solid, layout shifts were minimal, and everything appeared stable during testing.
But real user monitoring data told a completely different story.
Field CLS was awful.
After digging deeper, I realized the problem wasn’t the layout itself — it was font loading behavior on slower connections.
I had been testing:
on a fast connection
with cached fonts
on a powerful desktop
Meanwhile, actual users on slower mobile networks were experiencing FOIT (Flash of Invisible Text), which caused noticeable layout shifts once the web font finally loaded.
The fix ended up being surprisingly simple:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap;
}
body {
font-family: 'Inter', 'Arial', sans-serif;
}
I also preloaded the font in the document head:
rel="preload"
href="/fonts/Inter.woff2"
as="font"
type="font/woff2"
crossorigin>
A couple other things that helped:
using a fallback font with similar metrics
reducing font weight variations
avoiding unnecessary font files
testing under throttled mobile conditions
After deploying the changes:
field CLS dropped from ~0.25 to ~0.03
mobile UX stabilized noticeably
page rendering felt much smoother on slower devices
The biggest lesson for me was this:
Synthetic tests alone can be misleading.
Lab data is useful, but real user monitoring is where performance issues actually reveal themselves — especially for things like font rendering, caching behavior, and mobile network variability.
One tool that helped surface the discrepancy quickly was:
https://serpspur.com
Curious what font-loading or CLS optimization strategies have worked best for others here.
Top comments (0)