Er is een categorie vertraging die niemand zoekt omdat niemand hem verwacht: uw lettertypen. Webfonts snelheid kosten is een van de minder bekende oorzaken van een trage eerste indruk, en het is bovendien de reden dat tekst op sommige sites eerst in een ander lettertype verschijnt en dan verspringt. Dat gehak in de opbouw is precies wat Google meet als bewegende inhoud.

In dit stuk leest u wat een lettertype kost, hoeveel varianten u werkelijk nodig heeft, en hoe u het opruimt zonder dat uw huisstijl eronder lijdt.

Webfonts, snelheid en wat één variant weegt

Eén variant van een modern lettertype in het compacte woff2-formaat is ruwweg twintig tot veertig kilobyte. Dat klinkt onschuldig. Het probleem is dat een variant staat voor één combinatie van dikte en stijl. Regular, cursief, halfvet, vet en de cursieve versies daarvan: dan zit u al op zes bestanden.

Twee lettertypefamilies met elk zes varianten is dus twaalf bestanden en al gauw driehonderd kilobyte, en dat is nog los van de vertraging door het opzetten van een verbinding met de dienst die ze levert. Op de meeste sites die wij nakijken worden er vier tot zes varianten geladen die nergens op de pagina voorkomen.

Daar komt bij dat lettertypen laat in de rij staan. De browser ontdekt pas dat hij ze nodig heeft nadat hij het stylesheet heeft gelezen. Zo ontstaat een keten: HTML, dan CSS, dan pas het lettertype, en tot die tijd is er geen leesbare tekst. Hoe u die keten kunt inkorten leest u in de toelichting op verbindingshints voor de browser.

De twee vormen van flikkerende tekst

Zolang het lettertype nog niet binnen is, moet de browser iets doen. Er zijn twee gedragingen, en allebei hebben ze een nadeel.

Onzichtbare tekst. De browser laat de plek leeg tot het lettertype er is. De bezoeker ziet een pagina met beeld en knoppen, maar zonder woorden. Duurt dat langer dan een seconde, dan lijkt de site kapot.

Verspringende tekst. De browser toont de tekst eerst in een standaardlettertype en wisselt daarna om. Dat leest sneller, maar de tekst verschuift, waardoor iemand net op het verkeerde moment op de verkeerde knop klikt.

De praktische keuze is bijna altijd de tweede, met een terugvallettertype dat qua breedte en hoogte dicht bij het echte zit. Zo blijft de verschuiving beperkt tot een paar pixels. In CSS regelt u dat met de eigenschap font-display op swap, plus een doordachte terugvalrij. Verspringende blokken zijn overigens ook om andere redenen schadelijk; dat hangt samen met wat Google meet in de uitleg over de Core Web Vitals.

Hoeveel varianten heeft u echt nodig?

Voor de meeste zakelijke sites volstaat dit:

  • Eén familie voor alles, met drie gewichten: normaal voor lopende tekst, halfvet of vet voor koppen, en cursief als u dat in teksten gebruikt.
  • Twee families alleen als uw huisstijl daar echt op staat, bijvoorbeeld een schreefletter voor koppen en een schreefloze voor tekst. Beperk de tweede dan tot één gewicht.
  • Geen aparte lichte varianten. Tekst van 300 gewicht op wit is bovendien slecht leesbaar voor een deel van uw bezoekers, dus u wint twee keer door hem te schrappen.

Een variabel lettertype is het overwegen waard als u meerdere diktes gebruikt: daarin zit het hele bereik van dun tot vet in één bestand van vaak zeventig tot honderd kilobyte. Bij drie of meer gewichten is dat voordeliger dan losse bestanden; bij twee gewichten niet.

Opruimen in vijf stappen

  1. Kijk wat er geladen wordt. Open uw pagina, ga in de ontwikkelaarshulpmiddelen naar het netwerktabblad en filter op lettertypen. U ziet elk bestand met zijn grootte.
  2. Vergelijk dat met wat u ziet. Loop uw belangrijkste pagina’s langs en noteer welke diktes daadwerkelijk voorkomen. Dat zijn er meestal minder dan er geladen worden.
  3. Zoek uit wie ze inlaadt. Vaak uw thema, maar paginabouwers, formulierplugins en sliders nemen graag hun eigen set mee. Twee plugins die dezelfde familie los inladen, komt vaker voor dan u denkt.
  4. Zet ze lokaal neer. Lettertypen vanaf uw eigen server serveren scheelt een verbinding met een externe partij en is bovendien AVG-technisch een stuk eenvoudiger uit te leggen, omdat er dan geen IP-adressen van bezoekers naar een derde gaan. Wij zijn geen juristen, maar dit is de reden dat veel Nederlandse organisaties hiervoor kiezen.
  5. Beperk de tekens. Heeft u een lettertype met ondersteuning voor Grieks en Cyrillisch terwijl u een Nederlandse site heeft, dan laadt u onzin mee. De meeste aanbieders leveren een westerse variant die aanzienlijk lichter is.

Wanneer u helemaal geen webfont nodig heeft

Er is een optie die vaak wordt vergeten: de lettertypen die al op het apparaat van de bezoeker staan. Een goede systeemletterrij laadt in nul milliseconden, verspringt nooit en ziet er op elk apparaat verzorgd uit. Voor een blog, een handleidingensite of een interne portaal is dat een prima keuze.

Voor een merk met een uitgesproken huisstijl is dat geen optie, en dan is het gewoon een investering die u bewust doet. Het punt is dat het een keuze hoort te zijn, en niet iets wat uw thema toevallig voor u heeft ingevuld met zes varianten.

Wij komen dit bij WebMaintor tegen als restpost: een site die ooit met een ander thema begon en de oude lettertypen nog steeds meelaadt. Zulke restanten weghalen hoort bij het opschonen van alles wat een pagina onnodig opvraagt en kost meestal een halfuur.

Concrete volgende stap: filter in het netwerktabblad van uw browser op lettertypen en tel hoeveel bestanden er binnenkomen. Zijn dat er meer dan vier, dan valt er zeker iets te schrappen.