Webfonts en laadtijd: strakke typografie zonder vertraging

Waarom je tekst even wegblijft

De browser leest je pagina van boven naar beneden, ziet dat er een lettertype nodig is en haalt dat bestand op. Pas als het binnen is, verschijnt je tekst. Bij een font van 300 kB op een matige mobiele verbinding kost dat zo een seconde. Je homepage staat er dan wel, maar leeg.

Browsers gaan daar op twee manieren mee om. Ze houden de tekst achter tot het lettertype er is, of ze tonen hem meteen in een standaardlettertype en wisselen daarna. Dat tweede is bijna altijd beter, want je bezoeker kan direct lezen. Je regelt het met één regel in je stylesheet: font-display: swap bij elke @font-face.

Wil je nog een halve seconde winnen, geef de browser dan vooraf een hint. Met een preload-regel in de head begint het ophalen van je belangrijkste lettertype meteen, in plaats van pas nadat de stylesheet is gelezen. Doe dat voor hooguit één of twee bestanden. Laad je er meer op die manier, dan gaan ze met je afbeeldingen om voorrang concurreren en schiet je er niets mee op.

Zet je lettertypen ook op je eigen server in plaats van ze bij Google Fonts op te halen. Dat scheelt een verbinding met een extern domein, en het houdt het IP-adres van je bezoeker binnen. Een Duitse rechter oordeelde in 2022 dat een website dat adres niet zomaar aan Google mag doorgeven. Voor een kantoor dat met financiële gegevens werkt, weegt dat zwaarder dan voor de gemiddelde webshop — meer over privacy en marketing.

Twee gewichten zijn genoeg

De meeste kantoorsites laden meer lettertypen dan ze gebruiken. Een gewone versie voor lopende tekst en een vette voor koppen en knoppen: daar kom je op een advieskantoorsite prima mee weg. Meer heb je zelden nodig. Elk extra gewicht is een apart bestand van 20 tot 100 kB, ook als het maar op één knop staat.

Loop je pagina's langs en tel welke gewichten echt terugkomen in je koppen, je lopende tekst en je knoppen. Alles wat je daarna nog in de code ziet staan, kan eruit. Bij kantoorsites die we onder handen nemen, halveert dat vaak het gewicht van de lettertypen.

Een lettertype bevat standaard tekens die je nooit gebruikt: Cyrillisch, Grieks, Vietnamees. Met een subset houd je alleen de Latijnse tekens over en gooi je zo de helft van het bestand weg. De meeste fontleveranciers bieden zo'n versie kant-en-klaar aan, en een ontwikkelaar maakt hem anders in een paar minuten.

Let ook op het bestandsformaat. Woff2 is ongeveer dertig procent kleiner dan de oudere woff-variant en wordt door elke browser van de laatste jaren begrepen. Staan er nog ttf- of eot-bestanden in je stylesheet, dan sleep je ballast mee uit 2015.

Zo weet je of het werkt

Meten kan zonder betaalde tools. PageSpeed Insights van Google laat per pagina zien welke bestanden het tonen van je site ophouden. Staat je lettertype in die lijst, dan weet je genoeg. In de Netwerk-tab van je browser zie je hetzelfde: filter op font en kijk hoeveel bestanden er langskomen en hoe zwaar ze zijn.

Een praktische grens: onder de 100 kB aan lettertypen per pagina zit je goed, boven de 300 kB valt er iets te schrappen. Die laadtijd telt mee in de Core Web Vitals waarop Google je site beoordeelt — zo werkt die meting.

Doe die controle één keer per jaar, bijvoorbeeld als je toch je teksten bijwerkt. Websites verzamelen in stilte extra lettertypen: een plug-in installeert er een, een nieuwe pagina haalt een andere binnen, en na drie jaar laadt je homepage er zes. Niemand die het merkt, tot iemand met een oude telefoon op je site komt.

Belangrijker dan een score is wat je bezoeker ziet. Iemand die op zijn telefoon jouw kantoor opzoekt, wil binnen een seconde weten of hij goed zit. Staat er dan nog geen woord, dan gaat hij terug naar Google.

Bij de websites die Contaqt bouwt staan de lettertypen op de eigen server, in twee gewichten, met swap ingesteld. Je huisstijl blijft staan, de pagina laadt snel en je hoeft er zelf nooit meer naar te kijken. Bekijk wat Contaqt Site voor je kantoor doet.