Recently, our focus has shifted towards optimizing our website for the new "Core Web Vitals". We have identified issues related to flexbox row (which have been resolved), resulting in a poor CLS score on Desktop. On Mobile, it seems that Google Web Fonts are negatively impacting the CLS score.
By adding the following code snippet, we were able to improve the CLS score to 0. When using Google Web Font, the score is 0.326 (only for mobile, desktop appears fine).
<style>
*:not(i){
font-family: sans-serif!important;
}
</style>
This is how we are currently utilizing Google Fonts.
<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Source+Sans+Pro:wght@400;900&display=swap">
Why do we have both rel="stylesheet" and rel="preload"? We discovered that rel="preload" is not fully supported on browsers like Firefox, leading to incomplete font loading. This issue was mitigated by also including rel="stylesheet".
What have we tried so far?
We experimented with different values for &display=swap such as block, fallback, optional as suggested in various sources. However, these changes did not impact the CLS score, although there seemed to be no FOUT (tested under throttled "Fast 3G").
We also attempted to self-host all fonts, but this approach did not yield positive results either.
We strongly believe that the font usage is linked to the CLS score, as applying the CSS mentioned above results in a score of 0, which is our desired outcome. However, we still require web fonts. Additionally, altering the &display=swap value triggers another "warning" in Lighthouse, advising the use of swap for better user experience, despite causing the CLS problem. Any suggestions?
Here are the results post the CSS change as indicated above.
Score: 94 (Mobile) - 93 (Desktop) = Great..!
https://i.sstatic.net/HIIFx.png
And here are the outcomes without the aforementioned CSS and Google web fonts.
Score: 69 (Mobile) - 91 (Desktop) = Room for improvement on Mobile.. Everything looks good on Desktop.