Responsive web font laden, een nieuwe strategie
Optimaliseren van font laden voor tragere mobiele apparaten met responsive preloading en responsive font-face declaraties
Responsive font weergave & responsive preloading font strategie
Als Core Web Vitals specialist zie ik elke dag verschillende creatieve oplossingen. De meeste zijn niet erg logisch, maar heel soms kom ik een strategie tegen die zo simpel en elegant is dat het voor bepaalde sites wel logisch is.
Dit artikel legt uit hoe je responsive font preloading implementeert voor desktops samen met font display:optional om de Flash Of Unstyled Text (FOUT) te elimineren, terwijl je voor mobiel 'default loading' gebruikt en font-display: swap. toepast.
tip: deze strategie werkt goed voor sites met een groter critical rendering path.
Het probleem met vroegtijdig laden van fonts
Bij het optimaliseren van de Core Web Vitals is er één simpele regel die altijd geldt:
"Alles wat je doet vóór de Largest Contentful Paint zal die Largest Contentful Paint vertragen".
Dit principe geldt ook voor web fonts. Het prioriteren van het laden van web fonts tijdens het laden van de pagina kan de gebruikerservaring verbeteren, maar als je site moeite heeft om de Core Web Vitals drempels te halen, vooral voor specifieke apparaattypes, moet je UX afwegen tegen het verbeteren van LCP.
Laten we het onderstaande voorbeeld van een Nederlandse krantensite bekijken. Op een mobiel apparaat worden 3 fonts in de wachtrij geplaatst vóór het LCP element. Hierdoor concurreren de 3 fonts om vroege netwerkbronnen en vertragen ze de timing van de afbeelding.
Responsive font strategie biedt uitkomst!
In gevallen zoals deze, waar er veel vroege netwerkconcurrentie is, is het zinvol om onderscheid te maken tussen apparaattypes. Meestal kunnen snellere desktopapparaten op bedrade (en snellere netwerk)verbindingen meer vroege netwerkbronnen tegelijk aan en is het volkomen logisch om sommige kritieke fontbestanden te preloaden.
Mobiele apparaten daarentegen worden misschien gebruikt tijdens het woon-werkverkeer onder minder dan optimale netwerkomstandigheden. Mobiele apparaten hebben vaak ook tragere CPU's en minder beschikbaar geheugen in vergelijking met desktops. Deze beperkingen betekenen dat het zinvol kan zijn om het laden van fonts anders te behandelen op basis van het apparaattype.
- Desktop: Het preloaden van fonts verbetert de renderprestaties op apparaten met betere bandbreedte en rekenkracht. Gebruik font-display: optional om blokkering te minimaliseren en font-swapping problemen te elimineren. Dit zorgt ervoor dat het font alleen wordt gebruikt als het binnen 100ms beschikbaar is na aanvraag, terwijl preloading ervoor zorgt dat het doel wordt bereikt.
- Mobiel: Preload het font niet vanwege netwerkconcurrentie. Gebruik font-display: swap voor snellere tekstweergave. Deze aanpak toont fallback fonts onmiddellijk terwijl het aangepaste font op de achtergrond blijft laden, wat een betere ervaring biedt op minder krachtige apparaten.
Implementatie met <link rel="preload"> en Media Queries
In plaats van het font universeel te laden, kun je het media attribuut in de HTML <link> tag gebruiken samen met CSS om verschillende font strategieën toe te passen op basis van apparaattypes.
HTML Structuur
<head>
<!-- Preload font alleen voor desktop -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Globale font instellingen */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Desktop font instellingen */
@static/cache/static/img/clients/dpgmedia.webp (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head> Voordelen van deze aanpak
- Focus op Desktop UX: Desktop rendert onmiddellijk met het web font, wat de FOUT of FOIT voorkomt.
- Focus op Mobiele prestaties:
font-display: swapzorgt ervoor dat gebruikers tekst onmiddellijk zien, zelfs als het aangepaste font nog niet geladen is. - Declaratieve Eenvoud: Vermijdt JavaScript, wat de complexiteit vermindert en de onderhoudbaarheid verbetert.
Praktijkvoorbeeld
Zoals verteld in de intro: deze strategie is gebaseerd op een praktijkvoorbeeld dat ik tegenkwam. Een e-commerce website die zich richt op zowel desktop- als mobiele gebruikers implementeerde deze strategie. Het resultaat:
- Desktop: Verbeterde CLS en UX waarbij gestylede fonts bijna onmiddellijk verschenen.
- Mobiel: Snellere First Contentful Paint en Largest Contentful Paint zorgden voor een snelle gebruikerservaring, zelfs op tragere verbindingen.
Ask AI why your INP spiked.
CoreDash is the only RUM tool with MCP support. Connect it to your AI agent and query your Core Web Vitals data in natural language. No more clicking through dashboards.
See How It Works
