Fonts performances and impact on SEO (CLS)

[Vadorequest]

History

Pre-2020

Not particular optimization were done on fonts, loading fonts was blocking, and no text was displayed until the font was fully loaded by the browser. This was really bad for both UX and SEO.

2020

About one year ago (around April 2020), we changed how fonts were loaded by introducing WebFontLoader and swapping the font once loaded. Unfortunately, this generated a FOUT effect. And there was no browser caching strategy in place, so the font was reloaded for every user for every page refresh. 🤦

2021

In 2021, there were a few tutorials about how to better handle fonts on Next.js.
With Next.js 10.2 was introduced Automatic Webfont Optimization which improves fonts loaded through Google Fonts by default, and made using fonts loaded through Google Fonts much more performant.

Finally, in May 2021, we took the time to rework our font system completely. FOUT is no more, fonts are self-hosted manually, Google Fonts is only used when configuring a new font, because it helps make the process smoother. But, we don't use Google Fonts at all (although it's still possible). On fast connections, the font is loaded immediately thanks to self-hosting. On slow connection it will load the font, but if it's not fetched within 100ms then it won't use it until the next refresh.

Initial page load (without browser cache, status 200): 65ms

Subsequent page load (with browser cache, status 304): 34ms

Those tests were made on staging environment, which is less optimized than production.

A lot of this work is done on #315 and if you can read the doc want to dig in.

Results
Tests from production systems have shown a decrease of CLS from ~0.2 to 0.

Also, the NeuzeitGrotesk font has been replaced by Manrope or Inter. NRN comes now built-in with 2 open source fonts, which support Variable Font.

Using Variable fonts decreased the number of files downloaded from 4 to 1.
Also, using font subset decreased the size of the font loaded (23kB).

Browser caching has been configured too, so the font will now be loaded only once.

Future

Using a font that doesn't get used if it's too slow to load is a good trick against the upcoming change of Google SEO ranking algorithm. (avoids bad CLS)

But, it's not necessarily the best for the user, because they won't use the font until they reload the page. (unless they've a really good connection)

For such cases, we can only count on using swap once "Font Metrics Override" will be widely adopted.

Until there, using swap might hurt your CLS (and SEO score), unless you use a fallback font which have the same dimension as the main font, but that seems very hard to do, and will only mitigate the CLS score decrease, it won't nullify it.