Sichtbarer Text beim Laden

Silktide prüft, ob Ihr Text lesbar bleibt, während benutzerdefinierte Schriften heruntergeladen werden. Manche Schrift-Setups veranlassen Browser, Text vollständig zu verbergen, bis die Schriftdatei ankommt – Besucher sehen dann eine Seite ohne Worte.

Warum das wichtig ist

Schriftdateien sind oft groß, und während eine heruntergeladen wird, kann ein Browser, dem nichts anderes vorgegeben wurde, den in dieser Schrift gesetzten Text unsichtbar darstellen. Bei einer langsamen Verbindung kann dieser „Flash of Invisible Text“ Sekunden dauern: Die Seite wirkt geladen – Bilder und Layout sind vorhanden –, sagt aber nichts. Besucher können nicht lesen, und textbasierte Aktionen wie die Navigation fehlen faktisch.

Das Frustrierende ist, dass der Text bereits vorhanden ist. Eine Zeile pro Schrift weist den Browser an, ihn in einer Ersatzschrift darzustellen, bis die benutzerdefinierte Schrift bereit ist.

So beheben Sie das

Fügen Sie jeder @font-face-Regel font-display: swap hinzu, damit der Text sofort in einer Systemschrift gerendert wird und umschaltet, sobald die benutzerdefinierte Schrift geladen ist:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/* Fallback-Text sofort anzeigen *\/
}

Bei Schriften, die über einen Hosting-Dienst geladen werden, nutzen Sie die entsprechende Option des Dienstes – z. B. einen display=swap-Parameter in der Stylesheet-URL – oder den aktuellen Einbettungscode, der dies in der Regel bereits enthält.
Wählen Sie eine Ersatzschrift mit ähnlichen Proportionen wie Ihre benutzerdefinierte Schrift, damit beim Tausch möglichst wenig Bewegung entsteht – siehe Layout-Verschiebungen.

So testet Silktide dies

Silktide lädt die Seite in einem echten Browser, unter Verwendung des für Ihre Geschwindigkeitstests konfigurierten Gerätetyps, der Verbindungsgeschwindigkeit und des Teststandorts.
Silktide untersucht jede benutzerdefinierte Schrift, die die Seite verwendet, und prüft, ob deren @font-face-Regel den Text während des Ladens sichtbar hält.
Silktide meldet jede Schriftdatei, die Text ausblendet, mit einer Schätzung, wie lange der Text unsichtbar blieb.
Silktide bewertet die Seite nach der insgesamt einsparbaren Zeit: Etwa 100 Millisekunden führen zu einer Abwertung, 200 Millisekunden oder mehr gelten als schlecht.

Fehlerbehebung

Die Schrift stammt aus einem Stylesheet eines Drittanbieters

Sie können ein von einem anderen Dienst gehostetes Stylesheet nicht bearbeiten, doch die Lösung liegt meist in der Art der Anforderung: Die meisten Schrift-Dienste akzeptieren eine Anzeigeoption in der URL oder bieten aktualisierten Einbettungscode. Bietet ein Anbieter keine Möglichkeit, dies festzulegen, sollten Sie erwägen, die Schrift selbst zu hosten, damit Sie die Regel kontrollieren.

Ich sehe nie unsichtbaren Text

Wenn die Schrift im Cache ist oder die Verbindung schnell, ist die Lücke zu kurz, um aufzufallen – der Check ist für Erstbesucher auf langsameren Netzwerken relevant. Es gibt auch einen Trade-off, den man kennen sollte: Mit swap sehen diese Besucher kurz die Ersatzschrift. Ein kurzer Schriftwechsel ist fast immer besser als fehlender Text.

Wir verwenden eine Icon-Schrift

Beim Tauschen einer Icon-Schrift erscheinen Platzhalterzeichen anstelle der Icons, was kaputt wirken kann. Speziell für Icon-Schriften ist daher eine kurze Blockierphase (font-display: block) oder das Ersetzen der Schrift durch SVG-Icons oft die bessere Wahl.