Snel lettertypen laden

Leestijd: 4 minuten

Bron

Snel lettertypen laden

Bij Buffer experimenteren we voortdurend met manieren waarop we onze producten kunnen verbeteren en nieuwe ideeën kunnen uitproberen. We hebben onlangs Start Page gelanceerd, een mooie, flexibele, mobielvriendelijke bestemmingspagina die u in enkele minuten kunt bouwen en in seconden kunt bijwerken. Als Software Engineer in het Buffer-team heb ik een lange lijst met leuke projecten aangepakt, waaronder Start Page. Een ding dat ik leuk vind aan dit project, is dat terwijl we steeds dieper ingaan op door gebruikers gegenereerde inhoud en maatwerk, we nieuwe technische uitdagingen ontdekken die we nog niet eerder in onze frontends hebben gehad. In dit geval wilden we 13 nieuwe lettertype-opties introduceren (voor in totaal 16 lettertypen) en we wilden ervoor zorgen dat ze lekker snel laadden. Terwijl ik hieraan werkte, leerde ik zoveel dat ik niet wist over lettertypen, dus in dit bericht wil ik meer delen over hoe we dit hebben aangepakt voor iedereen die met soortgelijke uitdagingen wordt geconfronteerd.

Een schermafbeelding van de Startpagina-app, die de nieuwe functionaliteit van de lettertypekiezer demonstreert Lettertypen blokkeren het renderen

Laten we beginnen met het ‘waarom’. Lettertypen zijn over het algemeen vrij lichte bronnen, die meestal in de browser worden opgeslagen, dus waarom is het belangrijk om te zorgen voor een strategie voor snel laden? Omdat lettertypen synchrone verzoeken met hoge prioriteit zijn, wat betekent dat ze renderblokkeren. Als we lettertypen snel en/of asynchroon kunnen laden, kunnen we de sitesnelheid verbeteren.

FOUT en FOIT

Oké, dus je wilt je weergave niet blokkeren, er zijn over het algemeen twee strategieën om uit te kiezen om tekst te verwerken die is geladen voordat het een aangepast lettertype is:

FOUT – Flits van ongestileerde tekst
Rendert de tekst maar met een fallback-lettertype. Google Fonts kan nu terugkeren met display=swap, wat de browser instrueert om het fallback-lettertype te gebruiken om de tekst weer te geven totdat het aangepaste lettertype volledig is gedownload. Als je nauwkeurig wilt zijn, kun je een beter fallback-lettertype vinden met deze app: Font Style Matcher

FOIT – Flits van onzichtbare tekst
Hier wordt de tekst weergegeven met een onzichtbaar lettertype totdat het aangepaste lettertype volledig is gedownload. Deze is logischer om te gebruiken voor zoiets als een logo waarbij het merk zou worden beïnvloed als het wordt weergegeven met een fallback-lettertype (hoewel ik voor een logo een SVG zou gebruiken, maar voorbeelden!)

DE truc voor snelle lettertypen

Het algemene advies is tegenwoordig om vooraf verbinding te maken met de fontserver:

<link href="https://fonts.gstatic.com/" crossorigin />
<link href="https://fonts.googleapis.com" />

laad vervolgens de lettertypen vooraf:

 <link as="stijl" href="https://fonts.googleapis.com/css2?family={uw lettertypefamilies hier}&display=swap" />

Vraag ten slotte als fallback de lettertypen async aan door media in te stellen op “afdrukken” voor browsers die rel=”preload” niet ondersteunen (ongeveer 12% van de browsers in dit jaar 2021)

<link href="https://fonts.googleapis.com/css2?family={uw lettertypefamilies hier}&display=swap" media = "afdrukken" onload="this.media='all'" />

Dit werkt omdat een normaal stylesheet render-blokkerend is, maar een printstylesheet heeft prioriteit bij inactiviteit. Nadat het is geladen, worden de media van de link op iedereen toegepast.

Het hosten van uw eigen lettertypen is het snelst, maar Google Fonts doet veel voor u:

  • Geeft meerdere alfabetten terug
  • Retourneert een css-bestand dat is aangepast aan de user-agent die erom heeft gevraagd
  • Als je meerdere lettertypen hebt, kun je het beste 1 verzoek indienen, zodat het sneller gaat
  • U kunt uw verzoeken aanpassen aan specifieke lettergewichten en formaten (vet, cursief, dun)

API voor het laden van lettertypen

Er is een nieuwe CSS Font Loading API die lettertypen op aanvraag kan aanvragen, maar ik ontdekte dat dit niet goed werkt met Google Fonts omdat je de bron-URL voor de lettertypen nodig hebt en de Google Fonts-URL die je krijgt niet de bron is , het is het verzoek. Google heeft, samen met Typekit, wel een bibliotheek genaamd Web Font Loader , die werkt als de Font Loading API, maar beter speelt met Google Fonts.

Dus wat hebben we gedaan in Start Page?

We hebben de populaire strategie voor de bouwer (de app zelf) geïmplementeerd en hoewel we wat FOUT hebben bij de eerste keer laden (denk aan browsercaching!) Is het zeer minimaal, als het al wordt gezien. Voor gegenereerde pagina’s krijgen we de lettertypen die in het thema worden gebruikt voordat we de HTML genereren, zodat we alleen de lettertypen kunnen injecteren die we nodig hebben. Dit maakt onze gegenereerde pagina’s veel sneller en lichter. We zijn verheugd om te zien hoe dit experiment zal uitpakken en of mensen graag meer lettertype-opties willen krijgen. Als dat het geval is, kunnen we heel goed kijken naar een meer dynamische strategie (zoals het laden van alleen de momenteel gebruikte lettertypen tijdens het laden en vervolgens een ander verzoek sturen als een gebruiker op Uiterlijk klikt om zijn lettertype te wijzigen). Een andere optie die we zouden kunnen onderzoeken, is het implementeren van een manier om meerdere lettertypen aan te vragen als we ze zelf hosten.

Dat is het voor nu! Bedankt dat je zo ver bent gekomen, ik hoop dat dit interessant voor je was! Weet je iets leuks over lettertypen die ik hier niet heb genoemd? Deel het met ons op Twitter.

Bronnen:
De snelste Google-lettertypen
Begin 2021 zo snel mogelijk Google Fonts en andere weblettertypen laden
FOIT vs FOUT: een vergelijking over het laden van weblettertypen
CSS-trucs – font-display

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.