Improving CLS with fallback fonts

We were able to improve Duda’s sites CLS scores by 30% using fallback fonts. Here’s how …

Cumulative Layout Shift (CLS) is one of Core Web Vitals metrics that, in simple terms, measures unexpected movement of elements on a web page. For example, when you’re reading an article and suddenly an ad loads, pushing the content down, that’s a layout shift.

There are many recommended strategies for optimizing CLS, such as specifying media dimensions, prioritizing server-side rendering, and inlining critical CSS. In this post, I will elaborate on our successful approach to improving CLS by leveraging fallback fonts with metrics overrides.

Why are fonts important?

In many webpages, the most important piece of content (LCP element) we want folks to see earliest is text, and it’s our job to ensure we show it as quickly as we can, but there’s a challenge: most sites use web fonts that the browser need to download. So, what can we do for our users while they wait for the fonts to arrive fashionably late?

Thanks to `font-display: swap` CSS property, we’re able to instruct the browser to display a fallback font (system font) while the fancy one is being downloaded and swap the two once the font is ready. This technique (also known as font swapping) is considered a best practice since users don’t need to wait before being able to see content.

The CLS problem

Font swapping is actually a great way to improve LCP scores of text elements as it ensures texts appear as soon as possible, however, this solution may introduce a CLS problem since fonts differ quite significantly from one another, resulting in text elements changing their size and position when their font changes, shifting surrounding elements around.

In the image above we can see Pacifico font rendered on top of Times New Roman, even though they have the exact same font-size. It’s easy to spot the Pacifico font, marked in blue, is narrower and higher than Times New Roman, marked in red.

CLS during font swap

Font metrics and overrides

To better understand why the above happens, we first need the better understand the font metrics system. Font metrics are like a set of measurements for fonts. For example, the width metric is how much space a letter takes horizontally, height is the vertical space, ascent is how high letters go above the line and descent is the space below the line. These and other measurements help make sure letters fit and line up correctly when you’re reading text.

Thankfully, using the font-face CSS rule, we’re able to declare custom fonts and set font metrics overrides. These overrides allows designers and developers to fine-tune the appearance of text by adjusting the font’s ascent, descent, and line-gap and size metrics.

@font-face { 
  font-family: pacifico-fallback; 
  src: local("Times New Roman"); 
  size-adjust: 99.19745862%; 
  ascent-override: 131.3541716%; 
  descent-override: 45.6664925%; 
  line-gap-override: 0%; 
}

In the snippet above, there’s an adjusted Times New Roman font that now matches the Pacifico dimensions. This results in something like this:

Now, using font fallbacks we can simply instruct the browser to load our perfectly adjusted font while Pacifico is loading:

p.main {
    font-weight: normal;
    font-size: 14px;
    font-family: Pacifico, 'pacifico-fallback';
}

This CSS basically tells the browser to use Pacifico, but if it isn’t available, use the next font on the list instead.

And this is how it actually affects CLS in real web pages:

Automation and scale

Ok cool, we now know how to take a single site using a single particular font and a adjust it perfectly. But how do we automate this process for over 1 million sites hosted on Duda?

Fortunately, for the majority of fonts, including popular ones like Google’s webfonts, font metrics are well-documented and accessible in repositories such as: https://github.com/khempenius/font-fallbacks-dataset

With the help of tools like Capszie built on top of such datasets, developers can effortlessly extract precise mappings from one font to another.

So what we’ve done at Duda was to generate a mapping of all fonts supported by the Duda editor to a perfectly adjusted Arial font, a system font supported by all operating systems.

Once we have these mappings available, we identify for each site which fonts it uses and simply append their fallback font-face definitions to the sites’ <head> section.

The final touch involved an automatic scan and modification of CSS rules and style attributes, and adding our generated fallback font to existing font-family properties.

And that’s it! This sweet improvement has recently been rolled out to all Duda sites without any manual intervention or designer involvement.

Initial results

At Duda we have been investing heavily in web performance and CWV for a long time and already achieve great results with over 75% of Duda sites pass all 3 web vitals metrics.

Duda is a CWV industry leader

After many rounds of optimizations, identifying opportunities for across-the-board improvements has become quite challenging. This is why we are particularly excited to witness the significant impact this approach has shown, resulting in an improvement of approximately 30% in average scores.

Duda’s avg CLS scores

It’s worth noting that the effectiveness of this enhancement may be more marginal for websites facing more severe CLS issues, such as disruptive ads or images not taking designated space before loading. So this optimization technique is better suited for sites that have already undergone multiple optimization phases and can be considered a more advanced strategy in the optimization process.