Chrome's field data places this page's Cumulative Layout Shift between 0.1 and 0.25 at the 75th percentile. The page does not pass the Core Web Vitals assessment until CLS is 0.1 or less. Shifts of this size usually come from one element: a web font swapping in with different metrics, a cookie banner, or a late-loading embed.
A fallback font with different metrics from the web font makes every line of text reflow when the web font arrives:
@font-face { font-family: Brand; src: url(/brand.woff2); font-display: swap; }
body { font-family: Brand, sans-serif; }Match the fallback font's metrics to the web font so the swap does not move text, and preload the font the first screen uses:
<link rel="preload" as="font" type="font/woff2" href="/brand.woff2" crossorigin>
@font-face {
font-family: Brand-fallback;
src: local("Arial");
size-adjust: 104%;
ascent-override: 92%;
}
body { font-family: Brand, Brand-fallback, sans-serif; }When the fallback occupies the same space as the final font, the swap changes how text looks but not where it sits, so nothing on the page moves and no shift is recorded.
This issue can affect your site's search engine rankings and user experience. Addressing it promptly helps ensure optimal performance and visibility in search results.
bseoa automatically checks for this warning during site analysis, along with hundreds of other technical SEO issues.
Choose the license that fits your needs and start getting the deep, actionable insights you deserve.