Vor zwei bis drei Jahren wäre der folgende Beitrag allenfalls für einen extrem abgestumpften Frontend-Mitarbeiter interessant gewesen, keinesfalls aber für eine SEO-Frau. Aber die Zeiten ändern sich, und auf der Suche nach einem besseren Ergebnis im Leistungstest müssen Sie Ihr Know-how um neue Tricks erweitern. Insbesondere solche, die nur eine Zeile Code erfordern.
Aus diesem Grund habe ich beschlossen, heute ein paar Worte über eine magische Erfindung der CSS-Sprache zu schreiben: font-display.
Spis treści
Was ist die Schriftart-Anzeige?
Die Schriftartanzeige teilt dem Browser des Besuchers unserer Website mit, was zu tun ist, wenn die von uns angegebene Schriftart nicht heruntergeladen werden kann oder das Herunterladen länger dauert als vorgesehen.
Was hat die Schriftdarstellung mit SEO zu tun?
Während ich vor einigen Jahren noch mit Schaudern vernommen habe, dass „Inhalt König ist“, glaube ich heute selbst, dass „Geschwindigkeit die neue Königin“ ist. Die Möglichkeit, das Verhalten des Browsers zu steuern, erlaubt es uns, das Maximum aus dem Laden der Website herauszuholen, wo es möglich ist, und vernünftig zu sein, wenn die Geschwindigkeit nicht der einzige Faktor ist.
Kurz gesagt: Schriftart-Anzeige = schnelleres Laden = besseres SEO.
Wie gehen Sie dabei vor?
Font-display ist ein @font-face-Deskriptor. Es ist nur eine einzige Codezeile.
Am Beispiel der Schriftart Arvo, die von Google übernommen wurde.
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
Schriftart-Anzeige kann einen der folgenden Werte haben: auto, block, swap, fallback oder optional.
Bevor wir die einzelnen Werte erklären, müssen wir uns mit 2 weiteren Begriffen vertraut machen: Schriftblockdauer und Schrifttauschdauer.
Schriftart Blockperiode
Kurz gesagt handelt es sich um den Moment des Ladens einer Schrift, in dem die Schrift noch nicht heruntergeladen wurde und der Browser stattdessen einen unsichtbaren Füller anzeigt (d. h. er hat Platz für den Text reserviert, zeigt ihn aber nicht an).
Zeitraum des Schrifttausches
Dies ist der Zeitpunkt, zu dem der Browser nach einem möglichen Fehler beim Laden der Schrift eine Ersatzschrift anzeigt (z. B. definiert in font-face oder einfach die Standardschrift des Browsers). Während der Auslagerungsphase wartet der Browser noch darauf, dass die richtige Schriftart geladen wird.
Mögliche Font-Face-Werte
Ich beschreibe die Werte in nicht zufälliger Reihenfolge. Ich beginne mit denjenigen, die man verwenden sollte, wenn man Wert auf eine bestimmte Schriftart und weniger auf die Geschwindigkeit legt, und gehe dann allmählich zum umgekehrten Fall über, bei dem die Geschwindigkeit an erster Stelle steht.
Schriftart-Anzeige: Block
- Sperrzeit ca. 3 s.Wenn die Schriftart nicht geladen wurde, wird zunächst ein leeres Feld angezeigt (bei den meisten Browsern dauert dies etwa 3 Sekunden).
- unendliche Swap-Periode: Der Browser zeigt dann die Ersatzschrift an, während er darauf wartet, dass die richtige Schrift heruntergeladen wird. Ist dies schließlich erfolgreich, wird die Ersatzschriftart durch die richtige Schriftart ersetzt.
Wann ist sie zu verwenden?
Die am wenigsten effiziente Option mit den schlechtesten Auswirkungen auf die Optimierung. Sie ist nur dort sinnvoll, wo die Verwendung einer bestimmten Schriftart unbedingt erforderlich ist.
Schriftart-Anzeige: auto
Wenn Sie font-display auf auto setzen, wird die Schrift so geladen, wie es der Browser standardmäßig tut. Die meisten Browser hingegen laden Schriftarten auf ähnliche Weise wie der obige Befehl font-display: block.
Wann ist sie zu verwenden?
Nicht verwenden 🙂 Nutzen wir die Möglichkeiten, die CSS uns bietet.
Schriftart-Anzeige: Swap
- keine Sperrfrist
- unendliche Swap-Periode: Der Browser zeigt den Text sofort in einer anderen Schriftart an und wartet dann die ganze Zeit, bis die richtige Schriftart heruntergeladen wird. Bei Erfolg wird die Schriftart durch die korrekte Schriftart ersetzt.
Wann ist sie zu verwenden?
Unter dem Gesichtspunkt der Optimierung ist die Lösung so schlecht wie ein Block, aber besser, weil der Text sofort sichtbar ist. Wenn Sie CSS und benutzerdefinierte Schriftarten zur Darstellung Ihres Logos verwenden, ist der Tausch eine gute Option. Verwendung, wenn sowohl Inhalt als auch Aussehen wichtig sind.
font-display: fallback
- ultrakurze Sperrzeit: wenn die Schrift nicht korrekt geladen wird, wird der Text nur für einen Bruchteil einer Sekunde ausgeblendet
- ca. 3 s. Swap-Periode: der Text wird fast sofort in einer Ersatzschrift angezeigt und der Browser wartet nur ca. 3 s auf die richtige Schrift. 3 Sekunden. Wenn die richtige Schriftart nach dieser Zeit nicht geladen wird, unternimmt der Browser keine weiteren Versuche.
Wann ist sie zu verwenden?
Fallback ist eine gute Lösung für den Haupttext, insbesondere für Inhaltsseiten, auf denen wir den Benutzer zum schnellen Lesen anregen wollen und ihn nicht durch spätere Schriftänderungen beim Lesen ablenken wollen.
Schriftart-Anzeige: optional
- ultrakurze Sperrzeit: wenn die Schrift nicht korrekt geladen wird, wird der Text nur für einen Bruchteil einer Sekunde ausgeblendet
- no swap period: Der Text wird mit einer Ersatzschrift angezeigt, der Browser versucht nicht mehr, die richtige Schrift herunterzuladen.
- Darüber hinaus gibt die Option dem Browser die Möglichkeit, die benutzerdefinierte Schriftart nicht zu laden, wenn die Internetverbindung langsam ist oder die Ressourcen begrenzt sind.
Wann ist sie zu verwenden?
Die mit Abstand beste Option in Bezug auf die Optimierung, insbesondere für Nutzer mit langsamen Internetverbindungen. Wird überall dort eingesetzt, wo das Aussehen der Schrift eine untergeordnete Rolle spielt.
Welchen Wert für die Anzeige der Schriftart sollte ich wählen?
Die Antwort ist einfach, wenn Sie wissen, was Sie erreichen wollen. Ich habe beschrieben, was mit Ihren Schriften für jeden dieser Werte geschehen wird – wählen Sie selbst, was Ihnen am wichtigsten ist.
Wenn Sie wertvolle Millisekunden gewinnen wollen und die Frage der Ästhetik für Sie zweitrangig ist, überlegen Sie nicht lange und verwenden Sie die Option. Wenn zum Beispiel Ihre Website ist ein Portfolio, das aussehen muss, wählen Sie einen Block.
