In diesem Codelab erfahren Sie, wie Sie Webschriftarten mit rel="preload" vorab laden, um unformatierten Text (FOUT) zu entfernen.
Messen
Messen Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild
. - Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien angeklickt ist.
- Klicken Sie auf die Schaltfläche Bericht generieren.
Im erstellten Lighthouse-Bericht sehen Sie die Abrufsequenz der Ressourcen unter Maximale Latenz des kritischen Pfads.
Bei 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 Webschriften (Pacfico und Pacifico-Bold) mit der Regel @font-face definiert und sind die letzte Ressource, die vom Browser in der kritischen Anfragekette abgerufen wird. Normalerweise 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:
Webschriftarten vorab laden
Um FOUT zu vermeiden, können Sie Web-Schriftarten, die sofort benötigt werden, vorab laden. 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 aus einer anderen Domain stammen kann. Ohne dieses Attribut wird die vorab geladene Schriftart vom Browser ignoriert.
Da „Pacifico-Bold“ im Seitenheader verwendet wird, haben wir ein Pre-Load-Tag hinzugefügt, damit es noch schneller abgerufen wird. Es ist nicht wichtig, die Schriftart „Pacifico.woff2“ vorab zu laden, da sie den Text formatiert, der sich unterhalb des sichtbaren Bereichs befindet.
Aktualisieren Sie die Anwendung und führen Sie Lighthouse noch einmal aus. Sehen Sie sich den Abschnitt Maximale Latenz des kritischen Pfads an.
Beachten Sie, wie der Pacifico-Bold.woff2 aus der Kette kritischen Anfragen entfernt wird. Sie wird früher in der Anwendung abgerufen.
Beim Vorabladen weiß der Browser, dass er diese Datei früher herunterladen muss. Hinweis: Bei unsachgemäßer Verwendung kann die Vorab-Ladefunktion die Leistung beeinträchtigen, da unnötige Anfragen für nicht verwendete Ressourcen gesendet werden.