Webschriftarten vorab laden, um die Ladegeschwindigkeit zu verbessern

Garima Mimani
Garima Mimani
GitHub

In diesem Codelab erfahren Sie, wie Sie Web-Schriftarten mit rel="preload" vorab laden, um das Aufblitzen von unformatiertem Text (Flash of Unstyled Text, FOUT) zu vermeiden.

Messen

Messen Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  5. Klicken Sie auf den Button Bericht generieren.

Im generierten Lighthouse-Bericht wird die Abrufsequenz der Ressourcen unter Maximale Latenz für kritischen Pfad angezeigt.

Webschriftarten sind in der kritischen Anforderungskette vorhanden.

In der obigen Prüfung sind die Webschriftarten Teil der kritischen Anfragekette und werden zuletzt abgerufen. Die Kette kritischer Anfragen stellt die Reihenfolge der Ressourcen dar, die vom Browser priorisiert und abgerufen werden. In dieser Anwendung werden die Web-Schriftarten (Pacfico und Pacifico-Bold) mit der @font-face-Regel definiert und sind die letzte Ressource, die vom Browser in der kritischen Anfragekette abgerufen wird. In der Regel werden Webfonts per Lazy Loading geladen. Das bedeutet, dass sie erst geladen werden, wenn die kritischen Ressourcen (CSS, JS) heruntergeladen wurden.

Hier ist die Reihenfolge der in der Anwendung abgerufenen Ressourcen:

Webfonts werden per Lazy Loading geladen.

Webschriftarten vorab laden

Um FOUT zu vermeiden, können Sie Web-Schriftarten vorab laden, die sofort benötigt werden. Fügen Sie das Link-Element für diese Anwendung am Anfang des Dokuments hinzu:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Die as="font" type="font/woff2"-Attribute weisen den Browser an, diese Ressource als Schriftart herunterzuladen, und helfen bei der Priorisierung der Ressourcenwarteschlange.

Das Attribut crossorigin gibt an, ob die Ressource mit einer CORS-Anfrage abgerufen werden soll, da die Schriftart möglicherweise von einer anderen Domain stammt. Ohne dieses Attribut wird die vorab geladene Schriftart vom Browser ignoriert.

Da Pacifico-Bold im Seiten-Header verwendet wird, haben wir ein Preload-Tag hinzugefügt, um die Schriftart noch früher abzurufen. Die Schriftart Pacifico.woff2 muss nicht vorab geladen werden, da sie den Text unterhalb der „above the fold“-Linie formatiert.

Laden Sie die Anwendung neu und führen Sie Lighthouse noch einmal aus. Sehen Sie sich den Abschnitt Maximale Latenz für kritischen Pfad an.

Die Web-Schriftart Pacifico-Bold wird vorab geladen und aus der kritischen Anfragekette entfernt

Beachten Sie, dass die Pacifico-Bold.woff2 aus der Kette kritischer Anfragen entfernt wurde. Er wird früher in der Anwendung abgerufen.

Die Webschriftart Pacifico-Bold wird vorab geladen.

Mit „preload“ weiß der Browser, dass er diese Datei früher herunterladen muss. Wenn „preload“ nicht richtig verwendet wird, kann dies die Leistung beeinträchtigen, da unnötige Anfragen für nicht verwendete Ressourcen gestellt werden.