Unterstützt von Awesome Motive.
Erfahren Sie mehr in unserem Seahawk-Blog.

Wie stellt man sicher, dass der Text während des Ladens von Webfont in WordPress sichtbar bleibt?

So stellen Sie sicher, dass der Text beim Laden von Webfont in WordPress sichtbar bleibt

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.

Text-bleibt-sichtbar-während-der-Webfont-Ladung-PageSpeed-Insights-Warnung sicherstellen
PageSpeed Insights-Warnung

Wie 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.

font-display-swap-format
Der Austausch der Schriftart wird das FOIT-Problem beheben.

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!

Verwandte Beiträge

In unserer vernetzten Welt ist die Fähigkeit, effektiv in verschiedenen Sprachen zu kommunizieren, noch wichtiger

Die Durchführung eines Usability-Tests für WordPress-Websites ist von entscheidender Bedeutung, denn er liefert unschätzbare Erkenntnisse über

Erweiterte WordPress-Felder sind für Website-Besitzer hilfreich, da sie die Speicherung zusätzlicher Daten und

Komal Bothra 21. März 2024

Die besten Seiten zur Einstellung von WordPress-Entwicklern und -Designern im Jahr 2024

Wenn Sie auf der Suche nach dem besten WordPress-Entwickler oder einem Experten für WordPress-Websites sind

WordPress
Komal Bothra 21. März 2024

Elementor bleibt am Ladebildschirm hängen? Hier sind 25+ Methoden, um es zu beheben!

Elementor vereinfacht den Prozess der Entwicklung von Webseiten in WordPress. Allerdings können Sie gelegentlich auf

WordPress
Komal Bothra 19. März 2024

Wie Sie Ihre GoDaddy Business E-Mail an Gmail einrichten (einfache Schritte)

Mit mehreren E-Mail-Konten gleichzeitig zu jonglieren, kann überwältigend sein. Wenn Sie in der E-Mail-Flut ertrinken

Tech

Erste Schritte mit Seahawk

Melden Sie sich in unserer App an, um unsere Preise einzusehen und Rabatte zu erhalten.