Vraag nú je snelheidsoptimalisatie aan voor de zomer!
Vraag nú je snelheidsoptimalisatie aan voor de zomer!
Je hebt de perfecte fontcombinatie gevonden. Een strakke sans-serif voor de koppen, iets warmers voor de lopende tekst. Vier gewichten, want je wil kunnen variëren. In Elementor stel je ze in, je bekijkt de website, en het ziet er precies uit zoals je voor ogen had.
En je hebt net vier bestanden aan je laadtijd toegevoegd die de browser moet ophalen voordat er ook maar één letter op het scherm verschijnt.
Webfonts zijn een blinde vlek in WordPress-snelheid. Designers kiezen ze, developers krijgen de trage website. En omdat een font geen afbeelding is, komt hij zelden voor in een snelheidsanalyse waar mensen naar kijken. In dit artikel lees je hoe lettertypes je laadtijd beïnvloeden, wat FOUT en FOIT betekenen, en waarom Google Fonts lokaal hosten sinds de AVG niet alleen sneller maar ook verstandiger is.
Een webfont is een bestand. Net als een afbeelding, alleen kleiner: meestal tussen de 20 en 80 kB per gewicht in WOFF2-formaat.
Klinkt onschuldig. Maar het gaat niet om de grootte, het gaat om het moment.
Fonts worden pas opgehaald nadat de browser de CSS heeft verwerkt en weet welke lettertypes hij nodig heeft. Dat betekent: HTML downloaden, CSS downloaden, CSS verwerken, dán pas fonts ophalen. Vier stappen diep in het laadproces, terwijl de bezoeker al zit te wachten.
En zolang dat font niet binnen is, weet de browser niet hoe hij de tekst moet tekenen. Dus doet hij niks. Of hij doet iets wat er raar uitziet.
Twee afkortingen die je moet kennen, want ze beschrijven precies wat je bezoeker ziet.
FOIT staat voor Flash of Invisible Text. De browser wacht op het font en toont ondertussen niets. Je pagina laadt, de afbeeldingen verschijnen, de knoppen staan er, maar de tekst is onzichtbaar. Bezoekers zien een half-lege pagina en denken dat er iets kapot is.
FOUT staat voor Flash of Unstyled Text. De browser toont de tekst direct in een systeemfont, en wisselt naar jouw font zodra het binnen is. Je ziet dus even Arial, dan springt alles naar je eigen lettertype.
FOUT is lelijker maar beter. Je bezoeker kan direct lezen, en dat is waar het om gaat. Bovendien telt FOIT mee als slechte LCP-score, want het grootste tekstblok is dan nog niet zichtbaar.
Dat gespring van FOUT kun je beperken door een systeemfont te kiezen dat qua breedte lijkt op je echte font. Dan is de verschuiving kleiner en blijft je CLS netjes.
Eén CSS-regel bepaalt of je FOIT of FOUT krijgt: font-display.
De waarde die je wil is swap. Dat betekent: toon de tekst direct in een fallback-font, wissel zodra het echte font er is. Bezoekers kunnen meteen lezen.
De meeste fontplugins en pagebuilders hebben hier een instelling voor. In Elementor staat het onder Site Settings bij de typografie-instellingen. In WP Rocket zit er ook een optie voor onder Bestandsoptimalisatie. En als je fonts handmatig laadt via je child theme, voeg je font-display: swap; toe aan je @font-face-regel.
Dit is een van de weinige optimalisaties die vrijwel nooit iets breekt. Aanzetten en klaar.
Hier komt een stuk dat verder gaat dan snelheid.
Als je Google Fonts inlaadt via de standaardmanier, haalt de browser van je bezoeker het lettertype op bij een server van Google. Daarbij wordt het IP-adres van die bezoeker doorgegeven. Een Duitse rechtbank oordeelde in 2022 dat dat een AVG-overtreding is zonder toestemming, en sindsdien is het in heel Europa een risico.
Voor jouw klanten betekent dat: webfonts lokaal hosten is niet alleen sneller, het voorkomt ook een juridisch probleem waar ze zelf geen weet van hebben.
En het is nog sneller ook. Een lokaal font komt van dezelfde server als de rest van je website. Geen extra DNS-lookup, geen nieuwe verbinding opzetten naar een ander domein. Dat scheelt in de praktijk 100 tot 300 milliseconden.
Hoe je het doet: OMGF is de bekendste plugin hiervoor. Die downloadt je Google Fonts, zet ze in je uploads-map en past de verwijzingen aan. In Elementor kun je het ook zonder plugin: zet onder Instellingen de optie Google Fonts laden uit en upload je fonts als custom fonts.
Dit is de vraag waar de meeste winst zit, en het is een designvraag, geen technische.
Elk gewicht is een apart bestand. Regular, medium, semibold, bold, plus cursieve varianten: dan zit je zo op acht bestanden. Voor één lettertype.
Mijn vuistregel: twee lettertypes, maximaal drie gewichten in totaal. Bijvoorbeeld één font voor koppen in bold, één voor de tekst in regular en semibold. Dat is genoeg om hiërarchie te maken, en het scheelt vijf bestanden.
Kijk ook eens of je die tweede fontfamilie echt nodig hebt. Veel goede lettertypes hebben genoeg variatie in gewichten om een hele website mee op te bouwen. Eén font, drie gewichten, en je hebt een strakke typografie zonder dat de browser zich in het zweet werkt.
Fonts optimaliseren is precies zo’n klus die technisch niet moeilijk is maar wel fiddly: uitzoeken welke gewichten je echt gebruikt, lokaal hosten, testen of niets verspringt. Wil je dat het gewoon geregeld is? Bij de Speed Boost Service pak ik dit mee, samen met alles wat er verder speelt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
