Preload webfonts

[masakudamatsu]

To avoid the layout shift due to FOIT / FOUT, Google recommends:

• Using on the key web fonts: a preloaded font will have a higher chance to meet the first paint, in which case there's no layout shifting.
• Combining and font-display: optional

See https://web.dev/preload-optional-fonts/ for detail.

[masakudamatsu]

On the landing page, Fedra Sans Alt Light and Demi are used.

By browsing the CSS files for rendering Fedra Sans, we can obtain the URL of these two fonts in WOFF2 and WOFF.

Then we can insert the following preload command

<link ref="preload" href="..." as="font" type="font/woff2" crossorigin />

LightHouse audit shows that First Contenful Paint improves while Largest Contentful Paint worsens, presumably because the loading of the logo image slows down due to the early loading of web fonts. Using Chrome DevTools's simulation of low-end mobile devices, the text is now shown earlier than the logo image (while previously they appear at the same time).

Not really sure if it's worthwhile at this moment. We leave the #250-preload-webfonts branch unmerged (see PR #257 ).

Compare the performance again once we convert the logo image into SVG (#255 ).

[masakudamatsu]

Possibly preconnect is a better solution. See #261

[masakudamatsu]

Preconnecting the Typoteque font server and preloading font stylesheets (not font files per se) improves performance as follows:

• Speed index (4.0s from 6.3s)
• Largest Contentful Paint (3.3s from 4.6s)
• Overall score (71 from 58)

The First Contentful Paint remains the same (3.3s), but this is likely due to the use of client-side rendering with Create React App.