In diesem Codelab erfahren Sie, wie Sie Web-Schriftarten mit rel="preload" vorab laden, um unformatierten Text 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 + Optionstaste + 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 ausgewählt ist.
- Klicken Sie auf die Schaltfläche Bericht generieren.
Im generierten Lighthouse-Bericht sehen Sie unter Maximale Latenz des kritischen Pfads die Abfolge der Abrufreihenfolge der Ressourcen.
In der obigen Analyse sind die Webfonts 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. Webschriften werden in der Regel mit verzögertem Laden geladen, d. h., sie werden erst geladen, 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 crossorigin-Attribut 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.
Laden Sie die Anwendung neu und führen Sie Lighthouse noch einmal aus. Sehen Sie sich den Abschnitt Maximale Latenz des kritischen Pfads an.
Beachten Sie, dass Pacifico-Bold.woff2 aus der kritischen Anfragekette entfernt wurde. 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.