search

FixMyBerlin / rsv-dossier

FixMyCity's information website about planning and building cycle highways in Germany
https://radschnellverbindungen.info/
MIT License
4 stars 0 forks source link

Improve font loading speed #46

Closed ohrie closed 2 years ago

ohrie commented 2 years ago

The Problem

The Lighthouse score (FCP) is bad , also because the font is big (300kb), as well as, there is a loading chain ("Verkettung kritischer Anfragen vermeiden ").

Proposed Solution

Use Overpass font from @fontsource: https://fontsource.org/fonts/overpass

Or otherwise use a technique, so TTF request is not triggered via CSS, but in the main document.

See also https://www.digitalocean.com/community/tutorials/gatsbyjs-custom-fonts-in-gatsby

ohrie commented 2 years ago

See also guide from Gatsby for fontsource: https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/#self-host-google-fonts-with-fontsource

tordans commented 2 years ago

JFYI, ich nutze das in https://github.com/FixMyBerlin/fixmy.safetycheck/blob/develop/gatsby-browser.js#L1-L14; klappt gut. Habe aber Lighthouse score dafür noch nicht geprüft.

ohrie commented 2 years ago

Thanks @tordans ! Fixed in c4e51433c29b703d4bb546f72e0b634a15e5c116