Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van het weblettertype

Lettertypen zijn vaak grote bestanden met trage laadtijden. Sommige browsers verbergen tekst totdat het lettertype is geladen, waardoor een flits van onzichtbare tekst (FOIT) ontstaat.

Hoe de Lighthouse-lettertypeweergave-audit mislukt

Lighthouse markeert alle lettertype-URL's die onzichtbare tekst kunnen weergeven:

Een screenshot van de Lighthouse Zorg ervoor dat tekst zichtbaar blijft tijdens de audit van het laden van webfonts

Hoe u kunt voorkomen dat onzichtbare tekst wordt weergegeven

De font-display API geeft aan hoe een lettertype wordt weergegeven wanneer het binnen een font-face wordt gebruikt. De volgende font-display vertellen de browser dat hij een systeemlettertype moet gebruiken als het aangepaste lettertype nog niet gereed is:

  • swap
  • optional
  • fallback

CSS-voorbeeld 

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Voorbeeld van Google-lettertypen

Voeg de parameter &display=swap / &display=optional / &display=fallback aan het einde van uw Google Fonts-URL: 

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Hoe u lay-outverschuivingen als gevolg van uitgestelde lettertypen kunt voorkomen

Als u tijdelijk een systeemlettertype weergeeft, wordt een FOIT vervangen door een flits van ongestylede tekst (FOUT). Dit verbetert FCP&LCP doordat inhoud eerder wordt weergegeven, maar FOIT en FOUT zullen beide dezelfde impact hebben op CLS wanneer het aangepaste lettertype het tijdelijke systeemlettertype vervangt.

De CLS-impact van het laden van lettertypen kan worden beperkt door vooraf te laden in combinatie met font-display: optional . Overmatig gebruik van voorbelastingen kan echter een negatieve invloed hebben op de belastingstatistieken. We raden u aan A/B-tests uit te voeren om ervoor te zorgen dat het vooraf laden van lettertypen geen prestatieverlies met zich meebrengt.

Stapelspecifieke begeleiding

Drupal

Geef @font-display wanneer u aangepaste lettertypen in uw thema definieert.

Magento

Geef @font-display op bij het definiëren van aangepaste lettertypen .

Bronnen