Achten Sie darauf, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt

Schriftarten sind oft große Dateien mit langen Ladezeiten. Einige Browser blenden Text aus, bis die Schrift geladen ist. Das führt zu einem Blinken unsichtbaren Texts (FOIT).

Gründe für den Fehler bei der Lighthouse-Prüfung der Schriftdarstellung

Lighthouse meldet alle Schrift-URLs, über die unsichtbarer Text eingeblendet werden kann:

Screenshot der Lighthouse-Prüfung „Aufmerksamkeitselemente sollten beim Laden von Webfonts sichtbar bleiben“

Unsichtbaren Text vermeiden

Die font-display API gibt an, wie eine Schriftart angezeigt wird, wenn sie in einem font-face-Stil verwendet wird. Mit den folgenden font-display-Werten wird der Browser angewiesen, eine Systemschriftart zu verwenden, wenn die benutzerdefinierte Schriftart nicht verfügbar ist:

  • swap
  • optional
  • fallback

CSS-Beispiel

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Beispiel für Google Fonts

Fügen Sie den &display=swap/&display=optional/&display=fallback-Parameter an das Ende Ihrer Google Fonts-URL an:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Layoutverschiebungen durch verzögerte Schriftarten vermeiden

Wenn Sie vorübergehend einen Systemschriftschnitt anzeigen, wird ein FOIT durch einen kurzen Blitz von unformatiertem Text (FOUT) ersetzt. Dadurch werden FCP und LCP verbessert, da Inhalte früher gerendert werden. FOIT und FOUT haben jedoch dieselbe Auswirkung auf CLS, wenn die benutzerdefinierte Schriftart die temporäre Systemschriftart ersetzt.

Die Auswirkungen des Schriftarten-Ladens auf die CLS können mit Preloads in Verbindung mit font-display: optional verringert werden. Eine übermäßige Verwendung von Preloading kann sich jedoch negativ auf die Lademesswerte auswirken. Wir empfehlen, A/B-Tests durchzuführen, um sicherzustellen, dass durch das Vorladen von Schriftarten keine Leistungseinbußen auftreten.

Stackspezifische Anleitung

Drupal

Gib „@font-display“ an, wenn du benutzerdefinierte Schriftarten für dein Design definierst.

Magento

Gib „@font-display“ an, wenn du benutzerdefinierte Schriftarten definierst.

Ressourcen