Ga naar de inhoud 
Veel WordPress lettertypen parallel laden, rendering blokkeren en zo LCP en FCP verlengen - vooral op mobiele apparaten. In dit artikel laat ik je zien waarom te veel lettertypen tijd kosten, hoe FOIT/FOUT ontstaat en welke specifieke maatregelen je site merkbaar zullen versnellen.
Centrale punten
- Vermindering tot een paar bezuinigingen vermindert aanvragen en gegevensoverdracht
- Voorbelasting en Preconnect belangrijke bestanden prioriteren
- lettertype-weergave Voorkomt onzichtbare tekst (FOIT)
- Lokaal hosting bespaart externe latenties en CORS
- Subsetting verwijdert ongebruikte glyphs en maakt lettertypes klein
Waarom veel webfonts in WordPress laadtijd kosten
Elk extra lettertype brengt meer Verzoeken, meer DNS lookups en extra kilobytes. Verschillende families met normaal, vet en cursief tellen al snel op tot 500-1000 KB voordat tekst netjes wordt weergegeven. Dit heeft een direct effect op de Largest Contentful Paint (LCP) omdat de browser alleen kan renderen als belangrijke lettertypen beschikbaar zijn. Slechts drie lettertypen kunnen de eerste rendering al met 20-50 procent uitrekken, wat gebruikers met langzame verbindingen hard treft. Ik concentreer me daarom op een paar duidelijk gedefinieerde cuts en veilige fallbacks om renderblokkering te voorkomen.
Hoe webfonts worden geladen in WordPress - en waar het vastloopt
Weblettertypen zijn vaak afkomstig van externe leveranciers of thema-opties, wat betekent dat er extra DNS-lookups en TLS-handshakes. Met FOIT (Flash of Invisible Text) wacht de browser op lettertypen en toont tot die tijd onzichtbare tekst, wat de indruk versterkt dat er „niets gebeurt“. FOUT (Flash of Unstyled Text) is beter, maar produceert korte lay-outsprongen bij het overschakelen van het fallback- naar het webfont. Zonder prioritering, preconnect en verstandige caching nemen de laadtijd en het TTFB-gevoel toe. Ik plan de integratie zo dat de hoofdinhoud altijd als eerste verschijnt en dat de lettertypen daarna binnenstromen zonder te stotteren.
Audit en controle: maak alle lettertypen zichtbaar
Voordat ik optimaliseer, krijg ik een volledig overzicht. In de DevTools filter ik op het tabblad Netwerk op „Lettertype“, controleer de bestandsnamen, overdrachtsgroottes en Initiatiefnemer (thema, plugin, blokbewerker). De watervaltijden laten me zien of lettertypen het kritieke pad blokkeren. In het paneel Dekking kan ik zien of grote @font-face CSS-blokken slechts minimaal kan worden gebruikt. Een performance trace laat zien of de tekstweergave wordt geblokkeerd totdat de WOFF2-bestanden klaar zijn. Op WordPress-niveau deactiveer ik plugins op testbasis om verborgen fontbronnen te identificeren (page builders, icon packs). Mijn kerngegevens hier: aantal font requests, totaal KB, tijd tot eerste leesbare regel, FOUT/FOIT duur en impact op LCP/FCP in de filmstrip.
Ik vergelijk lab- en veldgegevens: Een snelle desktop via LAN maskeert problemen die pas zichtbaar worden in het 4G netwerk. Daarom test ik met lage CPU en bandbreedte throttling om realistische mobiele omstandigheden te simuleren. Pas als de ketens schoon zijn en fallbacks stabiel renderen, voeg ik verdere verfijning toe.
Meetbare effecten op Core Web Vitals
LCP, FCP en CLS reageren gevoelig op onvoorzichtig geladen Lettertypen, omdat vertraagde lettertypes de lay-out verschuiven en de inhoud vertroebelen. Volgens HTTP Archive dragen pagina's met webfonts gemiddeld aanzienlijk meer gegevens over, wat beter te zien is op mobiele apparaten. De PageSpeed Insights documentatie legt duidelijk uit dat render-blocking bronnen het pad naar de eerste weergave verlengen. Geprioriteerde aanvragen verkorten deze keten en verkorten de wachttijden aanzienlijk. Als je dieper wilt ingaan op prioritering, kun je achtergrondinformatie vinden op Prioritering van verzoeken, die ik specifiek gebruik voor uitgebreide thema's.
Technische oorzaken in detail
Veel afzonderlijke bestanden, niet-gecombineerde stijlen en ontbrekende subsetting verhogen de Lading onnodig. Zonder HTTP/2 of HTTP/3 worden verzoeken vaak in de wachtrij geplaatst en blokkeren ze het renderpad. Externe domeinen zoals fonts.googleapis.com voegen extra latenties toe, die oplopen voor meerdere families. CORS-headers zijn noodzakelijk, anders annuleert de browser preloads of gebruikt hij ze niet. Ik voorkom zulke struikelblokken door lokale voorziening, netjes ingestelde headers en de gerichte beperking tot twee tot drie cuts.
Vermijd typografische valkuilen: Metrics, fallbackkwaliteit en nepstijlen
Naast de pure bestandsgrootte hebben typodetails invloed op de stabiliteit van de weergave. Als de metriek van het fallback- en webfont sterk verschillen, treden er zichtbare sprongen op tijdens het verwisselen. Ik maak de hoogte gelijk met maataanpassing en synthetische stijlen blokkeren om „vals“ vet/etalisch te voorkomen:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
/* Metriek aanpassen om CLS te verminderen */
grootte-aanpassing: 100%;
oplopend: 90%;
daling-overschrijding: 20%;
line-gap-override: 0%;
}
/* Terugvallettertype visueel harmoniseren */
lichaam {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
font-size-adjust: 0.5; /* Betere x-hoogte aanpassing */
font-synthesis: none; /* Voorkomt faux-bold/italic */
}Ik definieer een aparte as of statisch bestand voor cursieve varianten en vermijd nepcursief. Ik organiseer ook lettertypegewicht precies (300/400/600/700) zodat de browser niet interpoleert. Dit precisiewerk kost weinig tijd, maar voorkomt merkbare veranderingen in de lay-out bij het overschakelen van het fallback- naar het webfont.
Stroomlijnen: drie onmiddellijke maatregelen
Ik verminder het aantal gezinnen, vervang decoratieve bezuinigingen door fallbacks en gebruik consequent lettertype-weergaveswap. Systeemstacks (-apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell) voeren snel tekst uit terwijl het webfont op de achtergrond wordt geladen. Koppen hebben meestal alleen een vetgedrukte snede nodig, hoofdtekst een gewone variant. Ik verwijder ook onnodige externe aanroepen om minder aanvragen te genereren. Als je er nog meer uit wilt halen, kun je HTTP-verzoeken verminderen en dus het hele kritieke pad ontlasten.
Lettertypen van pictogrammen vervangen: SVG bespaart aanvragen
Veel thema's worden geleverd met pictogramlettertypes (bijvoorbeeld voor sociale of UI-pictogrammen). Een enkel pictogramlettertype kan tussen 30 en 80 KB wegen en kan @font-gezicht het renderpad beïnvloeden. Ik vervang zulke lettertypen door SVG - inline of als sprite. Dit vermindert aanvragen, voorkomt FOIT/FOUT voor pictogrammen en zorgt voor haarscherpe visualisatie op alle displays. Als een volledige omschakeling niet onmiddellijk mogelijk is, sub-selecteer ik het pictogramlettertype op de pictogrammen die daadwerkelijk worden gebruikt en stel ik het volgende in lettertype-weergave: optioneel, zodat de pagina nooit wacht op het lettertype van het pictogram:
@font-face {
font-family: 'ThemeIcons';
src: url('/fonts/theme-icons-subset.woff2') format('woff2');
font-display: optioneel; /* UI blijft werkbaar, pictogrammen verschijnen later */
}Inline SVG stelt me ook in staat om kleuren en toestanden via CSS te regelen zonder nieuwe bestanden te laden. Dit past perfect bij het doel om de kritische renderketen zo kort mogelijk te houden.
Gebruik voorspanning, preconnect en voorverwarming op de juiste manier
Ik gebruik Preconnect voor de beslissende Domein, om prioriteit te geven aan DNS, TCP en TLS. Ik gebruik preload alleen voor echt kritieke WOFF2-bestanden, anders verspil ik prioriteit aan secundaire bronnen. De tag moet as=“font“, type=“font/woff2″ en crossorigin instellen, anders zal de browser de hint gedeeltelijk negeren. Te veel preloads saboteren elkaar en duwen belangrijkere inhoud naar achteren. Een slanke, geteste set hints verkort de tijd tot de eerste leesbare regel:
Lokaal hosten en GDPR-compliant blijven
Ik download de lettertypen die ik nodig heb, deel ze in en serveer ze rechtstreeks vanuit mijn eigen Server. Dit bespaart externe DNS lookups, vermindert CORS-problemen en geeft me volledige controle over de cache. Een lokale benadering vergemakkelijkt lange cache-runtimes en zorgt voor consistente beschikbaarheid. Voor juridische duidelijkheid en praktische implementatie, mijn gids voor Google lettertypen lokaal. Dit is hoe ik technologie en gegevensbescherming schoon houd zonder in te boeten aan typografie.
Subsetting en variabele lettertypen: maximaal effect met klein formaat
In plaats van complete taalpakketten te laden, bewaar ik alleen de vereiste Glyphen en exotische sets verwijderen. Latijn zonder extensies bespaart vaak 40-70 procent bestandsgrootte, wat vooral merkbaar is op mobiele apparaten. Variabele lettertypes vervangen verschillende statische bestanden door een enkele bron met assen voor gewicht en cursief. Dit vermindert het aantal aanvragen en verbetert de prioritering als ik slechts één WOFF2-bestand vooraf laad. Tegelijkertijd blijft de visuele diversiteit behouden zonder dat ik vijf secties afzonderlijk hoef over te zetten.
Variabele lettertypes in de praktijk: gericht gebruik van assen
Bij de realisatie vermijd ik onnodig brede assen. Ik beperk wght bijvoorbeeld tot 400-700 als alleen Regular en Bold worden gebruikt. Dit vermindert de complexiteit van het renderen en behoudt de visuele consistentie. Voor responsieve typografie gebruik ik systematisch numerieke gewichten, geen trefwoorden:
@font-face {
font-family: 'InterVar';
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
font-weight: 400 700; /* Smal bereik in plaats van 100-900 */
font-style: normaal;
font-display: swap;
}
h1, h2 { font-family: 'InterVar', system-ui, sans-serif; font-weight: 700; }
p { font-family: 'InterVar', system-ui, sans-serif; font-weight: 400; }
:root { font-optical-sizing: auto; }
/* Speciale gevallen per as, waar van toepassing:
.element { font-variation-settings: 'wght' 650; } */Dit behoudt de flexibiliteit van een variabel lettertype zonder het systeem te belasten met onnodige tussenstappen.
Welke optimalisatie brengt hoeveel op? (Overzicht)
Het volgende overzicht laat zien wat ik in de praktijk gebruik om het grootste resultaat te bereiken Besparingen en waar ik op let. Waarden zijn empirische waarden en zijn afhankelijk van de beginstatus, het thema en het aantal bewerkingen. Ik test elke wijziging met PageSpeed Insights en een WebPageTest om neveneffecten te herkennen. Vervolgens maak ik gerichte aanpassingen aan drempelwaarden en caching. Dit verhoogt de zekerheid dat elke maatregel real time wint.
| Optimalisatie-aanpak | Typische besparingen | Belangrijke opmerking |
|---|---|---|
| Vermindering tot 2 bezuinigingen | 150-400 KB | Schoon Tegenvallers stel in |
| lettertype-weergave: verwisselen | + snel leesbare tekst | FOUT accepteren in plaats van FOIT |
| Lokale hosting + lange caching | 2-3 verzoeken minder | Cachecontrole/ETag correct |
| Preconnect + gerichte voorbelasting | 50-200 ms | Alleen kritisch Bestanden |
| Subsetting (Latijnse basis) | 40-70 % kleiner | Uitbreidbaar op een later tijdstip |
| Variabel lettertype in plaats van 4 bestanden | -3 Verzoeken | Gebruik alleen WOFF2 |
Gebruik plugins verstandig - zonder overhead
OMGF laadt Google lettertypen lokaal, maakt automatisch subsets en verkort onnodige Aanmelden uit. Met Asset CleanUp kan ik lettertypen pagina voor pagina uitschakelen als een specifieke sjabloon ze niet nodig heeft. Autoptimise combineert CSS, minificeert en kan lettertypen extraheren zodat kritieke stijlen eerst komen. Ik test de combinaties zorgvuldig omdat overmatige aggregatie onder HTTP/2 averechts kan werken. Het doel blijft een stabiele, korte keten naar de eerste zichtbare inhoud.
Praktische implementatie in WordPress: codevoorbeelden
Veel thema's of paginabouwers voegen automatisch lettertypen toe. Ik verwijder dubbele bronnen, schakel over naar lokale bestanden en stel duidelijke prioriteiten - bij voorkeur in het child theme.
1) Verwijder externe lettertypen uit het thema en laad lokale lettertypen
/* functions.php in het kindthema */
add_action('wp_enqueue_scripts', function() {
/* Aanpassen/vinden voorbeeld handgrepen van het thema/builder */
wp_dequeue_style('google-fonts');
wp_deregister_style('google-fonts');
/* Voeg je eigen, lokale lettertypestijlen toe */
wp_enqueue_style('local-fonts', get_stylesheet_directory_uri() . '/assets/css/fonts.css', [], '1.0', 'all');
}, 20);2) Gerichte voorbelasting voor de kritische WOFF2
/* functions.php */
add_action('wp_head', function() {
echo '';
}, 1);3) Caching en CORS-header instellen voor lettertypen
# .htaccess (Apache)
AddType lettertype/woff2 .woff2
Header set Cache-Control "public, max-age=31536000, immutable".
Header set Access-Control-Allow-Origin "*".# Nginx (serverblok)
locatie ~* .(woff2|woff)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Access-Control-Allow-Origin "*";
types { font/woff2 woff2; }
}4) Voorbeeld fonts.css met subsets en swap
@font-face {
font-family: 'Inter';
src: url('/fonts/InterLatin-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-weergave: swap;
unicode-bereik: U+000-5FF; /* Latijnse basis */
}
@font-face {
font-family: 'Inter';
src: url('/fonts/InterLatin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-weergave: swap;
unicode-bereik: U+000-5FF;
}Meertalige pagina's: Subsets per taal laden
Voor internationale projecten laad ik alleen de benodigde lettertypen. In WordPress kan ik per Lokaal verschillende stijlen registreren. Bijvoorbeeld, Duits/Engels blijft met een smalle Latijnse subset, terwijl een Poolse of Turkse variant uitgebreide glyphs krijgt - maar alleen waar het nodig is.
/* functions.php */
add_action('wp_enqueue_scripts', function() {
$locale = get_locale();
if (in_array($locale, ['de_DE','en_US','en_GB'])) {
wp_enqueue_style('fonts-latin', get_stylesheet_directory_uri().'/assets/css/fonts-latin.css', [], '1.0');
} elseif (in_array($locale, ['pl_PL','tr_TR'])) {
wp_enqueue_style('fonts-latin-ext', get_stylesheet_directory_uri().'/assets/css/fonts-latin-ext.css', [], '1.0');
}
});Belangrijk: Ik zorg ervoor dat de bodytekst altijd een solide fallback-keten heeft. Dit zorgt ervoor dat de pagina leesbaar blijft, zelfs als een taalbestand faalt of een cache koud is.
Hosting, cache en CDN als vermenigvuldigers
Snelle NVMe SSD's, HTTP/3 en een CDN verkorten TTFB en leveren Lettertypen wereldwijd sneller. Een server-side cache vermindert backend verzoeken, terwijl browser caching maandenlang lettertypen uit de lokale cache haalt. Brotli voor WOFF2 levert bijna niets meer op, maar voor CSS met @font-face is het nog steeds de moeite waard. Ik geef ook voorrang aan kritieke CSS-onderdelen inline, zodat tekst meteen verschijnt. Dit creëert een keten: vaste backend, schone aanlevering, kleinere lettertypebestanden - en uiteindelijk een sneller zichtbare tekst.
Test- en uitrolplan: veilig live gaan
Ik introduceer stap voor stap lettertypeoptimalisaties om risico's te minimaliseren. Eerst documenteer ik de status quo (aanvragen, KB, LCP/FCP/CLS). Dan verminder ik families en uitsnedes, vervang pictogrammen en schakel over op lokale WOFF2-bestanden met een lange cache. Dan voeg ik Preconnect/Preload toe - bewust spaarzaam. Na elke stap controleer ik de filmstrip om te zien of FOIT is verminderd en of de lay-outsprongen zijn verdwenen. Pas als er geen regressies meer zichtbaar zijn, rol ik de wijzigingen uit naar alle sjablonen.
Vooral pagina's met ongebruikelijke koppen (zeer grote lettergroottes, tracking) of veel cursief gebruik zijn kritisch. Hier test ik specifiek of maataanpassing en de metrische overschrijvingen vangen echt de uitwijksprongen. Mijn doel blijft constant: zo vroeg mogelijk de eerste leesbare lijn - zonder dressuurhandelingen door late lettertypes.
Korte samenvatting: laadtijd omlaag, leesbaarheid omhoog
Te veel lettertypes kosten kostbaar Seconden, omdat ze verzoeken rekken, rendering blokkeren en gegevensvolumes vergroten. Ik houd lettertypen slank, prioriteer specifiek en vertrouw op swap, subsetting en lokale hosting. Dit verlaagt betrouwbaar LCP en FCP en vermindert visuele sprongen. Met monitoring via PageSpeed Insights en herhaalde tests garandeer ik het effect en verzamel ik historische waarden. Dit houdt de typografie sterk zonder dat gebruikers hoeven te wachten - en dat is precies wat ik wil bereiken.
