Lösen Sie "Ensure text remains visible during webfont load" in Lighthouse.

Stellen Sie sicher, dass der Text während des Ladens von Webfonts sichtbar bleibt

Bevor es Webfonts gab, waren Webdesigner auf nur eine kleine Anzahl vorinstallierter Schriftarten beschränkt. Webfonts geben Ihnen die Freiheit, jede Schriftart auf einer Website zu verwenden. 

Natürlich klingt das schön, aber Webfonts haben auch ihre Nachteile; sie verlangsamen die Ladegeschwindigkeit in mehrfacher Hinsicht.

Webfonts sind normalerweise große Dateien, die standardmäßig nicht auf einem Computer installiert sind. Also müssen Webfonts heruntergeladen werden, bevor sie verwendet werden können. Während des Herunterladens eines Webfonts wird der Text auf einer Webseite vorübergehend verborgen, bis das Webfont vollständig geladen ist. Dies sorgt für eine schlechte User Experience; niemand möchte zu lange auf einen leeren Bildschirm starren.

Sobald das Webfont geladen und gerendert ist, ersetzt der Browser den „unsichtbaren Text“ durch den endgültigen Text mit dem neuen Webfont. Dieser Moment wird Flash of Invisible Text (FOIT) genannt. Dieser FOIT verursacht die Fehlermeldung "Ensure text remains visible during webfont load"..

Laden Sie ein Webfont auf Ihre Seite und treffen Sie keine Vorkehrungen, um diesen Flash of Invisible Text zu verhindern? Während Sie die PageSpeed auf Lighthouse analysieren, erscheint folgende Meldung: "Ensure text remains visible during webfont load". Dies sagt Ihnen, wie viel Zeit Sie sparen könnten, indem Sie den Text sichtbar machen, bevor das Webfont geladen ist. Für 1 einzelne Schriftart sind dies leicht 100ms.

Warum ist unsichtbarer Text schlecht für PageSpeed?

Unsichtbarer Text verlangsamt die endgültig gemessene Ladezeit einer Seite nicht wirklich. Also warum sieht Lighthouse das als Problem? 

Google hält es für wichtig, dass eine Webseite die bestmögliche User Experience bietet. Die User Experience kann verbessert werden, indem Inhalte so schnell wie möglich auf der Seite angezeigt werden. Vergleichen Sie die beiden Filmstreifenversionen unserer Homepage unten:

Flash of Invisible Text

Kein Flash of Invisible Text mit display:swap

Wie Sie sehen können, waren die beiden Seiten genau zur gleichen Zeit fertig geladen. Trotzdem sieht die neueste Version der Website für Besucher viel besser aus. Besucher können sofort mit dem Lesen beginnen.

Deshalb ist es klug, Text trotzdem anzuzeigen – nicht in der endgültigen Schriftart, sondern in einer „Fallback“-Schriftart. Auf diese Weise denkt der Besucher, dass Ihre Seite wirklich superschnell lädt.

Eine kurze Erinnerung: FOIT und FOUT

Bevor wir weitermachen, ist es hilfreich, die folgenden Konzepte zu unterscheiden: FOIT und FOUT. FOIT steht für Flash of Invisible Text und tritt auf, wenn Webfonts während des Ladens nicht sichtbar sind. Sie können dies abmildern, indem Sie eine Fallback-Schriftart einbinden. Wenn die Fallback-Schriftart durch das Webfont ersetzt wird, nennt man dies FOUT, Flash of Unstyled Text.

Machen Sie Webfonts während des Ladens sichtbar

Es gibt zwei Möglichkeiten, Webfonts während des Ladens sichtbar zu machen: erstens über den CSS font-display-Wert; zweitens durch Verwendung einer Fallback-Schriftart über eine Klasse. Beide Methoden haben Vor- und Nachteile, die ich unten besprechen werde.

Methode 1: Font-display:swap

Font-display ist ein CSS-Deskriptor, der für alle modernen Browser verfügbar ist. Der font-display-Deskriptor bestimmt, wie eine Schriftart angezeigt wird, basierend darauf, ob und wann sie heruntergeladen wurde. Font-display wird in einer @font-face-Regel verwendet. 

Es gibt verschiedene font-display-Werte: block, swap, fallback und optional. Verwenden Sie den swap-Wert, um FOIT zu vermeiden, und um den Text so schnell wie möglich auf dem Bildschirm erscheinen zu lassen, verwenden Sie den swap-Wert. 

Sobald wir den font-display: swap-Wert in der @font-face-Regel festlegen, werden die Standardschriftarten des Systems verwendet, während die Seite lädt, bis die Webfonts geladen sind. Dies hilft dem Besucher, den Text auf der Seite sofort zu lesen.

Google Fonts

Bei der Verwendung von Google Fonts können Sie die font-display: swap-Methode mit einem einfachen „&display=swap“ im Stylesheet oder Embed-Code verwenden.  

<!-- über ein externes Stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

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

Übrigens sind wir keine Fans von Google Fonts. Es ist fast immer viel schneller, Webfonts selbst zu hosten. Es gibt Ihnen mehr Kontrolle über den „Preloading“-Prozess der Schriftarten. Sie können die bereits bestehende http/2-Verbindung nutzen und müssen kein zusätzliches Stylesheet herunterladen.

Lokale Fonts

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

Methode 2: Fonts mit einer Klasse

Die zweite Möglichkeit, Fonts während des Ladens sichtbar zu machen, besteht darin, mit Klassen zu arbeiten. Diese Klassen werden meist (aber nicht immer) dem <body>- oder <html>-Element hinzugefügt.

Der Vorteil dieser Methode ist, dass Sie mehr Kontrolle über die Fallback-Schriftart und das Timing des Flash of Unstyled Text haben.

Diese Methode funktioniert wie folgt: Geben Sie in Ihrem Stylesheet an, dass eine Seite zunächst mit einer Schriftart (der Fallback-Schriftart) gerendert werden soll. Sie laden dann das Webfont über die JavaScript FontFace API oder über Preloading. Nachdem diese Schriftart geladen ist, fügen Sie Ihrer Seite eine Klasse hinzu. Die Klasse sorgt dafür, dass das Webfont aktiviert wird.

Warum würden Sie das tun, fragen Sie sich vielleicht? Sie tun dies, um mehr Kontrolle über die Fallback-Schriftart zu erhalten. Sie können die Fallback-Schriftart mit einem größeren Zeilenabstand oder einer anderen Größe anzeigen, damit sie besser zum Webfont passt. Dies verhindert Layout Shifts (CLS).

Bei der Verwendung mehrerer Webfonts können Sie die FontFace API-Methode verwenden, um alle Schriftarten auf einmal zu wechseln. Dies spart viele Browser-Repaints. Persönlich bin ich kein Fan dieser Methode; dies sorgt dafür, dass FOUT stattfindet, nachdem die letzte Schriftart geladen wurde. Also ist das immer später als nötig.

Font mit einer Klasse über die FontFace API:

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

  //webfont font mit einer 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>

Über einen Preload-Link

Die zweite Methode ist über einen Preload-Link. Preloaden Sie die Schriftart wie unten beschrieben. Sobald dies erledigt ist, wechseln Sie die Klasse des <html>-Elements.

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

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

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

  //fontface, wird erst aktiviert, sobald die .fl class zum html tag hinzugefügt wird
  @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 Tipps und Tricks

1.    Preloaden Sie immer https://www.corewebvitals.io/de/pagespeed/ensure-text-remains-visible-during-web font-load? sichtbare Fonts. Fonts werden standardmäßig nicht heruntergeladen, bis eine Schriftart verwendet wird. Sicher, dass Sie ein Webfont benötigen? In diesem Fall preloaden Sie es, damit es früher verfügbar ist.
2. Möchten Sie FOIT und FOUT vollständig vermeiden? Verwenden Sie font-display: optional in Kombination mit Preloading.
3. Webfonts selbst zu hosten ist immer schneller als Webfonts über Google Fonts oder ein anderes externes CDN.