Home › Kennisbank › WordPress
Hoe optimaliseer ik lettertypen (fonts) om mijn WordPress-website sneller te maken?
Direct antwoord
Lettertypen (fonts) vertragen je website als de browser ze bij elke pagina van een externe server zoals Google Fonts moet ophalen. Host ze lokaal op je eigen website met de gratis plugin OMGF of met WP Rocket, beperk het aantal lettertypen en diktes tot wat je echt gebruikt en stel font-display: swap in, zodat de tekst direct zichtbaar is terwijl het lettertype laadt.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard met de rol Beheerder
- Een recente back-up van je website. Lees hoe je een back-up van je WordPress-website maakt
- Een snelheidsmeting van je homepage in Google PageSpeed Insights of GTmetrix van voor je begint
- De namen van de lettertypen uit je huisstijl, zodat je weet welke je moet bewaren
Stappenplan12 stappen
- 1Bekijk welke lettertypen je website laadt
- 2Maak een back-up
- 3Beperk het aantal lettertypen en diktes
- 4Overweeg een systeemlettertype
- 5Installeer OMGF
- 6Laat OMGF de Google Fonts lokaal opslaan
- 7Controleer de instelling voor font-display
- 8Zet ongebruikte diktes uit
- 9Laad het belangrijkste lettertype vooraf
- 10Sla op en leeg de cache
- 11Test je website
- 12Meet opnieuw
Waarom vertragen lettertypen mijn website?
Een webfont is een lettertype dat niet op het apparaat van de bezoeker staat en dus eerst moet worden gedownload. Veel WordPress-thema’s en paginabouwers halen hun lettertypen van Google Fonts. De browser maakt dan bij elke pagina een extra verbinding met de servers van Google en downloadt per lettertype en per dikte (bijvoorbeeld normaal, vet en cursief) een apart bestand.
Tot die bestanden binnen zijn, toont de browser de tekst niet of in een tijdelijk lettertype. Vier lettertypen in drie diktes betekenen twaalf downloads voordat de pagina er goed uitziet. Lokaal hosten (de bestanden op je eigen server zetten) scheelt de extra verbinding en is ook beter voor de privacy van je bezoekers: hun browser maakt dan geen contact meer met Google.
Systeemlettertype of webfont?
| Soort | Voorbeelden | Snelheid | Uitstraling |
|---|---|---|---|
| Systeemlettertype | Arial, Verdana, Georgia, Times New Roman | Snelst: staat al op het apparaat van de bezoeker, geen download nodig | Ziet er per apparaat iets anders uit, minder onderscheidend |
| Webfont (bijvoorbeeld van Google Fonts) | Roboto, Open Sans, Montserrat, Lato | Elke dikte is een download. Lokaal hosten en vooraf laden maken het verschil klein | Overal gelijk en passend bij je huisstijl |
Roboto is op Android-toestellen een systeemlettertype, maar op andere apparaten moet het nog worden gedownload. Mag je huisstijl het toestaan, dan is een systeemlettertype de snelste keuze. Anders houd je je webfont en optimaliseer je het laden ervan.
Stappenplan 12 stappen
Stap 1: Bekijk welke lettertypen je website laadt
Ga naar GTmetrix, vul het adres van je homepage in en start de test. Open het tabblad met het watervaloverzicht (Waterfall) en filter op lettertypen (Fonts). Je ziet nu elk lettertypebestand, waar het vandaan komt en hoe lang het laden duurt. Bestanden van fonts.gstatic.com komen van Google Fonts. Noteer hoeveel bestanden er zijn.
In Google PageSpeed Insights zie je bij de aanbevelingen of er een punt staat over tekst die zichtbaar moet blijven tijdens het laden van webfonts.
Stap 2: Maak een back-up
Maak een back-up van je website voordat je lettertypen wijzigt of een plugin installeert. Lees hoe je een back-up van je WordPress-website maakt.
Stap 3: Beperk het aantal lettertypen en diktes
Kies hoogstens twee lettertypen: één voor koppen en één voor lopende tekst. Gebruik per lettertype alleen de diktes die je echt nodig hebt, meestal normaal (400) en vet (700).
Waar je dit instelt, hangt af van je website. Bij een blokthema ga je naar Weergave > Editor en open je Stijlen en daarna het onderdeel voor typografie. Bij een klassiek thema staat het in Weergave > Customizer, meestal onder een onderdeel voor typografie of lettertypen. Gebruik je een paginabouwer zoals Elementor, dan staan de lettertypen in de site-instellingen van de paginabouwer.
Stap 4: Overweeg een systeemlettertype
Laat je huisstijl het toe, kies dan op dezelfde plek een systeemlettertype zoals Arial, Verdana of Georgia. De browser hoeft dan niets te downloaden en de volgende stappen over Google Fonts zijn niet meer nodig. Houd je je webfont, ga dan verder.
Stap 5: Installeer OMGF
Ga in het WordPress-dashboard naar Plugins > Plugin toevoegen. Typ OMGF in het zoekveld rechtsboven, klik op Nu installeren en daarna op Activeren. OMGF staat voor Optimize My Google Fonts en is gratis.
Gebruik je al WP Rocket, dan kun je in plaats van OMGF de optie van WP Rocket gebruiken om Google Fonts lokaal te hosten. Gebruik niet beide tegelijk.
Stap 6: Laat OMGF de Google Fonts lokaal opslaan
Ga naar Instellingen > Optimize Google Fonts. Klik op de knop om op te slaan en te optimaliseren. OMGF zoekt daarna de Google Fonts op je pagina’s, downloadt de bestanden naar je eigen server en vervangt de verwijzingen naar Google door verwijzingen naar je eigen website. Open na het opslaan je homepage één keer, zodat OMGF de lettertypen kan vinden, en ga terug naar de instellingen om de gevonden lettertypen te bekijken.
Stap 7: Controleer de instelling voor font-display
Zoek in de instellingen van OMGF de keuzelijst voor font-display. Kies swap. Dit is meestal al de standaardwaarde. De tekst op je website is daardoor direct zichtbaar terwijl het lettertype nog laadt.
Stap 8: Zet ongebruikte diktes uit
In de lijst met gevonden lettertypen toont OMGF per lettertype elke dikte en stijl. Zet de diktes uit die je in stap 3 niet hebt gekozen, bijvoorbeeld licht (300) of extra vet (800). Elk uitgezet bestand is een download minder.
Let op: zet geen iconenlettertype uit, zoals Font Awesome of de iconen van je paginabouwer. Anders verdwijnen je iconen.
Stap 9: Laad het belangrijkste lettertype vooraf
Zet in dezelfde lijst het vinkje voor vooraf laden (preload) aan bij het ene bestand dat direct in beeld nodig is, meestal de normale dikte van het lettertype van je lopende tekst. De browser downloadt dat bestand dan als eerste.
Let op: laad hoogstens één of twee bestanden vooraf. Meer vooraf laden maakt je website juist trager.
Stap 10: Sla op en leeg de cache
Klik in OMGF op de knop om op te slaan en te optimaliseren. Leeg daarna de cache van je cachingplugin, en ook van Autoptimize als je die gebruikt. Anders krijgen bezoekers nog de oude pagina’s met de verwijzingen naar Google.
Stap 11: Test je website
Open je website in een venster waarin je niet bent ingelogd. Controleer of koppen en lopende tekst in het juiste lettertype staan, of vetgedrukte tekst nog vet is en of je iconen er nog zijn. Bekijk ook een pagina op je telefoon.
Stap 12: Meet opnieuw
Voer de test in GTmetrix opnieuw uit en filter weer op lettertypen. De bestanden komen nu van je eigen domeinnaam en het aantal is kleiner. Voer ook PageSpeed Insights opnieuw uit en vergelijk de score met je eerste meting. Lees hoe je je WordPress-website verder sneller maakt.
Controleer of het gelukt is
In het watervaloverzicht van GTmetrix staan geen aanvragen meer naar fonts.googleapis.com of fonts.gstatic.com en het aantal lettertypebestanden is kleiner dan bij je eerste meting. In PageSpeed Insights is de aanbeveling over webfonts verdwenen. Je website toont nog steeds de lettertypen van je huisstijl.
Wat doet font-display: swap?
font-display: swap is een instelling in de CSS (opmaak) van je website die de browser opdraagt de tekst meteen te tonen in een tijdelijk lettertype en te wisselen zodra jouw lettertype is geladen. Zonder die instelling kan tekst enkele tellen onzichtbaar blijven.
De wissel zelf kan kort zichtbaar zijn. Dat heet Flash of Unstyled Text (FOUT). Je maakt die wissel bijna onzichtbaar door je lettertypen lokaal te hosten, het belangrijkste lettertype vooraf te laden en een tijdelijk lettertype te kiezen dat op het echte lijkt.
Werkt het niet?
Je website toont een ander lettertype dan eerst
OMGF heeft het lettertype niet gevonden of niet kunnen downloaden. Ga naar Instellingen > Optimize Google Fonts, controleer de lijst met gevonden lettertypen en klik opnieuw op de knop om op te slaan en te optimaliseren. Leeg daarna de cache. Staat het lettertype niet in de lijst, zie dan het volgende probleem.
Lettertypen worden nog steeds van Google geladen
Je thema of paginabouwer laadt de lettertypen op een manier die de gratis versie van OMGF niet herkent, bijvoorbeeld via een script. Kijk in de instellingen van je paginabouwer of je het laden van Google Fonts kunt uitschakelen of lokaal kunt laten gebeuren. De betaalde versie van OMGF verwerkt meer van deze gevallen.
Iconen of symbolen zijn verdwenen
Je hebt een iconenlettertype uitgezet. Zet in de lijst van OMGF alle diktes van dat lettertype weer aan, sla op en leeg de cache.
De tekst wisselt zichtbaar van lettertype tijdens het laden
Dat is de wissel van font-display: swap. Controleer of het belangrijkste lettertype vooraf wordt geladen en of de bestanden lokaal staan. Blijft de wissel storen, kies dan in je thema een tijdelijk lettertype dat lijkt op je webfont, of stap over op een systeemlettertype.
PageSpeed Insights blijft adviseren over webfonts
Controleer of je de cache hebt geleegd. Gaat het om lettertypen van een andere dienst, zoals een chatvenster of een ingesloten kaart, dan kun je daar met OMGF niets aan doen. Overweeg of je die dienst nodig hebt.
Veelgestelde vragen
Wat zijn Google Fonts?
Google Fonts is een gratis verzameling lettertypen van Google die websites rechtstreeks vanaf de servers van Google kunnen laden. Veel WordPress-thema’s en paginabouwers gebruiken deze lettertypen standaard.
Mag ik Google Fonts op mijn eigen server zetten?
Ja. De lettertypen van Google Fonts hebben een open licentie die lokaal hosten toestaat. OMGF en WP Rocket doen precies dat.
Is lokaal hosten beter voor de privacy van mijn bezoekers?
Ja. Laadt je website lettertypen van Google, dan maakt de browser van elke bezoeker verbinding met Google en stuurt daarbij zijn IP-adres mee. Host je de lettertypen zelf, dan gebeurt dat niet.
Hoeveel lettertypen mag ik gebruiken?
Houd het bij twee lettertypen en in totaal drie tot vier bestanden, bijvoorbeeld normaal en vet voor de lopende tekst en vet voor koppen. Elk extra bestand is een extra download.
Wat is WOFF2?
WOFF2 is het modernste bestandsformaat voor webfonts en het kleinst in omvang. OMGF en Google Fonts leveren de lettertypen in dit formaat. Upload je zelf lettertypen, kies dan ook voor WOFF2.
Werkt dit ook met Elementor?
Ja. Elementor laadt Google Fonts zelf, en OMGF herkent dat in de meeste gevallen. Kijk daarnaast in de instellingen van Elementor naar de opties voor het laden van Google Fonts en voor font-display.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- je website na het lokaal hosten een ander lettertype toont en opnieuw optimaliseren niet helpt
- lettertypen nog steeds van Google worden geladen terwijl OMGF actief is
- iconen of symbolen zijn verdwenen na het optimaliseren van de lettertypen
- je wilt dat ViVortis de lettertypen en de laadtijd van je website naloopt
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.
Verder lezen
- Hoe maak ik mijn WordPress-website sneller?
- Hoe minimaliseer ik CSS, JavaScript en HTML voor snellere laadtijden?
- Wat is Google PageSpeed Insights en hoe gebruik ik het?
- Wat is lazy loading en hoe stel ik het in op mijn WordPress-website?
Meer van ViVortis