Google Web Fonts negatively impacting CLS
64 skatījumi
Pāriet uz pirmo nelasīto ziņojumu
Vasco Sommer-Nunes
2022. gada 5. okt. 04:58:4705.10.22
uz web-vitals-feedback
Hello folks,
we have made the experience that using Google Web Fonts was negatively impacting our CLS score, which was somewhat unexpected.
Is this issue solved by now or are improvements on the way?
We experienced pretty much what is also depicted here:
We experienced it on our site, i.e. https://www.innsides.com/de/objects/vitra/lounge-chair/. We did not want to style the fallback fonts or use the descriptors override so we just got rid of them.
A quick update on whether the issue is (about to be) solved would be very much appreciated.
Thank you for your time and answers.
Michal Mocny
2022. gada 6. okt. 10:25:3606.10.22
uz Vasco Sommer-Nunes,web-vitals-feedback
Have you had a chance to read https://web.dev/font-best-practices/ and https://web.dev/css-size-adjust/?
The Stack Overflow post seems to be from 2020 and before those posts. There were suggestions in that SO post to replace font-display: swap with alternatives, yet the reporter didn't see CLS change... That is surprising, because some of those other options basically mean "don't use the font". If CLS really didn't move, I think it means that either the font wasn't the CLS issue, or the fix wasn't measured correctly (i.e. not waiting long enough for field data to change).
--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/a839e3e8-28fc-4a66-bbe1-eb7e67f02626n%40googlegroups.com.
Barry Pollard
2022. gada 6. okt. 11:12:0606.10.22
uz web-vitals-feedback
I just published an update to that https://web.dev/font-best-practices/ post so was waiting for that to go live before replying here. You beat me to the punch Michal! :-)
> we have made the experience that using Google Web Fonts was negatively impacting our CLS score, which was somewhat unexpected.
So this is not a Google Web Fonts-specific issue but is a general issues with web fonts, as noted in the CLS documentation (emphasis my own):
"The culprit might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself."
In fact 3 out of 4 of your fonts are not available on Google Fonts, so I presume you're talking about Web Fonts in general rather than a specific issue to do with Google Fonts?
The best practices doc above notes a number of best practices to optimise web font performance, and reduce load time and CLS. The best way, in my opinion, is to self-host and preload the critical fonts (it's what we do on web.dev that that best practices document is hosted on). It looks like you are already self-hosting the fonts so adding a preload to your <head> should be relatively simple and may solve the issue.
> We did not want to style the fallback fonts or use the descriptors override so we just got rid of them.
Those are other options, but they are a little tricky to get right at the moment, so not the easiest to implement.
These shifts are typically quite small - unless your fallback fonts are way off the actual web fonts. I only see a CLS of 0.002 - 0.007 on that example page, well below the 0.1 "good" threshold. To remove them completely, you do need to look at those other options.
There is also a visual shift when the font loads late (as it does currently) which I personally find quite annoying. To remove that you could switch from "font-display: swap" to "font-display: block" but it should be noted that both options will still count as CLS if the text is still be initially laid out using the fallback font, despite the text being invisible initially. But it will reduce the visual impact. However this can make it take longer to display the text as it wait. This can impact your LCP if your LCP element is text instead of an image. That's a trade off you need to decide on. Again, preloading the critical fonts can help reduce that impact.
Barry
Vasco Sommer-Nunes
2022. gada 7. okt. 03:21:1307.10.22
uz web-vitals-feedback
Thank you Barry and Michal for those rockstar answers!
We really appreciate it, thank you!
We'll pick up on the suggestions you've made and will also def pre-load.
Thank you again for your kind response and congratulations Michal to beating Barry to the punch although this was a really close one.
Best,
Vasco
Atbildēt visiem
Atbildēt autoram
Pārsūtīt
0 jauni ziņojumi