In diesem Codelab erfahren Sie, wie Sie mit rel="preload" Webschriftarten vorab laden, um Flash-Inhalte ohne Formatierung (FOUT) zu entfernen.
Messen
Analysieren Sie zuerst die Leistung der Website, bevor Sie Optimierungen vornehmen.
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus. - Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem 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 Lighthouse-Bericht wird unter Maximale Latenz des kritischen Pfads die Abrufreihenfolge von Ressourcen angezeigt.
Im obigen Audit sind die Web-Schriftarten Teil der Kette kritischer Anfragen und werden zuletzt abgerufen. Die Kette kritischer Anfragen gibt die Reihenfolge der Ressourcen an, die priorisiert und vom Browser abgerufen werden. In dieser Anwendung werden die Webschriftarten (Pacfico und Pacifico-Bold) mithilfe der Regel @font-face definiert. Sie sind die letzte vom Browser in der Kette kritischer Anfragen abgerufene Ressource. In der Regel werden Webfonts per Lazy Loading geladen, d. h. sie werden erst geladen, wenn die wichtigsten Ressourcen (CSS, JS) heruntergeladen wurden.
So sieht die Reihenfolge der in der Anwendung abgerufenen Ressourcen aus:
Webschriftarten vorab laden
Um FOUT zu vermeiden, können Sie Webschriftarten, die sofort benötigt werden, vorab laden. Fügen Sie am Anfang des Dokuments das Link-Element für diese Anwendung 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 dabei, die Ressourcenwarteschlange zu priorisieren.
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-Fett im Kopfzeilen der Seite verwendet wird, haben wir ein Preload-Tag hinzugefügt, um es noch schneller abzurufen. Es ist nicht wichtig, die Schriftart "Pacifico.woff2" vorab zu laden, da sie den Text "below the fold" (mit Scrollen sichtbar) gestaltet.
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 Pacifico-Bold.woff2 aus der Kette kritischer Anfragen entfernt wird. Sie wird zu einem früheren Zeitpunkt in der Anwendung abgerufen.
Durch das Vorabladen weiß der Browser, dass er diese Datei früher herunterladen muss. Bei unsachgemäßer Verwendung kann das Vorabladen die Leistung beeinträchtigen, da unnötige Anfragen für nicht verwendete Ressourcen gesendet werden.