Optimierung von Webfonts: 6 Schritte zur Beschleunigung Ihrer Website
Martin MichálekAktualisiert 29.9.20255 Minuten LesenDie Welt der Webfonts gleicht einem Schönheitssalon – jeder möchte das Beste erleben, doch kaum jemand ist bereit, auf das Werk des Friseurs zu warten. Und Ihre Besucher? Die sind besonders ungeduldig.
Wenn sich Schriften langsam laden, sehen die Nutzer nicht Ihren sorgfältig ausgewählten Text, sondern lediglich eine leere Seite oder ein unangenehmes Herumspringen des Inhalts. Das lässt Ihren Webauftritt wirken, als hätte ein Friseurlehrling ihn an einem Freitagnachmittag erstellt.
Lassen Sie uns erkunden, wie Webfonts zu einem Vorteil anstatt zu einer Geschwindigkeitsbremse werden können.
Warum sich mit der Schriftoptimierung beschäftigen?
Schriften sind nicht nur eine Frage der Ästhetik. Sie sind digitale Daten, die der Nutzer herunterladen muss, bevor er Ihren Text sieht. Da der Text meist eines der ersten Dinge ist, die Besucher sehen wollen, beeinflussen die Schriften direkt zwei entscheidende Metriken:
-
Ladegeschwindigkeit (LCP) – die Zeit, bis der größte sichtbare Inhalt auf der Seite dargestellt wird. Oft ist das der Text, der auf das Laden der Schrift wartet.
-
Layoutverschiebungen (CLS) – das Maß, in dem der Inhalt während des Ladens „herumspringt“. Wenn die Schrift später als der Rest der Seite geladen wird, kann der Text plötzlich seine Größe ändern und das gesamte Layout durcheinanderbringen.
CLS ist keine seltsame Abkürzung, sondern wie ein elektrischer Schock für den Nutzer, wenn der Text genau in dem Moment springt, in dem er zu lesen beginnt. (Aus unserer Schriftoptimierung für Sazka.cz)
6 Schritte zu Schriften, die Ihre Website nicht verlangsamen
1. WOFF2: das einzige Format, das Sie heute brauchen
Sollten Ihre Schriften noch in veralteten Formaten wie TTF oder EOT durchs Internet reisen, ist es Zeit für ein Upgrade.
WOFF2 bietet bis zu 30 % bessere Komprimierung als ältere Formate und wird von allen modernen Browsern unterstützt.
@font-face {
font-family: 'MeinFont';
src:
url('meinfont.woff2') format('woff2'),
url('meinfont.woff') format('woff'); /* Für Browser aus der Jurazeit */
}
Falls Sie sich um sehr alte Browser sorgen, nutzen Sie auch das WOFF-Format, wie im Codebeispiel gezeigt, notwendig ist es jedoch nicht.
2. Subsetting: Belasten Sie den Nutzer nicht mit Zeichen, die er nie sieht
Die meisten Schriften enthalten Hunderte bis Tausende Zeichen für verschiedene Sprachen. Wenn Ihre Website hauptsächlich tschechischen Text verwendet, warum sollten Sie Besucher zwingen, Unterstützung für Chinesisch oder Arabisch herunterzuladen?
Mit dem Tool Glyphhanger können Sie eine „leichte“ Version der Schrift erstellen, die nur die tatsächlich verwendeten Zeichen enthält. Das Ergebnis? Die Schrift kann bis zu 10× kleiner sein.
Praxisbeispiel: Durch Subsetting und Reduzierung der Schriftstile haben wir das Datenvolumen der Schriftarten auf Trenýrkárna.cz um Hunderte Prozent reduziert. Sie werden es bereits beim ersten Besuch bemerken.
Für mehrsprachige Websites können Sie sprachspezifische Subsets vorbereiten und diese je nach aktueller Seitensprache bedingt laden. Das tun wir übrigens bei PageSpeed.ONE im Rahmen unserer Geschwindigkeitsanalysen.
3. Preload kritischer Schriftarten: Priorität für das, was der Nutzer zuerst sieht
Einige Schriften sind wichtiger als andere. Die Schrift für Überschriften H1 oder Text im ersten sichtbaren Bereich des Bildschirms („above the fold“) verdient ein schnelleres Laden.
Mit der Preload-Anweisung können Sie dem Browser mitteilen: „Das brauche ich so schnell wie möglich“:
<head>
<link rel="preload" href="kritische-schrift.woff2" as="font" type="font/woff2" crossorigin />
</head>
Achtung: Verwenden Sie Preload nur für wirklich kritische Schriftarten. Jeder Preload beansprucht einen Teil des „Geschwindigkeitsbudgets“ Ihrer Website.
4. Schluss mit springendem Text: Beherrschen Sie font-display
Die Eigenschaft font-display bestimmt, wie sich der Browser verhält, wenn er auf das Laden einer Schrift wartet. Ihnen stehen mehrere Optionen zur Verfügung:
-
swap– der Text wird zunächst mit einer Ersatz-Systemschrift angezeigt und nach dem Laden auf die Webschrift umgeschaltet. Schnell, kann aber Springen verursachen (CLS). -
fallback– kurze „Unsichtbarkeitsphase“, dann eine Systemschrift, und falls die Webschrift rechtzeitig geladen wird, wird sie verwendet. -
optional– der Browser entscheidet selbst, ob er die Schrift herunterlädt und verwendet. Geeignet für weniger wichtige Schriften.
@font-face {
font-family: 'MeinFont';
src: url('meinfont.woff2') format('woff2');
font-display: fallback; /* Passen Sie diesen an */
}
Wichtig ist auch, eine geeignete Ersatzschrift zu wählen, die ähnliche Maße wie Ihre Webschrift hat. So minimieren Sie das Springen des Inhalts beim Umschalten.
5. Variable Fonts: eine Datei, die alle beherrscht
Verwenden Sie auf Ihrer Website eine Schrift in drei verschiedenen Stärken? Der traditionelle Ansatz bedeutet, drei verschiedene Dateien herunterzuladen.
Variable Fonts ermöglichen es, mehrere Schnitte in einer Datei zu haben, was die Gesamtgröße der Daten erheblich reduzieren kann.
@font-face {
font-family: 'VariableFont';
src: url('var-font.woff2') format('woff2-variations');
font-weight: 100 900; /* Unterstützter Gewichtsbereich */
}
.fetter-text {
font-weight: 700;
}
.mittlerer-text {
font-weight: 400;
}
6. Was Sie nicht messen, können Sie nicht verbessern
Wie finden Sie heraus, ob Ihre Schriften die Website verlangsamen? Verwenden Sie Lighthouse in den Chrome DevTools oder unser PageSpeed PLUS Monitoring, das Ihnen zeigt, wie sich das Datenvolumen der Schriften entwickelt oder welchen Einfluss die Schriften auf LCP und CLS haben.
Die Geschwindigkeit einer Website ist keine einmalige Angelegenheit. Mit jeder neuen Funktion, jedem Bild oder jeder Schrift kann sie sich verschlechtern. Unser PageSpeed PLUS Monitoring überwacht kontinuierlich die Leistung Ihrer Website und benachrichtigt Sie, wenn sich die Metriken zu verschlechtern beginnen.
In den Chrome DevTools können Sie das Laden von Schriften im Reiter „Network“ überwachen und nach dem Typ „Font“ filtern.
Unterschätzen Sie nicht die Optimierung von Schriften auf Ihrer Website
Schriftoptimierung ist nicht nur eine technische Kleinigkeit – es ist eine Investition in das Nutzererlebnis, SEO und Konversionen.
Mit richtig optimierten Schriften sieht Ihre Website nicht nur großartig aus, sondern lädt auch schnell und bietet allen Besuchern ein reibungsloses Erlebnis, unabhängig davon, welches Gerät oder welche Art von Verbindung sie verwenden.