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:
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
- Broncode voor Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van webfonts
- Vermijd onzichtbare tekst tijdens het laden
- Controle van de lettertypeprestaties met lettertypeweergaven
- Weblettertypen vooraf laden om de laadsnelheid te verbeteren (codelab)
- Voorkom lay-outverschuivingen en flitsen van onzichtbare tekst (FOIT) door optionele lettertypen vooraf te laden