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

Sørg for, at teksten forbliver synlig under indlæsning af webfonts

Før webfonts eksisterede, var webdesignere begrænset til et lille antal forudinstallerede skrifttyper. Webfonts giver dig friheden til at bruge enhver skrifttype på en hjemmeside. 

Det lyder selvfølgelig godt, men webfonts har også deres ulemper; de gør indlæsningen af siden langsommere på flere måder.

Webfonts er normalt store filer, som ikke er installeret på en computer som standard. Så webfonts skal downloades, før de kan bruges. Mens en webfont downloades, vil teksten på en webside midlertidigt være skjult, indtil webfonten er helt indlæst. Dette giver en dårlig user experience; ingen ønsker at stirre på en tom skærm for længe.

Så snart webfonten er indlæst og gengivet, erstatter browseren den "usynlige tekst" med den endelige tekst med den nye webfont. Dette øjeblik kaldes Flash of Invisible Text (FOIT). Denne FOIT er årsagen til, at fejlmeddelelsen "Ensure text remains visible during webfont load" vises..

Indlæser du en webfont på din side uden at tage forholdsregler for at forhindre denne Flash of Invisible Text? Når du analyserer PageSpeed i Lighthouse, vil følgende meddelelse vises: "Ensure text remains visible during webfont load". Den fortæller dig, hvor meget tid du kunne spare ved at gøre teksten synlig, før webfonten er indlæst. For én enkelt skrifttype er det nemt 100ms.

Hvorfor er usynlig tekst dårligt for sidehastigheden?

Usynlig tekst vil ikke reelt gøre den endelige målte indlæsningstid for en side langsommere. Så hvorfor synes Lighthouse, det er et så stort problem? 

Google mener, det er vigtigt, at en webside giver den bedst mulige user experience. User experience kan forbedres ved at vise indhold på siden så hurtigt som muligt. Sammenlign de to filmstrip-versioner af vores forside nedenfor:

Flash of Invisible Text

Ingen flash of invisible text med display:swap

Som du kan se, blev de to sider færdige med at indlæse på nøjagtig samme tid. Alligevel ser den seneste version af hjemmesiden meget bedre ud for besøgende. Besøgende kan begynde at læse med det samme.

Derfor er det smart at vise tekst alligevel - ikke i den endelige skrifttype, men i en fallback-skrifttype. På denne måde tror den besøgende, at din side virkelig indlæses superhurtigt.

En kort påmindelse: FOIT og FOUT

Før vi går videre, er det nyttigt at skelne mellem følgende begreber: FOIT og FOUT. FOIT står for Flash of Invisible Text og opstår, når webfonts ikke er synlige under indlæsning. Du kan afhjælpe dette ved at inkludere en fallback-skrifttype. Når fallback-skrifttypen erstattes af webfonten, kaldes det FOUT, Flash of Unstyled Text.

Gør webfonts synlige under indlæsning

Der er to måder at gøre webfonts synlige under indlæsning: den første er via CSS font-display-værdien; den anden er ved at bruge en fallback-skrifttype via en klasse. Begge metoder har fordele og ulemper, som jeg vil gennemgå nedenfor.

Metode 1: Font-display:swap

Font-display er en CSS-deskriptor, der er tilgængelig i alle moderne browsere. Font-display-deskriptoren bestemmer, hvordan en skrifttype vises baseret på, om og hvornår den blev downloadet. Font-display bruges i en @font-face-regel. 

Der er forskellige font-display-værdier: block, swap, fallback og optional. Brug swap-værdien for at undgå FOIT og for at få teksten til at vises på skærmen så hurtigt som muligt. 

Når vi sætter font-display: swap-værdien i @font-face-reglen, bruges systemets standardskrifttyper, mens siden indlæses, indtil webfonts er blevet indlæst. Dette hjælper den besøgende med at læse teksten på siden med det samme.

Google fonts

Når du bruger Google fonts, kan du bruge font-display: swap-metoden med et simpelt "&display=swap" i stylesheet'et eller embed-koden.  

<!-- 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>

I øvrigt er vi ikke fans af Google fonts. Det er næsten altid meget hurtigere at hoste webfonts selv. Det giver dig mere kontrol over "preloading"-processen af skrifttyperne. Du kan bruge den allerede eksisterende http/2-forbindelse, og du behøver ikke at downloade et ekstra stylesheet.

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 anden måde at gøre skrifttyper synlige under indlæsning er at arbejde med klasser. Disse klasser tilføjes normalt (men ikke altid) til <body>- eller <html>-elementet.

Fordelen ved denne metode er, at du har mere kontrol over fallback-skrifttypen og timingen af Flash of Unstyled Text.

Denne metode fungerer som følger: Angiv i dit stylesheet, at en side oprindeligt skal gengives med en skrifttype (fallback-skrifttypen). Derefter indlæser du webfonten via JavaScript FontFace API'et eller via preloading. Når denne skrifttype er indlæst, tilføjer du en klasse til din side. Klassen sørger for, at webfonten aktiveres.

Hvorfor skulle du gøre det, spørger du måske? Du gør det for at få mere kontrol over fallback-skrifttypen. Du kan vise fallback-skrifttypen med en større linjeafstand eller en anden størrelse, så den matcher webfonten bedre. Dette forhindrer layout shifts.

Når du bruger flere webfonts, kan du bruge FontFace API-metoden til at skifte alle skrifttyper på én gang. Dette sparer mange browser repaints. Personligt er jeg ikke fan af denne metode; den sikrer, at FOUT finder sted efter den sidste skrifttype er indlæst. Så det er altid senere end nødvendigt.

Skrifttype med en klasse via FontFace API'et:

<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 et preload-link

Den anden metode er via et preload-link. Preload skrifttypen som beskrevet nedenfor. Når dette er gjort, skift klassen på <html>-elementet.

<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>

Ekstra tips og tricks

1.    Preload altid https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? synlige skrifttyper. Skrifttyper downloades ikke som standard, før en skrifttype bruges. Er du sikker på, at du har brug for en webfont? I så fald, preload den, så den er tilgængelig hurtigere.
2. Vil du helt undgå FOIT og FOUT? Brug font-display: optional i kombination med preloading.
3. At hoste webfonts selv er altid hurtigere end webfonts via Google fonts eller et andet eksternt CDN.