Möglicherweise ist Ihnen beim Testen Ihrer Website-Geschwindigkeit die PageSpeed Insights -Warnung „Stellen Sie sicher, dass der Text während des Ladens der Webfonts sichtbar bleibt“ aufgefallen . Ihre Website kann vom Browser bereits gerendert werden, bevor die Webfonts vollständig heruntergeladen sind. Daher können Nutzer Ihre Inhalte erst sehen oder darauf zugreifen, nachdem die Webfonts geladen wurden. In dieser Zeit sind sie nicht sichtbar. Dieses Problem wird als „ Flash of Invisible Text“ (FOIT) bezeichnet .
Eine bessere Benutzererfahrung lässt sich erzielen, indem sichergestellt wird, dass der Text während des Ladevorgangs der Webfont sichtbar bleibt. Dies hilft, leere Seiten und unerwünschte Layoutänderungen zu vermeiden.
Wie beeinflussen Webfont-Ladezeiten die Seitenleistung?
Es wirkt sich auf folgende Weise aus:
- Auswirkungen auf den PageSpeed Insights-Score
- Beeinflusst die kumulative Layoutverschiebungsnote
- Bewertung von First Contentful Paint und Largest Contentful Paint (Core Web Vitals)
- Nutzererfahrung und Konversionsraten
Das Fehlen von Text beeinträchtigt auch die Benutzerfreundlichkeit beim Laden von Webfonts: Niemand möchte eine Website mit einer leeren Seite besuchen. Innerhalb weniger Sekunden können sich Nutzer anhand des Haupttitels und des Textes einen guten Eindruck davon verschaffen, ob eine Website die gesuchten Informationen enthält.
Um die Bewertung des kumulativen Layout-Shifts (CLSS) zu optimieren und zu verbessern, ist es unerlässlich, plötzliche Layoutverschiebungen durch Webfonts zu vermeiden. Indem Sie sicherstellen, dass Ihr Text während des Ladevorgangs sichtbar bleibt, verhindern Sie unerwartete Inhaltsverschiebungen (ohne Benutzerinteraktion). Webfonts können Layoutverschiebungen verursachen, wenn unsichtbarer Text beim Herunterladen und Rendern kurz aufblitzt.
Wie man sicherstellt, dass der Text beim Laden von Webfonts sichtbar bleibt
Dieser Moment wird als „Blitz des unsichtbaren Textes“ (Flash of Invisible Text, FOIT) bezeichnet. Die Fehlermeldung „Stellen Sie sicher, dass der Text während des Ladens der Webfont sichtbar bleibt“ erscheint aufgrund dieses FOIT, der für ihr Auftreten verantwortlich ist.
Schriftartanzeige: Tausch
Die CSS-Eigenschaft `font-display` ist ein Deskriptor, der in allen gängigen Webbrowsern verfügbar ist. Sie prüft, ob und wann die Schriftart heruntergeladen wurde, um ihre Darstellung zu bestimmen. Beispielsweise verwendet eine Regel, die `@font-face` einbindet, das Attribut `font-display`.
Es gibt verschiedene Optionen zur Darstellung von Schriftarten, darunter Block, Tausch, Fallback und Optional. Verwenden Sie den Tauschwert, um FOIT zu vermeidenund sicherzustellen, dass der Text so schnell wie möglich auf dem Bildschirm erscheint.
Verwenden Sie das -Plugin „Swap Google Fonts Display“, um dies zu automatisieren. Elementor bietet eine integrierte Funktion zum Austauschen von Google-Schriftarten. Andere Optimierungs-Plugins wie WP Rocket, FlyingPress und PerformanceMatters bieten diese Funktion standardmäßig.
Für schnelleres Laden von Schriftarten verwenden Sie preconnects & preload:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
Dies wird auch CLS reduzieren.
Zusammenfassung
Dieser Leitfaden erklärt, wie Sie das Problem des „Aufblitzens unsichtbaren Textes“ in PageSpeed Insights beheben können, indem Sie sicherstellen, dass der Text während des Ladens von Webfonts sichtbar bleibt.
Seitenladezeit und Seitengeschwindigkeit sind wichtige Faktoren für eine gute Nutzererfahrung. Die Behebung dieses Problems kann die Nutzererfahrung deutlich verbessern. Eine Seite gilt als nicht geladen, wenn nicht alle Inhalte angezeigt werden. Um Timeouts zu vermeiden und Nutzern die gewünschte Balance aus Geschwindigkeit und Stabilität zu bieten, muss die Ladezeit der Seiteninhalte verkürzt werden.
Steigern Sie die Leistung Ihrer WordPress- Website mit unseren WordPress-Optimierungsdiensten!
