Core Web Vitals: Wie du die Leistungsprobleme von Web-Schriften vermeidest

Web-Schriftarten bringen Persönlichkeit auf deine Seite, aber sie erhöhen auch das Datenvolumen.

Und wenn deine Schriftarten zu lange zum Laden brauchen, starren die Nutzer auf einen leeren Bildschirm. Noch schlimmer, deine Website könnte instabil wirken, da der Text unerwartet verschoben wird.

Dies schadet auch den Core Web Vitals — den Metriken, die direkt Dein Suchranking und Benutzererlebnis beeinflussen.

Hier zählt jede Millisekunde.

Wie kannst Du Deine Wahl der Web-Schriften beibehalten, ohne die Leistung zu beeinträchtigen?

Lass es uns Schritt für Schritt angehen.

Aber zuerst, was sind genau web-sichere Schriftarten und Web-Schriftarten?

Was Sind Web-Sichere Schriftarten?

Web-sichere Schriftarten sind die bewährten Optionen, die überall funktionieren. Es sind Schriftarten, die die meisten Geräte bereits haben, was bedeutet, dass Du Dich darauf verlassen kannst, dass sie schnell laden.

Hier sind die web-sicheren Schriftarten, die Du verwenden kannst:

• Arial
• Times New Roman
• Verdana
• Trebuchet MS
• Courier
• Impact
• Georgia
• Comic Sans MS

Auch mit begrenzten Auswahlmöglichkeiten kann ein geschickter Designer diese Schriftarten kreativ nutzen.

Aber, websichere Schriftarten werden oft überstrapaziert und verleihen Deiner Website ein „ähnliches“ Gefühl — selbst wenn Du viel Mühe und Geld in das Design der Website gesteckt hast.

Wie machst Du es schöner?

Mit Web-Schriftarten.

Was Sind Web-Schriften?

Web-Schriftarten ermöglichen es dir, von den oft übermäßig genutzten websicheren Schriftarten wegzukommen.

Anstatt auf Schriftarten zu setzen, die auf dem Gerät eines Benutzers verfügbar sind, können Web-Schriftarten von einer externen Quelle wie Google Fonts oder direkt von deinem Server auf das Gerät deines Benutzers (vorübergehend) heruntergeladen werden.

Dies ermöglicht es Dir, jede benutzerdefinierte Schriftart zu verwenden, die zu Deiner Marke oder Deinen Designanforderungen passt.

Wir haben auch die besten Google-Schriften zusammengestellt, um Dir den Einstieg zu erleichtern.

Wenn ein Nutzer Deine Seite besucht, wird die Web-Schriftart vorübergehend heruntergeladen und mithilfe der @font-face-Regel in CSS auf den Text angewendet.

Webfonts verhalten sich dann wie lokale Schriftarten — Sie passen sich automatisch den Bildschirmgrößen an und halten deine Webseite scharf.

Schriften haben sich ebenfalls weiterentwickelt, um effizientere Speicherformate zu haben. Ähnlich wie Bildformate, verfügen Schriften über TTF, WOFF, WOFF2 und EOT.

• Embedded OpenType (EOT): Kompatibel mit älteren Versionen von Internet Explorer (unter IE9). Standardmäßig nicht komprimiert, aber GZIP-Kompression kann angewendet werden.
• TrueType (TTF): Unterstützt von älteren Android-Browsern (unter Version 4.4). Standardmäßig nicht komprimiert, kann aber GZIP-komprimiert werden.
• Web Open Font Format (WOFF): Unterstützt von den meisten modernen Browsern und beinhaltet eingebaute Kompression.
• Web Open Font Format 2 (WOFF2): Kompatibel mit Browsern, die es unterstützen, und bietet spezielle Kompressionsalgorithmen, die die Dateigröße im Vergleich zu anderen Formaten um etwa 30% reduzieren.

Die modernen Formate bieten Komprimierung für eine bessere Leistung und helfen dabei, das Design deiner Website sowohl funktional als auch visuell einzigartig zu halten.

Was Sind Core Web Vitals (CWV) Metriken?

Hier ist die Sache: Google möchte, dass alle seine Nutzer eine ausgezeichnete Erfahrung haben.

Welche Website oder App den Nutzern von Google das beste Erlebnis bietet, wird mehr „Liebe“ von den Algorithmen von Google erhalten.

Und wie wird diese „Erfahrung“ gemessen?

Google hat die Core Web Vitals Anfang 2020 genau zu diesem Zweck eingeführt.

CWV ist ein Set von drei Metriken, das Google zeigt, wie deine Webseite oder App für die Benutzer, die sie dorthin senden, performt.

Höhere Werte bei diesen Kennzahlen können dir helfen, bei Google höher zu ranken. Lass uns diese Kennzahlen schnell durchgehen.

Größter Inhaltlicher Anstrich (LCP)

LCP misst, wie lange es dauert, bis das größte sichtbare Element auf Deiner Seite geladen ist.

Dies ist im Allgemeinen ein Bild oder Video, kann aber auch ein großer Textblock oder ein eingebettetes Video sein.

Je schneller dies passiert, desto besser funktioniert deine Website in den Augen der Nutzer und Suchmaschinen.

Ein guter LCP-Wert bedeutet, dass die Nutzer nicht darauf warten müssen, dass der Hauptinhalt erscheint.

Interaktion Bis Zum Nächsten Anstrich (INP)

INP misst die Zeit zwischen einer Benutzerinteraktion (wie Klicken oder Tippen) und der visuellen Reaktion der Seite.

Es bietet ein genaueres Bild der Interaktivität als FID, da es die gesamte Benutzerreise berücksichtigt und nicht nur die erste Interaktion.

Ein niedriger INP-Wert bedeutet, dass deine Website reaktionsschnell wirkt, was das Benutzerengagement und die Zufriedenheit verbessert.

Kumulative Layoutverschiebung (CLS)

CLS misst, wie stabil deine Seite beim Laden ist.

Wenn Elemente unerwartet herumspringen, frustriert das die Nutzer und lässt die Seite unzuverlässig erscheinen.

Ein niedriger CLS-Wert bedeutet, dass deine Seite reibungslos lädt, ohne Layoutverschiebungen, die das Benutzererlebnis stören.

Wie Du Web-Schriftarten Optimierst Für Bessere Core Web Vitals

Also, worum geht es bei der Leistung von Web-Schriften?

Warum können wir nicht einfach Web-Schriften hinzufügen und es dabei belassen? Nun, Du kannst das.

Aber wie wir bereits besprochen haben, sind Web-Schriften nicht lokal. Sie werden von einem Server abgerufen, heruntergeladen und auf Deiner Website angewendet, und genau dort liegt das Problem.

Es dauert Zeit.

Und wenn es zu lange dauert, beeinflusst es deine Core Web Vitals und Website-Konversionsrate.

Lass uns einige Möglichkeiten betrachten, Web-Fonts zu optimieren, um bessere Core Web Vitals zu erreichen.

1. Schriftarten Vorladen

Du möchtest, dass deine Schriftarten bereit sind, sobald die Seite zu laden beginnt.

Wenn die Seite für den Benutzer bereit ist, ist es auch die Schriftart.

Das nennt man Vorladen.

Preloading sagt dem Browser: „Hey, diese Schriftart ist wichtig. Bitte lade sie sofort.“

Nehmen wir an, Du verwendest die beliebte Google-Schriftart, Roboto.

Du musst deinem HTML-Code ein einzelnes Attribut hinzufügen, um die Schriftart vorzuladen: rel = “preload”

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>

Nach diesem Vorgang weiß der Browser, dass er das Herunterladen von Roboto priorisieren soll, sodass dein Text schneller mit der richtigen Schriftart angezeigt wird.

Dies reduziert die Zeit, die es dauert, bis der größte Textblock (LCP) gerendert wird, sodass die Nutzer schneller die endgültige Version deiner Website sehen.

2. Steuere Das Laden Von Schriften Mit Der Font-Display-Eigenschaft

Allerdings könnte das Vorladen die anfängliche Ladezeit ein wenig erhöhen, da den Schriftarten Priorität eingeräumt wird.

Die font-display Eigenschaft ermöglicht es dir zu steuern, wie sich dein Text verhält, während benutzerdefinierte Schriften noch geladen werden.

Dies kann dir helfen, das gefürchtete Flash of Invisible Text (FOIT), bei dem Nutzer leere Flächen sehen, und das Flash of Unstyled Text (FOUT), bei dem die Seite kurzzeitig mit Ersatzschriftarten erscheint und sofort auf benutzerdefinierte Schriftarten wechselt, zu vermeiden.

Die font-display Eigenschaft bietet vier Möglichkeiten, das Textverhalten zu steuern: block, swap, fallback und optional.

Lass uns die beiden anschauen, die Du benötigen würdest.

font-display: swap — Diese Option ist die sicherste Wahl für die meisten Websites. Sie stellt sicher, dass Text sofort mit einer Ersatzschriftart erscheint und wechselt zur benutzerdefinierten Schriftart, sobald diese verfügbar ist.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: swap;
}

Hier wird die Ersatzschriftart (wie Arial oder eine andere Systemschriftart) sofort geladen, was die Seite lesbar hält.

Wenn Roboto heruntergeladen wird, ersetzt es die Ersatzschriftart, ohne einen leeren Platz auf dem Bildschirm zu hinterlassen.

Hier ist eine Demo davon, wie sich font-display swap in der realen Welt verhält.

font-display: optional — Wenn Dir die Geschwindigkeit wichtig ist, gibt dies dem Browser den Befehl, die benutzerdefinierte Schriftart zu überspringen, falls sie nicht schnell genug geladen wird. Das funktioniert, wenn es Dir nichts ausmacht, dass das Ersatzschriftbild bestehen bleibt.

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
  font-display: optional;
}

Diese Option macht Sinn, wenn die Leistung wichtiger ist als das Design, was sie perfekt für eine Website macht, bei der alles um Geschwindigkeit geht.

Hier ist ein Beispiel dafür, wie das in der realen Welt aussieht. Du wirst den Wechsel hier nicht bemerken, da die meisten Schriftarten schnell genug laden.

Allerdings ist das optionale Argument großartig, falls Dein Schriftserver ausfällt oder langsam wird.

3. Schriftarten Subsetten

Die meisten Schriftarten enthalten hunderte, sogar tausende, von Zeichen.

Wahrscheinlich benötigst Du nur einen kleinen Teil davon. Das Entfernen davon wird als Font-Subsetting bezeichnet.

Das stimmt, Du kannst unnötige Zeichen entfernen, um die Größe der Schriftdatei zu reduzieren.

Nehmen wir an, deine Website benötigt nur englische Zeichen.

Ein Werkzeug wie FontTools kann dir helfen, deine Schriftart so zu unterteilen, dass nur die Zeichen enthalten sind, die du tatsächlich verwenden wirst.

Dies bedeutet, dass alle Unicode-Zeichen, die in der englischen Sprache nicht notwendig sind, entfernt werden können, um die Dateigröße zu sparen.

Dies reduziert die Dateigröße von beispielsweise 80 KB auf 30 KB.

Kleinere Dateien bedeuten schnellere Downloads, was sowohl LCP als auch CLS verbessert, da die Schriftart schnell lädt und das Layout nicht verschiebt.

Hier ist ein Beispiel, wie Du alles außer englischen Zeichen mit FontTools entfernen würdest:

pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F

Jetzt enthält deine Roboto-Schriftart nur die grundlegenden lateinischen Zeichen, die für englischen Text benötigt werden, wodurch sie viel schneller geladen wird.

Wenn Du eine GUI-basierte Methode bevorzugst, kannst Du auch font-squirrel ausprobieren. Sobald Du eine Schriftdatei hochgeladen hast, erhältst Du viele Anpassungsmöglichkeiten zum Hinzufügen oder Entfernen

4. Schriftarten Komprimieren

Moderne Schriftformate wie WOFF2 bieten eine Komprimierung, die die Schriftgröße im Vergleich zu älteren Formaten wie TTF um bis zu 30% reduzieren kann.

Die Verwendung der am stärksten komprimierten Version deiner Schriftart kann deren Auswirkungen auf die Ladezeit der Seite erheblich reduzieren.

Zum Beispiel, hier ist, wie Du sicherstellen kannst, dass Du WOFF2 verwendest:

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2'),
       url('roboto.woff') format('woff');
  font-weight: 400;
}

Auf diese Weise werden Browser, die WOFF2 unterstützen, es standardmäßig verwenden, wodurch Ladezeiten reduziert werden, während weiterhin eine klare, hochwertige Schriftart angezeigt wird.

Allerdings, wenn ein Browser WOFF2 nicht verwenden kann, wird standardmäßig auf WOFF zurückgegriffen.

5. Base64-Codierung

Dies ist eine weitere häufig verwendete Praxis, um Deine Web-Schriftarten zu optimieren.

Allerdings musst Du vorsichtig sein, wann Du Base64-kodierte Schriftarten verwendest.

Base64-Codierung ist am nützlichsten für kleine Schriftarten oder Symbole.

Wenn es jedoch übermäßig verwendet wird, kann das CSS aufgebläht werden, wodurch die Ladezeit der Seite mehr erhöht wird, als nur die Schriftart selbst zu verwenden.

Wenn Du Base64-Codierung für eine Icon-Schriftart verwenden möchtest, müsstest Du zuerst die Schriftartdatei in das Base64-Format konvertieren. So könnte es aussehen:

@font-face {
  font-family: 'CustomIcons';
  src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Diese Methode funktioniert gut für kleine Symbol-Schriften, die Du häufig auf der gesamten Website verwendest.

Die CSS-Datei wird mit der eingebetteten Schriftart geladen, wodurch eine zusätzliche HTTP-Anfrage entfällt.

Allerdings solltest Du dies bei großen Schriftarten vermeiden, da es das erste Rendern der Seite verlangsamen kann.

6. <link> vs. CSS @import für Schriftarten

<link> und @import haben einen erheblichen Unterschied in der Ladeleistung.

Das <link>-Tag lädt Schriftarten asynchron, was bedeutet, dass es den Rest deiner Seite nicht davon abhält, gerendert zu werden, während @import etwas langsamer ist.

Verwende <link> wann immer möglich.

„In über 90% der Fälle möchtest Du wahrscheinlich das <link>-Tag verwenden. Als Faustregel solltest Du @import-Regeln vermeiden, da sie das Laden der eingebundenen Ressource verzögern, bis die Datei abgerufen ist.“ Ilya Grigorik, Ingenieur und technischer Berater des CEO bei Shopify

Es lädt Schriftarten unabhängig, sodass der Rest der Seite geladen wird, ohne auf die Schriftartendatei warten zu müssen.

<link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">

Dies ist die bevorzugte Methode zum Laden von Google Fonts oder ähnlichen externen Schriftartendiensten.

Im <head>-Bereich deines HTML platziert, stellt es sicher, dass die Schriftart frühzeitig geladen wird, ohne andere Ressourcen zu blockieren.

Vermeide @import für wichtige Schriftarten.

@import wartet, bis die CSS-Datei vollständig geladen ist, was die Ladezeit erhöhen und das LCP beeinträchtigen kann.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

Die Verwendung von @import funktioniert nur für sekundäre oder weniger wichtige Schriftarten. Vermeide es für alles auf dem ersten Bildschirm des Inhalts.

7. Reduziere Visuelle Verschiebungen/CLS Durch Schriftanpassung Und Größenanpassung

Visuelle Verschiebungen — oder kumulative Layoutverschiebungen (CLS), wie Google sie nennt — treten auf, wenn sich das Layout unerwartet ändert, oft durch Schriftartenwechsel.

Um diesen Effekt zu minimieren, wähle Fallback-Schriftarten, die dem Stil und den Abmessungen deiner benutzerdefinierten Schriftart ähnlich sind.

Die Eigenschaft CSS size-adjust ermöglicht es Dir auch, die Größe der Ersatzschriftart zu steuern, um visuelle Verschiebungen zu reduzieren, wenn die benutzerdefinierte Schriftart geladen wird.

Wenn deine benutzerdefinierte Schriftart Roboto und eine Ersatzschriftart ist, passe ihre Größe an, um sie mit Roboto abzustimmen, sodass der Übergang nahezu nahtlos ist.

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
}

Hier sorgt Robotos Ersatzschriftart (z. B. Arial) für eine gleichbleibende Größe, wodurch jede spürbare Bewegung reduziert wird, wenn Roboto vollständig geladen ist.

Wenn Du die Größe und den Abstand des Fallbacks mit Deiner benutzerdefinierten Schriftart abgleichst, stellst Du sicher, dass, wenn Roboto Arial ersetzt, die Verschiebung minimal ist, was das CLS niedrig hält und die Benutzererfahrung verbessert.

8. Den Richtigen Ort Zum Hosten Von Web-Schriften Finden

Das Selbsthosten deiner Schriftarten bedeutet nicht immer eine schnellere Leistung.

Viele Drittanbieteroptionen funktionieren ebenfalls gut—und manchmal können sie sogar schneller laden.

Der Web Almanac stellte fest, dass bestimmte Websites mit Schriftarten von Drittanbietern schneller geladen wurden als solche mit selbstgehosteten Schriftarten.

Letztendlich hängt die Schriftleistung weniger von der Hosting-Wahl ab und mehr von drei Schlüsselfaktoren:

• Content Delivery Network (CDN): Sorgt für eine schnellere Auslieferung, indem Schriftarten von verschiedenen Standorten weltweit bereitgestellt werden.
• HTTP/2: Erhöht die Ladegeschwindigkeit, indem mehrere Anfragen parallel bearbeitet werden, wodurch die Latenz reduziert wird.
• Web-Caching-Richtlinie: Speichert Schriftarten effizient, sodass sie nicht bei jedem Besuch neu heruntergeladen werden müssen.

Konzentriere Dich darauf, diese Grundlagen einzurichten, anstatt Dich in der Hosting-Diskussion zu verfangen, damit Deine Schriftarten reibungslos geladen werden, egal wo sie gehostet sind.

Wie Du Die Web-Performance-Optimierung Vereinfachst

Wenn dir die oben genannten Techniken zu aufwendig erscheinen, kann ein Plugin wie Jetpack dies vereinfachen.

Jetpack, entwickelt von Automattic (den Erstellern von WordPress), ist eine All-in-One-Lösung, die speziell für WordPress-Seiten entwickelt wurde.

Es kombiniert wesentliche Funktionen für Sicherheit, Leistung und Marketing, die alle von einer Plattform aus verwaltet werden.

Auch wenn Du nicht technisch versiert bist, kann Jetpack dabei helfen, die Seiten-Geschwindigkeit zu verbessern, die Sicherheit zu stärken und das Benutzererlebnis zu erhöhen. (Keine komplexen Einrichtungen notwendig!)

Schaffe Die Perfekte Balance Zwischen Schönheit Und Leistung

Web-Schriftarten verleihen deiner Seite ein einzigartiges, schönes Aussehen.

Allerdings können sie ohne die richtigen Anpassungen die Seite auch verlangsamen und die Benutzer frustrieren.

Obwohl wir grundlegende Schriftarten-Optimierungstechniken behandelt haben, erfordert die Feinabstimmung der Leistung unzählige technische Details.

Und die besten Ergebnisse zu erzielen, kann überwältigend sein.

Genau hier kommen DreamHosts professionelle Webentwicklungsdienste ins Spiel.

Wir sorgen dafür, dass deine Website schön und optimiert für Geschwindigkeit und Benutzererfahrung ist.

Lass uns die technischen Details übernehmen, während Du Dich darauf konzentrierst, eine Website zu erstellen, die wirklich herausragt.

---

Diese Seite enthält Affiliate-Links. Das bedeutet, dass wir eine Provision verdienen können, wenn Du Dienstleistungen über unseren Link kaufst, ohne dass Dir zusätzliche Kosten entstehen.