So beheben Sie den Fehler „Sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt“ in PageSpeed

Erhalten Sie den Fehler „Stellen Sie sicher, dass Text während des Ladens von Webfonts sichtbar bleibt “, während Sie die Einblicke in die Seitengeschwindigkeit von Google überprüfen, und wissen Sie nicht, wie Sie dieses Problem lösen können? Im Allgemeinen weiß ich, wie man dieses Problem auf einer benutzerdefinierten PHP- oder HTML-basierten Website löst, aber wenn es um WordPress geht, habe ich auch Probleme.

Daher werden wir hier in diesem Leitfaden darüber sprechen, wie wir dieses Problem in WordPress lösen können (ich werde auch die Schritte zur Behebung dieses Problems auf benutzerdefinierten PHP- und HTML-basierten Websites mit Ihnen teilen) und Ihren Seitengeschwindigkeitswert erhöhen, indem Sie diesen Fehler entfernen.

Warum wird in PageSpeed ​​der Fehler „Sicherstellen, dass Text während des Ladens von Webfont sichtbar bleibt“ angezeigt

Beim Testen Ihrer Website mit PageSpeed ​​Insight von Google ist Ihnen möglicherweise ein Problem mit dem Fehler „Sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt“ aufgefallen, und wenn Sie auf den Fehler klicken, werden die vollständigen URLs der Schriftartdateien angezeigt.

Wie Sie im obigen Bild sehen können, erhalte ich auf dieser Website auch den Fehler „Sicherstellen, dass der Text während des Ladens von Webfonts sichtbar bleibt“, und wenn ich darauf klicke , werden die vollständigen URLs der Google Font-Dateien angezeigt.

Warum wird ein Fehler angezeigt?

Wenn eine Website im Browser geladen wird und eine benutzerdefinierte Schriftartdatei erkennt, die auf einen Text angewendet wird, wartet sie, bis die Schriftart heruntergeladen wurde, und bis zu diesem Zeitpunkt ist der Text unsichtbar. Sobald die benutzerdefinierten Schriftartdateien heruntergeladen wurden, werden sie sofort auf die Website angewendet, und dies wird als Flash of Invisible Text bezeichnet.

Wie kann man Flash von unsichtbarem Text reparieren?

Das Beheben des Flashs von unsichtbarem Text kann auch den Fehler „Stellen Sie sicher, dass Text während des Ladens von Webfonts sichtbar bleibt“ auf Ihrer Website beheben, und das Beheben dieses Problems ist sehr einfach.

Sie können dieses Problem leicht beheben, indem Sie hinzufügen

 Schriftanzeige: tauschen;

Code in Ihrem aktuellen

 @Schriftart {

}

CSS-Eigenschaft.

Aber was ist @font-face?

Ein @font-face ist eine einfache CSS-Regel, mit der Sie eine benutzerdefinierte Schriftart auf einen Text anwenden können. Es hat Erweiterungen wie woff2, woff, ttf usw. Ein @font-face-Code sieht beispielsweise so aus:

 @Schriftart {

Schriftfamilie: Roboto, serifenlos;

Schriftanzeige: tauschen; // ---> Dieses Problem wird behoben.

Schriftstil: normal;

Schriftstärke: 400;

Quelle: URL (Roboto.woff2);

}

Jetzt wenden wir diese Schriftart in einem Absatz an mit;

 p {

Schriftfamilie: Roboto, serifenlos;

Schriftgröße: 18px;

}

Wenn eine Website geladen wird, zeigt sie an, dass auf das Absatz-Tag eine „ Roboto “-Schriftart angewendet wurde, und sie beginnt sofort mit dem Herunterladen der in einem Absatz-Tag verwendeten Schriftart. Bis zum Herunterladen der Schriftart bleibt der Text unsichtbar.

Aus diesem Grund zeigt es den Fehler „Stellen Sie sicher, dass der Text während des Ladens von Webfonts sichtbar bleibt “ in Pagespeed und beim Hinzufügen von font-display: swap; in Ihrem aktuellen @font-face- CSS kann dieses Problem lösen.

So beheben Sie dieses Problem in WordPress

Wenn Sie WordPress verwenden und dieser Fehler in der Seitengeschwindigkeitseinsicht angezeigt wird, können Sie dieses Problem mit einfachen Schritten leicht lösen. Ich habe die Schritte zur Behebung dieses Fehlers sowohl für lokale Schriftarten als auch für Google-Schriftarten geteilt.

Lösung für Google Fonts

Anfangs fügt Google Fonts nicht hinzu : font-display: swap; Regel auf ihre Schriftart, aber jetzt unterstützen sie einen neuen Abfrageparameter, um die Schriftartanzeige anzuwenden: swap; durch Hinzufügen des Parameters &display=swap am Ende der Google-Schriftartendatei.

Hier, wie es aussieht;

Wenn Sie ein Theme-Entwickler sind oder wissen, wie man Theme-Dateien in WordPress bearbeitet, können Sie ganz einfach den &display=swap -Parameter in Ihre Google-Schriftartendatei einfügen.

Aber wenn Sie mit der Bearbeitung der WordPress-Designdateien nicht vertraut sind, können Sie immer noch verschiedene Plugins wie Asset CleanUp verwenden , um diesen Parameter hinzuzufügen und das Problem „Sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt“ zu lösen.

So lösen Sie dieses Problem mit dem Plug-in „Asset CleanUp“.

Um den Parameter display=swap in Ihrer Google Fonts-Datei anzuwenden, müssen Sie das Plug-in Asset CleanUp aus der kostenlosen WordPress-Bibliothek herunterladen und installieren.

Sobald Sie das Plugin heruntergeladen und aktiviert haben, klicken Sie in Ihrem WordPress-Admin-Panel auf die Option „ Asset CleanUp “ > und klicken Sie dann auf „ Einstellungen “ unter „Asset Cleanup“, um die Optimierungsseite zu öffnen.

Sobald Sie sich auf der Einstellungsseite befinden, klicken Sie auf die Option „ Google Fonts “. Wenn Sie auf die Option Google Fonts klicken, werden die Einstellungen weiter geöffnet, von wo aus Sie verschiedene Einstellungen zur Optimierung von Google Font-Dateien einfach verwalten können.

Einige dieser Einstellungen können Folgendes umfassen:

Sobald Sie sich in den Einstellungen der Google-Schriftartdateien befinden, ändern Sie die Einstellungen „ Apply font-display: CSS property value “ von „ Do not apply (default) “ in „ Swap (most used) “ und es wird das &display= hinzugefügt Tauschen Sie den Parameter für alle Ihre Google-Schriftartdateien aus.

Lösung für Design- und Plug-in-Fonts

Meistens lädt Ihr WordPress-Theme oder Plugin andere Schriftarten wie Font-Awesome oder Icon-Fonts und zeigt auch das gleiche Problem in Google PageSpeed ​​Insight.

Dies ist ebenfalls eine einfache Lösung, erfordert jedoch ein wenig WordPress-Bearbeitungswissen. Wenn Sie mit der Bearbeitung der Codes nicht vertraut sind, können Sie auch die Premium-Version des Plug-ins „ Asset CleanUp Pro “ verwenden, um die Schriftanzeige automatisch hinzuzufügen: swap; CSS-Eigenschaft in Ihrem WordPress-Theme oder Ihren Plugin-Stylesheets.

Um dieses Problem mit Asset CleanUp Pro zu lösen, klicken Sie in Ihrem WordPress-Admin-Panel auf die Option „ Asset CleanUp “ > und klicken Sie dann auf die „ Einstellungen “ unter „Asset Cleanup“, um die Optimierungsseite zu öffnen.

Sobald Sie sich auf der Seite „ Asset CleanUp “ > „ Einstellungen “ befinden, klicken Sie auf die Option „ Lokale Schriftarten “, um die Anpassungseinstellungen für lokale Schriftarten zu öffnen.

Sobald die Anpassungseinstellungen „ Lokale Schriftarten “ in Ihrem Browser geöffnet wurden, wählen Sie „ Austauschen (am häufigsten verwendet) “ aus der angegebenen Auswahloption unter „ Schriftartanzeige anwenden: CSS-Eigenschaftswert “, um Schriftanzeige automatisch hinzuzufügen: Swap; in allen Ihren Stylesheets.

Einpacken

In diesem Leitfaden haben wir unser Bestes versucht, um zu erklären, wie Sie das Problem „Sicherstellen, dass Text während des Ladens von Webfonts sichtbar bleibt“ oder „Aufblitzen von unsichtbarem Text“ in Pagespeed Insight beheben können.

Seitenladezeit und Seitengeschwindigkeit sind wichtige Faktoren für eine gute Benutzererfahrung, und die Behebung dieses Problems kann eine viel bessere Benutzererfahrung bieten. Und eine Seite gilt nicht als geladen, wenn sie nicht alles darüber anzeigt.

Sie müssen also die Ladezeit für Inhalte auf der Seite reduzieren, damit die Seiten nicht ablaufen und die Benutzer die gewünschte Ausgewogenheit, Geschwindigkeit und Stabilität erhalten. Wenn Sie auch unter langsamer Website-Geschwindigkeit leiden, können Sie unseren Beitrag zur Optimierung der Website-Geschwindigkeit lesen, um sie richtig zu optimieren.