Schriftarten sind oft große Dateien mit langen Ladezeiten. Einige Browser blenden Text aus, bis die Schriftart geladen wird. Dies führt zu einem Flash of Unvisible Text (FOIT).
So schlägt die Prüfung der Lighthouse-Schriftarten fehl
Lighthouse kennzeichnet alle URLs von Schriftarten, die möglicherweise unsichtbaren Text blinken:
![Screenshot von Lighthouse
Sicherstellen, dass der Text bei der Prüfung der Webfont-Ladevorgänge sichtbar bleibt](https://developer.chrome.google.cn/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=5&hl=de)
So vermeidest du, dass unsichtbarer Text angezeigt wird
Die font-display
API gibt an, wie eine Schriftart innerhalb eines font-face
-Stils angezeigt wird. Mit den folgenden font-display
-Werten wird der Browser angewiesen, eine Systemschrift zu verwenden, wenn die benutzerdefinierte Schriftart nicht bereit ist:
swap
optional
fallback
CSS-Beispiel
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Beispiel für Google Fonts
Fügen Sie den Parameter &display=swap
/&display=optional
/&display=fallback
am Ende der Google Fonts-URL ein:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Layoutverschiebungen durch verzögerte Schriftarten vermeiden
Wenn vorübergehend eine Systemschrift angezeigt wird, wird FOIT durch nicht formatierten Text (FOUT) ersetzt. Dadurch wird FCP&LCP verbessert, da Inhalte früher gerendert werden. FOIT und FOUT haben jedoch beide denselben Einfluss auf CLS, wenn die benutzerdefinierte Schriftart die temporäre Systemschrift ersetzt.
Die CLS-Auswirkungen des Ladens von Schriftarten können durch Vorabladevorgänge in Verbindung mit font-display: optional
abgemildert werden.
Die übermäßige Verwendung von Vorabladevorgängen kann sich jedoch negativ auf die Lastmesswerte auswirken. Wir empfehlen A/B-Tests, um dafür zu sorgen, dass das Vorabladen von Schriftarten nicht zu Leistungseinbußen führt.
Stackspezifische Anleitung
Drupal
Geben Sie @font-display
an, wenn Sie benutzerdefinierte Schriftarten für Ihr Design definieren.
Magento
Geben Sie @font-display
an, wenn Sie benutzerdefinierte Schriftarten definieren.
Ressourcen
- Quellcode für die Prüfung Sicherstellen, dass der Text während des Webfont-Ladevorgangs sichtbar bleibt
- Unsichtbaren Text beim Laden vermeiden
- Schriftleistung mit Schriftarten anpassen
- Webschriftarten vorab laden, um die Ladegeschwindigkeit zu verbessern (Codelab)
- Layoutverschiebungen und Einblendung von unsichtbarem Text (FOIT) verhindern, indem optionale Schriftarten vorab geladen werden