In diesem Codelab erfahren Sie, wie Sie Webschriftarten vorab mit rel="preload" laden, um
Unformatierten Text (FOUT) enthält.
Messen
Messen Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie 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 in der Liste Kategorien das Kästchen Leistung angeklickt ist.
- Klicken Sie auf die Schaltfläche Bericht erstellen.
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 Web-Schriftarten (Pacfico und Pacifico-Bold) mithilfe der Regel @font-face definiert. Sie sind die letzte Ressource, die vom Browser in der Kette kritischer Anfragen 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 sehen Sie die Reihenfolge der in der Anwendung abgerufenen Ressourcen:
Web-Schriftarten vorab laden
Um FOUT zu vermeiden, können Sie Webschriftarten, 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>
Mit den as="font" type="font/woff2"-Attributen wird der Browser angewiesen, diese Ressource als Schriftart herunterzuladen. Dies hilft 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 Header der Seite verwendet wird, haben wir ein Tag zum Vorabladen hinzugefügt, um es noch früher abzurufen. Es ist nicht wichtig, die Schriftart Pacifico.woff2 vorab zu laden, da diese den Text "below the fold" (mit Scrollen sichtbar) formatiert.
Aktualisieren Sie die Anwendung und führen Sie Lighthouse noch einmal aus. Prüfen Sie den Abschnitt Maximale Latenz des kritischen Pfads.
Beachten Sie, wie der Pacifico-Bold.woff2 aus der Kette kritischen Anfragen entfernt wird. Sie wird früher in der Anwendung abgerufen.
Durch das Vorabladen weiß der Browser, dass er diese Datei früher herunterladen muss. Beachten Sie, dass das Vorabladen bei unsachgemäßer Verwendung die Leistung beeinträchtigen kann, da unnötige Anfragen für nicht verwendete Ressourcen gesendet werden.