Webfonts optimaliseren: sneller laden, zelfde huisstijl

Webfonts zijn overal. Volgens de metingen van het Web Almanac van HTTP Archive gebruikt ongeveer 88% van alle websites minstens één webfont, en wegen die fontbestanden gemiddeld 139 kB per startpagina. Dat lijkt weinig naast foto's van enkele megabytes, maar fonts zijn geen gewone bestanden: de browser heeft ze nodig om tekst te tonen, dus ze staan vooraan in de rij en houden andere zaken op.

Bij kmo-sites zien we vaak veel meer dan dat gemiddelde. Een thema laadt standaard vier gewichten van een lettertype, de huisstijl voegt er een tweede familie aan toe, een plugin sleept er ongevraagd een derde bij, en voor je het weet download elke nieuwe bezoeker acht tot tien fontbestanden. Elk bestand is een aparte aanvraag, en op een mobiele verbinding tellen die aanvragen dubbel.

De eerste stap is dus gewoon tellen. Open je website in een privévenster, druk op F12, kijk in het netwerkoverzicht bij het type Font en tel de bestanden en de kilobytes. Meer dan vier bestanden of meer dan 200 kB? Dan valt hier winst te halen.

Herken je dit: je pagina verschijnt, maar de tekst is een fractie van een seconde onzichtbaar, of hij springt van een standaardletter naar je huisstijlletter? Dat zijn de twee klassieke symptomen van slecht geladen fonts.

Zolang je fontbestand niet binnen is, moet de browser kiezen. Ofwel toont hij niets en wacht hij op jouw lettertype: dan staart je bezoeker naar lege tekstblokken. Ofwel toont hij alvast een standaardletter en wisselt hij zodra jouw font er is: dan zie je de tekst even verspringen. Geen van beide is mooi, maar onzichtbare tekst is met afstand het schadelijkst. Een bezoeker die niets kan lezen, is een bezoeker die vertrekt, en van mobiele bezoekers weten we dat 53% afhaakt als een pagina langer dan 3 seconden laadt.

De oplossing heet font-display: swap. Die instelling zegt tegen de browser: toon meteen een tijdelijke letter en wissel netjes zodra het echte font geladen is. In combinatie met een fallback die op je huisstijlletter lijkt (daarover verderop meer) merkt bijna niemand de wissel nog op.

Deze vijf stappen halen bij de meeste sites de helft of meer van het fontgewicht weg, zonder één letter van de huisstijl op te geven:

• Gebruik alleen WOFF2. Dit moderne formaat is fors kleiner dan oudere formaten en wordt door elke gangbare browser ondersteund. Het Web Almanac stelt vast dat vrijwel het hele web naar WOFF2 convergeert; als jouw site nog TTF- of EOT-bestanden serveert, betaal je gewicht voor niets.
• Schrap gewichten die je niet gebruikt. De meeste huisstijlen hebben genoeg aan drie of vier stijlen: normaal, vet en eventueel cursief in twee gewichten. Elk extra gewicht is een extra download.
• Subset je tekens. Fontbestanden bevatten vaak Cyrillisch, Grieks en Vietnamees terwijl jouw site alleen Nederlands en Frans nodig heeft. Een subset met alleen Latijnse tekens is vaak meer dan de helft kleiner.
• Overweeg een variabel font. Eén variabel bestand bevat alle gewichten van licht tot extra vet. Al meer dan 40% van de mobiele websites gebruikt er een; voor huisstijlen met veel gewichten is het de netste oplossing.
• Preload je hoofdfont. Met één regel in de kop van je pagina vertel je de browser: dit bestand heb je zeker nodig, begin er meteen aan. Alleen doen voor het font dat je koppen en broodtekst toont, anders werkt het averechts.

Voor WordPress-gebruikers geldt: veel van dit lijstje zit tegenwoordig in themasettings of in gratis plugins. Je hebt er zelden maatwerk voor nodig.

Veel sites laden hun lettertypes rechtstreeks bij een externe fontdienst zoals Google Fonts. Dat is gemakkelijk, maar het betekent dat elke bezoeker eerst een verbinding met een extra server moet opzetten voor je tekst kan verschijnen. Zelf hosten, waarbij de fontbestanden gewoon bij je eigen website staan, scheelt die omweg en geeft je volledige controle over formaat en subset.

Je bent daarmee in goed gezelschap: volgens het Web Almanac serveert ongeveer 72% van de websites minstens een deel van zijn fonts vanaf de eigen server, en het aandeel dat volledig zelf host groeit elk jaar. Naast snelheid speelt ook privacy mee: wie fonts zelf host, stuurt geen bezoekersgegevens naar een externe partij en houdt zijn GDPR-verhaal eenvoudig.

Praktisch is het simpeler dan het klinkt. De meeste fontleveranciers laten je webfontbestanden downloaden, en voor gratis fonts bestaan er hulpmiddelen die meteen een WOFF2-subset voor je klaarmaken. Eén namiddag werk, blijvend resultaat.

De grootste angst van zaakvoerders en huisstijlbewakers is dat optimaliseren betekent: inleveren op het merk. Dat hoeft niet. De kunst zit in de fallback, de tijdelijke letter die de browser toont terwijl jouw font laadt.

Kies een systeemletter die qua breedte en hoogte op je huisstijlletter lijkt. Is je huisstijl een moderne schreefloze letter, dan is Arial of de standaardletter van het toestel meestal een prima dubbelganger; voor een letter met schreven is Georgia vaak dichtbij. Moderne technieken laten je de fallback zelfs bijschaven qua lettergrootte en regelafstand, zodat de tekst bij de wissel amper verschuift.

Het doel is niet dat de fallback perfect is. Het doel is dat je bezoeker meteen kan lezen en de wissel naar je huisstijlletter niet eens opmerkt.

Onderschat ook niet wat die tienden van seconden waard zijn. Het onderzoek Milliseconds Make Millions van Deloitte en Google becijferde dat een verbetering van amper 0,1 seconde de conversie in retail met 8,4% verhoogt. Fonts die een halve seconde eerder klaarstaan, zijn dus geen cosmetisch detail maar meetbare omzet.

Je lettertype is het gezicht van je merk, maar het mag geen blok aan het been van je laadtijd zijn. Met WOFF2, minder gewichten, een subset en een slimme fallback houd je beide: een site die er uitziet zoals jij wil, en tekst die er meteen staat.

Benieuwd of je lettertypes, afbeeldingen of scripts vandaag je grootste rem zijn? Laat je site doorlichten met de gratis marketing scan van Marketing Scan. Je ziet in enkele minuten waar de winst zit, uitgelegd in gewone mensentaal.