Løs "Ensure text remains visible during webfont load" i Lighthouse.

Sørg for at teksten forblir synlig mens webfonter lastes

Før webfonter eksisterte, var webdesignere begrenset til et lite utvalg forhåndsinstallerte skrifttyper. Webfonter gir deg friheten til å bruke hvilken som helst skrifttype på en nettside. 

Det høres selvfølgelig fint ut, men webfonter har også sine ulemper; de bremser sideinnlastingshastigheten på flere måter.

Webfonter er vanligvis store filer som ikke er installert på en datamaskin som standard. Derfor må webfonter lastes ned før de kan brukes. Mens en webfont lastes ned, vil teksten på en nettside være midlertidig skjult til webfonten er fullstendig lastet. Dette gir en dårlig user experience; ingen ønsker å stirre på en tom skjerm for lenge.

Så snart webfonten er lastet og gjengitt, erstatter nettleseren den "usynlige teksten" med den endelige teksten i den nye webfonten. Dette øyeblikket kalles Flash of Invisible Text (FOIT). Denne FOIT-en er det som forårsaker feilmeldingen "Ensure text remains visible during webfont load"..

Laster du en webfont på siden din uten å ta forholdsregler for å forhindre denne Flash of Invisible Text? Når du analyserer PageSpeed i Lighthouse, vil følgende melding vises: "Ensure text remains visible during webfont load". Denne forteller deg hvor mye tid du kan spare ved å gjøre teksten synlig før webfonten er lastet. For én enkelt skrifttype er dette lett 100ms.

Hvorfor er usynlig tekst dårlig for sidehastighet?

Usynlig tekst vil egentlig ikke bremse den endelige målte lastetiden for en side. Så hvorfor mener Lighthouse at det er et så stort problem? 

Google mener det er viktig at en nettside gir best mulig user experience. User experience kan forbedres ved å vise innhold på siden så raskt som mulig. Sammenlign de to filmstrip-versjonene av hjemmesiden vår nedenfor:

Flash of Invisible Text

Ingen Flash of Invisible Text med display:swap

Som du kan se, ble de to sidene ferdig lastet på nøyaktig samme tid. Likevel ser den nyeste versjonen av nettsiden mye bedre ut for besøkende. Besøkende kan begynne å lese umiddelbart.

Derfor er det smart å vise tekst uansett – ikke i den endelige skrifttypen, men i en fallback-skrifttype. På denne måten tror besøkende at siden din virkelig laster superraskt.

En kort påminnelse: FOIT og FOUT

Før vi går videre, er det nyttig å skille mellom følgende begreper: FOIT og FOUT. FOIT står for Flash of Invisible Text og oppstår når webfonter ikke er synlige under lasting. Du kan redusere dette ved å inkludere en fallback-skrifttype. Når fallback-skrifttypen erstattes av webfonten, kalles det FOUT, Flash of Unstyled Text.

Gjør webfonter synlige under lasting

Det finnes to måter å gjøre webfonter synlige under lasting: den første er via CSS font-display-verdien; den andre er ved å bruke en fallback-skrifttype via en klasse. Begge metodene har fordeler og ulemper, som jeg diskuterer nedenfor.

Metode 1: Font-display:swap

Font-display er en CSS-deskriptor som er tilgjengelig i alle moderne nettlesere. Font-display-deskriptoren bestemmer hvordan en skrifttype vises basert på om og når den ble lastet ned. Font-display brukes i en @font-face-regel. 

Det finnes forskjellige font-display-verdier: block, swap, fallback og optional. Bruk swap-verdien for å unngå FOIT, og for å få teksten til å vises på skjermen så raskt som mulig, bruk swap-verdien. 

Når vi setter font-display: swap-verdien i @font-face-regelen, brukes systemets standardskrifttyper mens siden lastes til webfontene er ferdig lastet. Dette hjelper besøkende med å lese teksten på siden umiddelbart.

Google fonts

Når du bruker Google fonts, kan du bruke font-display: swap-metoden med en enkel "&display=swap" i stilarket eller innbyggingskoden.  

<!-- via et eksternt stilark -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via import-metoden -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

For øvrig er vi ikke fans av Google fonts. Det er nesten alltid mye raskere å hoste webfonter selv. Det gir deg mer kontroll over «preloading»-prosessen for skrifttypene. Du kan bruke den allerede eksisterende http/2-tilkoblingen og trenger ikke laste ned et ekstra stilark.

Lokale skrifttyper

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

Metode 2: Skrifttyper med en klasse

Den andre måten å gjøre skrifttyper synlige under lasting er å arbeide med klasser. Disse klassene legges vanligvis (men ikke alltid) til <body>- eller <html>-elementet.

Fordelen med denne metoden er at du har mer kontroll over fallback-skrifttypen og tidspunktet for Flash of Unstyled Text.

Denne metoden fungerer slik: Angi i stilarket at en side først skal gjengis med en skrifttype (fallback-skrifttypen). Deretter laster du webfonten via JavaScript FontFace API eller via preloading. Etter at denne skrifttypen er lastet, legger du til en klasse på siden din. Klassen sørger for at webfonten aktiveres.

Hvorfor skulle du gjøre det, tenker du kanskje? Du gjør dette for å få mer kontroll over fallback-skrifttypen. Du kan vise fallback-skrifttypen med større linjeavstand eller en annen størrelse slik at den matcher webfonten bedre. Dette forhindrer layout shifts.

Når du bruker flere webfonter, kan du bruke FontFace API-metoden til å bytte alle skrifttyper på en gang. Dette sparer mange nettleser-repaints. Personlig er jeg ikke fan av denne metoden; dette sørger for at FOUT skjer etter at den siste skrifttypen er lastet. Så det er alltid senere enn nødvendig.

Skrifttype med en klasse via FontFace API:

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

  //webfont med 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'
});

// ikke vent på rendertreet, start en umiddelbar henting!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via en preload-lenke

Den andre metoden er via en preload-lenke. Forhåndslast skrifttypen som beskrevet nedenfor. Når dette er gjort, bytt klassen til <html>-elementet.

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

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

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

  //fontface, aktiveres først når .fl-klassen legges til html-taggen
  @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>

Ekstra tips og triks

1.    Forhåndslast alltid https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? synlige skrifttyper. Skrifttyper lastes ikke ned som standard før en skrifttype er i bruk. Er du sikker på at du trenger en webfont? I så fall, forhåndslast den slik at den er tilgjengelig raskere.
2. Vil du unngå FOIT og FOUT helt? Bruk font-display: optional i kombinasjon med preloading.
3. Å hoste webfonter selv er alltid raskere enn webfonter via Google fonts eller en annen ekstern CDN.