Het gebruik van lettertypen komt veel voor op de meeste webpagina's en bevat vaak fouten. Veel van deze fouten hebben een negatieve invloed op het webprestatiebudget. Dit artikel is bedoeld om informatie te geven over het gebruik van weblettertypen en om uw webprestaties te helpen verbeteren.
Zoals blijkt uit de hiërarchie die wordt toegepast bij het renderen van een webpagina, kunnen lettertype-elementen de weergave van andere elementen vertragen totdat ze zijn geladen. Het goed beheren van deze vertraging is belangrijk voor zowel de Cumulatieve Layout Shift (CLS) als de perceptie van de gebruiker.
Het probleem met het laden van lettertypen
Totdat de lettertypen van de pagina zijn geladen, varieert de zichtbaarheid van lettertypen tijdens het HTML- en CSS-weergaveproces van browser tot browser. Hier is een samenvatting van hoe verschillende browsers met deze situatie omgaan:
| browser | Standaardgedrag als het lettertype niet gereed is… |
|---|---|
| rand | Gebruikt een systeemlettertype totdat het lettertype gereed is. Wisselt het lettertype uit. |
| Chrome | Verbergt tekst gedurende maximaal 3 seconden. Als de tekst nog steeds niet gereed is, wordt een systeemlettertype gebruikt totdat het lettertype gereed is. Wisselt het lettertype uit. |
| Firefox | Verbergt tekst gedurende maximaal 3 seconden. Als de tekst nog steeds niet gereed is, wordt een systeemlettertype gebruikt totdat het lettertype gereed is. Wisselt het lettertype uit. |
| Safari | Verbergt tekst totdat het lettertype gereed is. |
Om dit probleem aan te pakken zonder te vertrouwen op browsergedrag, werd de parameter font-display geïntroduceerd. Momenteel ondersteunt 92% van de browsers de parameter font-display.
Wat doet lettertypeweergave?
Tijdens het laden van de pagina kan de weergave van lettertypen variëren totdat ze volledig zijn geladen, afhankelijk van de browser. Sommige versies van de Safari-browser verbergen bijvoorbeeld de tekst totdat het lettertype is geladen. De lettertypeweergave: swap De CSS-parameter standaardiseert dit gedrag door de tekst weer te geven met een systeemlettertype totdat de lettertypebestanden zijn geladen. Zodra de lettertypen zijn geladen, wordt het systeemlettertype vervangen door het beoogde lettertype. Hier is een voorbeeldgebruik:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Lettertypen vooraf laden
Gebruik makend van het laden van lettertypen vóór het kritieke renderpad kan gaten tijdens het laden van lettertypen voorkomen.
BONUS: Industriële benadering van lettertypegebruik
Laten we, volgens de gegevens van CompareTech, eens kijken naar een belangrijke trend en momentopname van de internetwereld. De eerste grafiek hieronder toont het lettertypegebruik op de top 10,000 pagina's, en de tweede grafiek toont het lettertypegebruik op de top 100,000 sites. Laten we eerst deze grafieken bekijken:
Er is een verschil van 5% in het gebruik van Google Font en Font Awesome tussen de top 10,000 sites en de top 100,000 sites. Dit vertelt ons dat de top 10,000 sites hun lettertypegebruik hebben geoptimaliseerd. Wij raden aan dit als een opmerkelijk onderwerp te onderzoeken. Bedenk hoe u weblettertypen kunt implementeren met uw eigen oplossingen.
BONUS 2: Gebruiksstatistieken van Google Font en Font Awesome
Verwijzend naar de eerste bonus, stellen we voor om de twee grafieken te onderzoeken die de numerieke omvang van de meest gebruikte lettertypebibliotheken tonen. Het aantal unieke domeinen overschrijdt hier miljoenen, en deze miljoenen vertegenwoordigen uw SEO-concurrenten. Als u deze bibliotheken beter en optimaal gebruikt dan andere, kunt u zich onderscheiden.
Door deze tips te volgen en uw lettertypegebruik te optimaliseren, kunt u uw webprestaties en gebruikerservaring aanzienlijk verbeteren.
