Responsive webfont laden, een nieuwe strategie

Het optimaliseren van het laden van fonts voor tragere mobiele apparaten met responsive preloading en responsive font-face declaraties

Arjen Karel - linkedin

Last update: 2024-11-28

Responsive font display & responsive preloading font strategie

Als Core Web Vitals specialist zie ik dagelijks verschillende creatieve oplossingen. De meeste zijn niet erg zinvol, maar zo nu en dan kom ik een strategie tegen die zo simpel en elegant is dat deze voor bepaalde sites wel degelijk nuttig is.

Dit artikel legt uit hoe je responsive font preloading voor desktops implementeert, in combinatie met font display:optional om de Flash Of Unstyled Text (FOUT) te elimineren, terwijl je voor mobiel het font 'standaard laadt' en font-display: swap gebruikt.

tip: deze strategie werkt goed voor sites met een groter critical rendering path.

Het probleem met het vroeg laden van fonts

Bij het optimaliseren van de Core Web Vitals is er één simpele regel die altijd opgaat:
"Alles wat je doet vóór de Largest Contentful Paint, zal die Largest Contentful Paint vertragen".

Dit principe geldt ook voor webfonts. Het prioriteren van het laden van webfonts tijdens het laden van de pagina kan de user experience verbeteren, maar als je site moeite heeft om de drempelwaarden van de Core Web Vitals te halen, met name voor specifieke apparaattypes, moet je mogelijk een afweging maken tussen UX en het verbeteren van de LCP.

Neem het onderstaande voorbeeld van een Nederlandse nieuwssite. 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 wordt de timing van de afbeelding naar achteren geschoven.

De responsive font strategie als redmiddel!

In gevallen als deze, waar veel vroege netwerkconcurrentie is, is het zinvol om onderscheid te maken tussen apparaattypes. Snellere desktopapparaten met een bekabelde (en snellere) netwerkverbinding kunnen doorgaans meer vroege netwerkbronnen tegelijk aan, en het is dan ook volkomen logisch om enkele kritieke font-bestanden te preloadden.

Mobiele apparaten daarentegen worden misschien gebruikt tijdens het pendelen naar het werk onder minder dan optimale netwerkomstandigheden. Mobiele apparaten hebben ook vaak tragere CPU's en minder beschikbaar geheugen in vergelijking met desktops. Vanwege deze beperkingen kan het zinvol zijn om het laden van fonts per apparaattype anders aan te pakken.

Desktop: Het preloadden van fonts verbetert de renderprestaties op apparaten met meer bandbreedte en processorkracht. Gebruik font-display: optional om blocking te minimaliseren en problemen met het wisselen van fonts (font-swapping) te elimineren. Dit zorgt ervoor dat het font alleen wordt gebruikt als het binnen 100 ms na aanvraag beschikbaar is, terwijl preloading ervoor zorgt dat dit doel wordt gehaald.
Mobiel: Preload het font niet vanwege de netwerkconcurrentie. Gebruik font-display: swap voor een snellere weergave van tekst. Deze aanpak toont onmiddellijk fallback fonts terwijl het aangepaste font op de achtergrond verder laadt, 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 <link> tag van de HTML 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 */
    @media (min-width: 767px) {
      @font-face {
        font-display: optional;
      }
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

De voordelen van deze aanpak

Focus op Desktop UX: Desktop rendert onmiddellijk met het webfont, wat FOUT of FOIT voorkomt.
Focus op mobiele performance: font-display: swap zorgt ervoor dat gebruikers de 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 in de introductie verteld: 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 doordat de gestileerde fonts vrijwel onmiddellijk verschenen.
Mobiel: Snellere First Contentful Paint en Largest Contentful Paint zorgden voor een snelle user experience, zelfs op tragere verbindingen.