"Ensure text remains visible during webfont load" in Lighthouse oplossen.

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

"Ensure text remains visible during webfont load" in het kort

Web-fonts zijn fonts die niet standaard op een browser aanwezig zijn. Web fonts moeten daarom worden gedownload voordat ze gebruikt kunnen worden. Tijdens het downloaden van een web font zal de tekst op een webpagina tijdelijk verstopt worden totdat het webfont is ingeladen.

Hierdoor lijkt het alsof de pagina minder snel laadt omdat de pagina voor een bezoeker nog niet 'af' is. Dit kan voor een verminderde gebruikers ervaring zorgen. Wanneer je een Lighthouse analyse draait op jouw pagina geeft Lighthouse hier een waarschuwing over "Ensure text remains visible during webfont load".

Los dit op door de font-display waarde van het font aan te passen of door gebruik te maken van een font-loader. Hoe dit werkt vertel ik je in dit artikel.

Ensure text remains visible during webfont load oplossen

Zorg ervoor dat de tekst zichtbaar blijft tijdens het laden van webfonts

Voordat webfonts bestonden zat je als webdesigner vast aan een klein aantal vooraf geïnstalleerde lettertypes. Web fonts geven je de vrijheid om ieder font op een website te kunnen gebruiken. 

Dat klinkt natuurlijk mooi maar webfonts kennen ook nadelen. Ze vertragen het laden van de pagina namelijk op verschillende manieren.

Webfonts zijn meestal grote bestanden, die niet standaard op een computer geïnstalleerd staan. Webfonts moeten daarom eerst worden gedownload voordat ze gebruikt kunnen worden. Tijdens het downloaden van een webfont zal de tekst op een webpagina tijdelijk verstopt worden totdat het webfont is ingeladen. Dat zorgt voor een minder goede gebruikerservaring. Niemand wil namelijk te lang naar een leeg scherm blijven staren.

Op het moment dat het web font is geladen en is gerenderd wordt de 'onzichtbare tekst' door de browser omgeruild door de zichtbare tekst met het nieuwe web font. Dit moment heet de Flash Of Invisible Text (FOIT). Deze FOIT zorgt voor de melding "Ensure text remains visible during web font load"

Ensure text remains visible during webfont load

Laad jij een webfont op jouw pagina en neem je geen voorzorgsmaatregelen om deze Flash Of Invisible Text tegen te gaan? Dan krijg je tijdens het analyseren van de page speed op Lighthouse de melding: "Ensure text remains visible during webfont load". Daarachter staat hoe veel tijd je kunt besparen door tekst wel zichtbaar te maken voordat het webfont is geladen. Voor 1 enkel font is dat al snel 100ms.

Waarom is onzichtbare tekst slecht voor paginasnelheid?

Onzichtbare tekst zal de uiteindelijke gemeten laadtijd van een pagina niet echt vertragen. Waarom vindt Lighthouse het dan toch een probleem? 

Google vindt het belangrijk dat een webpagina een zo goed mogelijke gebruikerservaring geeft. 1 van de elementen die de gebruikerservaring kan verbeteren is het zo snel mogelijk tonen van inhoud op de pagina. Vergelijk de onderstaande 2 filmstrip versies van onze homepage maar eens:

Flash of Invisible TextFOIT met een webfont

No flash of invisible text with display:swapGeen FOIT met een webfont

Zoals je kunt zien zijn de 2 pagina's op precies dezelfde tijd klaar met laden. Toch ziet de laatste versie van de website er voor een bezoeker een stuk beter uit. De bezoeker kan direct beginnen met lezen.

Daarom is het slim om tijdens het laden van een webfont toch al tekst te tonen, niet in het uiteindelijke lettertype maar in een 'fallback' lettertype. Zo krijgt de bezoeker het idee dat jouw pagina wel degelijk supersnel reageert.

Een korte herinnering: FOIT EN FOUT

Voordat we verder gaan is het handig de volgende begrippen goed uit elkaar te kunnen houden. De FOIT en de FOUT. De FOIT staat voor de Flash Of Invisible Text en komt voor wanneer webfonts tijdens het laden niet zichtbaar zijn. Dit kun je ondervangen door een fallback font mee te geven. Wanneer het fallback font wordt vervangen door het webfont spreek je van de FOUT, de Flash Of Unstyled Text.

Webfonts tijdens het laden zichtbaar maken

Er zijn 2 manieren om webfonts tijdens het laden zichtbaar te maken. De eerste is via de CSS font-display waarde en de tweede is door gebruik te maken van een fallback font via een class. Beide methoden hebben voordelen en nadelen. Ik zal ze hieronder bespreken.

Methode 1: Font-display: swap

Font-display is een CSS-descriptor die beschikbaar is bij alle moderne browsers. De font-display descriptor bepaalt hoe een lettertype wordt weergegeven op basis van of en wanneer het is gedownload. Font-display wordt gebruikt in een @font-face rule

Er bestaan verschillende waarden voor font-display. Namelijk block, swap, fallback en optional. Om de FOIT te voorkomen en zo snel mogelijk tekst op het scherm willen zetten gebruik je de 'swap' waarde. 

Zodra we in de font-face regel het font-display: swap waarde instellen, wordt tijdens het laden van de pagina de standaardlettertypen van het systeem gebruikt totdat de webfont zijn geladen. Dit helpt de bezoeker om de tekst op de pagina onmiddellijk te kunnen lezen.

Google fonts

Wanneer je Google-fonts gebruikt kun een simpele '&display=swap' in het stylesheet of embed code de font-display: swap methode gebruiken.  

<!-- via een extern stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<!-- via de import methode -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

Wij zijn overigens geen fan van Google fonts. Het is bijna altijd veel sneller om webfonts zelf te hosten. Dat geeft je meer controle over het 'preloaden' van de fonts, je kunt gebruik maken van de al-bestaande http/2 verbinding en je hoeft geen extra stylesheet te downloaden.

Lokale fonts

Maak je gebruik van lokale fonts (goed zo, dat is een stuk sneller dan Google fonts)? Dan kun je zelf font-display: swap toevoegen aan de font-face rule.

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 font-display: swap
}

Methode 2: Fonts met een class

De tweede manier om fonts zichtbaar te maken tijdens het laden is door met classes te werken. Deze classes worden meestal (maar niet altijd) meegegeven aan het <body> of <html> element.

Het voordeel van deze methode is dat je meer controle hebt over het fallback font en de timing van de Flash Of Unstyled Text.

Deze methode werkt als volgt: in jouw stylesheet geef je aan dat een pagina in eerste instantie met een font (het fallback font) mag worden gerenderd. Daarna laad je via de JavaScript FontFace API of via preloading het webfont in. Nadat dit font is geladen voeg je een class toe aan jouw pagina. Die class zorgt ervoor dat het webfont geactiveerd wordt.

Waarom zou je dat doen vraag je je misschien af? Dit doe je om meer controle te krijgen over het fallback font. Je kunt het fallback font met een grotere regelafstand of een andere grootte laten zien zodat het beter overeenkomt met het webfont. Hierdoor voorkom je layout shifts.

Wanneer je gebruik maakt van meerdere webfonts kun je via de FontFace API-methode alle lettertypes in 1 keer laten switchen. Dat scheelt namelijk flink wat repaints voor een browser. Persoonlijk ben ik geen fan van deze methode. Dit zorgt er namelijk ook voor dat de FOUT pas gebeurt nadat het laatste font is geladen. Dat is dus altijd later dan noodzakelijk.

Font met een class via de FontFace API:

De eerste manier om fonts met een class te gebruiken is via de FontFace API. Je laadt het web font via JavaScript en zodra het font is geladen voeg je een class toe.
<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via een preload link

De tweede methode is via een preload link. Preload het font zoals hieronder staat beschreven en zodra dit is gebeurd switch je de class van het <html> element.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, wordt pas geactiveerd zodra de .fl class wordt toegevoegd aan de html tag
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Extra tips en trucs

  1.  Preload altijd zichtbare fonts. Fonts worden standaard pas gedownload zodra een font wordt gebruikt. Weet je zeker dat je een webfont nodig hebt? Preload het dan zodat het eerder beschikbaar is.
  2. Wil je FOIT en FOUT compleet voorkomen? Gebruik font-display: optional in combinatie met preloading.
  3. Webfonts zelf hosten is altijd sneller dan webfonts via Google fonts of een ander extern CDN.

I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

Ensure text remains visible during webfont load oplossenCore Web Vitals Ensure text remains visible during webfont load oplossen