Die Verwendung von Schriftarten ist auf den meisten Webseiten weit verbreitet und weist häufig Fehler auf. Viele dieser Fehler wirken sich negativ auf die Webleistung aus. Dieser Artikel soll Informationen zur Verwendung von Webschriftarten bereitstellen und Ihnen dabei helfen, Ihre Webleistung zu verbessern.
Wie in der Hierarchie gezeigt, die beim Rendern einer Webseite angewendet wird, können Schriftelemente das Rendern anderer Elemente verzögern, bis sie geladen sind. Die ordnungsgemäße Verwaltung dieser Verzögerung ist sowohl für den Cumulative Layout Shift (CLS) als auch für die Benutzerwahrnehmung wichtig.
Das Problem mit dem Laden von Schriftarten
Bis die Schriftarten der Seite geladen sind, variiert die Sichtbarkeit der Schriftarten während des HTML- und CSS-Rendering-Prozesses von Browser zu Browser. Hier ist eine Zusammenfassung, wie verschiedene Browser mit dieser Situation umgehen:
| Browser | Standardverhalten, wenn die Schriftart nicht bereit ist … |
|---|---|
| Edge | Verwendet eine Systemschriftart, bis die Schriftart bereit ist. Tauscht die Schriftart aus. |
| Chrome | Blendet den Text bis zu 3 Sekunden lang aus. Wenn der Text noch nicht fertig ist, wird eine Systemschriftart verwendet, bis die Schrift fertig ist. Tauscht die Schrift aus. |
| Firefox | Blendet den Text bis zu 3 Sekunden lang aus. Wenn der Text noch nicht fertig ist, wird eine Systemschriftart verwendet, bis die Schrift fertig ist. Tauscht die Schrift aus. |
| Safari | Blendet Text aus, bis die Schriftart fertig ist. |
Um dieses Problem anzugehen, ohne sich darauf zu verlassen zum Browserverhaltenwurde der Parameter font-display eingeführt. Derzeit unterstützen 92 % der Browser den Parameter font-display.
Was macht Font-Display?
Während des Seitenladevorgangs kann das Erscheinungsbild von Schriftarten je nach Browser variieren, bis sie vollständig geladen sind. Beispielsweise verbergen einige Versionen des Safari-Browsers den Text, bis die Schriftart geladen ist. Die Schriftartanzeige: tauschen Der CSS-Parameter standardisiert dieses Verhalten, indem er den Text mit einer Systemschriftart anzeigt, bis die Schriftdateien geladen sind. Sobald die Schriftarten geladen sind, wird die Systemschriftart durch die gewünschte Schriftart ersetzt. Hier ist ein Anwendungsbeispiel:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Schriftarten vorladen
Verwenden von Das Laden von Schriftarten vor dem kritischen Renderpfad kann Lücken beim Laden der Schriftarten verhindern.
BONUS: Branchenansatz zur Schriftartenverwendung
Schauen wir uns anhand der Daten von SimilarTech einen wichtigen Trend und eine Momentaufnahme der Internetwelt an. Die erste Grafik unten zeigt die Verwendung von Schriftarten auf den Top 10,000 Seiten, und das zweite Diagramm zeigt die Schriftartennutzung auf den Top 100,000 Websites. Lassen Sie uns zunächst diese Grafiken untersuchen:
Es gibt einen 5%igen Unterschied bei der Verwendung von Google Font und Font Awesome zwischen den Top 10,000 Websites und den Top 100,000 Websites. Dies zeigt uns, dass die Top 10,000 Websites ihre Schriftartennutzung optimiert haben. Wir empfehlen, dies als bemerkenswertes Thema zu untersuchen. Überlegen Sie, wie Sie Webfonts mit Ihren eigenen Lösungen implementieren können.
BONUS 2: Nutzungsstatistiken von Google Font und Font Awesome
In Bezug auf den ersten Bonus empfehlen wir, die beiden Grafiken zu untersuchen, die den numerischen Umfang der am häufigsten verwendeten Schriftbibliotheken zeigen. Die Anzahl der eindeutigen Domänen übersteigt hier Millionen, und diese Millionen repräsentieren Ihre SEO-Konkurrenten. Wenn Sie diese Bibliotheken besser und optimaler nutzen als andere, können Sie sich von der Masse abheben.
Wenn Sie diese Tipps befolgen und Ihre Schriftartennutzung optimieren, können Sie Ihre Webleistung und Ihr Benutzererlebnis erheblich verbessern.
