Vielleicht haben Sie beim Testen der Geschwindigkeit Ihrer Website die PageSpeed Insights-Warnung "Text bleibt während des Ladens der Webfont sichtbar" gesehen. Es kann sein, dass Ihre Website von Ihrem Browser bereits dargestellt wird, bevor Ihre Webschriftarten vollständig heruntergeladen wurden. Daher können Benutzer Ihren Inhalt erst sehen oder darauf zugreifen, wenn Ihre Webschriftart heruntergeladen wurde. Während dieser Zeit ist die Schrift nicht sichtbar. Dies wird als "Flash of Invisible Text" (FOIT) Problem bezeichnet.
Ein besseres Nutzererlebnis kann dadurch erreicht werden, dass Ihr Text während des Ladevorgangs der Webschriftart weiterhin sichtbar bleibt. Dies hilft, leere Seiten und unerwünschte Änderungen im Layout zu vermeiden.
Inhalt
Umschalten aufWie wirkt sich das Laden von Webschriften auf die Seitenleistung aus?
Es wirkt sich auf folgende Weise aus:
- Auswirkungen auf den PageSpeed Insights Score
- Beeinflusst den Grad der kumulativen Layoutverschiebung
- Bewertungen des ersten und des größten inhaltsreichen Bildes (Core Web Vitals)
- Benutzerfreundlichkeit und Konversionsraten
Das Fehlen von Text wirkt sich auch auf die Nutzererfahrung beim Laden von Webfont aus: Niemand ruft gerne eine Website mit einer leeren Seite auf. In wenigen Sekunden können die Nutzer anhand des Titels und des Textes einer Website erkennen, ob sie die gesuchten Informationen enthält oder nicht.
Es ist wichtig, plötzliche Layoutverschiebungen, die durch Webschriften verursacht werden, zu vermeiden, um die Bewertung der kumulativen Layoutverschiebung zu optimieren und zu verbessern. Wenn Sie sicherstellen, dass Ihr Text während des Ladens sichtbar bleibt, können Sie unerwartete Inhaltsverschiebungen (ohne Benutzerinteraktion) verhindern. Webfonts können Layoutverschiebungen verursachen, wenn unsichtbarer Text beim Laden und Rendern blinkt.
So stellen Sie sicher, dass der Text beim Laden von Web Fonts sichtbar bleibt
Dieser besondere Moment wird als Flash of Invisible Text (FOIT) bezeichnet. Die Fehlermeldung "Stellen Sie sicher, dass der Text während des Ladens von Webfont sichtbar bleibt" erscheint aufgrund dieses FOIT, der für sein Erscheinen verantwortlich ist.
Schriftart-Anzeige: swap
Die Eigenschaft font-display ist ein CSS-Deskriptor, auf den alle modernen Webbrowser zugreifen können. Der font-display-Deskriptor prüft, ob die Schriftart heruntergeladen wurde und wann sie heruntergeladen wurde, um zu entscheiden, wie die Schriftart angezeigt werden soll. Eine Regel, die @font-face verwendet, nutzt zum Beispiel das Attribut font-display.
Es gibt viele verschiedene Variablen für die Darstellung von Schriftarten, darunter Block, Swap, Fallback und Optional. Verwenden Sie den Swap-Wert, um das Auftreten von FOIT zu verhindern, und verwenden Sie den Swap-Wert, um sicherzustellen, dass der Text so schnell wie möglich auf dem Bildschirm erscheint.
Verwenden Sie das Plugin Swap Google Fonts Display in WordPress, um dies zu automatisieren. Elementor hat eine eingebaute Funktion für den Austausch von Google-Schriftarten. Andere Optimierungs-Plugins wie WP Rocket, Flyingpress, Perfmatters bieten dies bereits von Haus aus an.
Um das Laden von Schriften zu beschleunigen, verwenden Sie Preconnects & Preload :
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Dadurch wird auch das CLS reduziert.
Einpacken
In diesem Leitfaden wird erklärt, wie Sie das Problem des unsichtbaren Textblitzes" bei Page Speed Insight beheben können, indem Sie sicherstellen, dass der Text beim Laden von Webfont sichtbar bleibt.
Die Ladezeit einer Seite und die Seitengeschwindigkeit sind wichtige Faktoren für eine gute Nutzererfahrung, und die Behebung dieses Problems kann diese Erfahrung erheblich verbessern. Wenn auf einer Seite nicht alles angezeigt wird, gilt sie als nicht geladen. Um Zeitüberschreitungen zu vermeiden und den Nutzern die gewünschte Ausgewogenheit, Geschwindigkeit und Stabilität zu bieten, müssen Sie daher die Ladezeit der Inhalte auf der Seite verringern.
Beschleunigen Sie die WordPress-Leistung mit unseren WordPress-Site-Optimierungsdiensten!