Webfonts schneller laden
Schriften gehören oft zu den ersten Dateien, die eine Seite braucht. Diese sieben Maßnahmen sind grob nach Wirkung sortiert, und die meisten dauern nur wenige Minuten.
1. WOFF2 verwenden
Es ist das kleinste gängige Format. Wenn du noch TTF oder OTF ausliefern, ist das hier dein einfachster Gewinn. Nutze den Webfont Generator, um sie zu konvertieren.
2. Nicht benötigte Zeichen entfernen
Viele Schriften enthalten Alphabete, die deine Seite nie anzeigt. Mit dem Font Subsetter behältst du nur die Sprachen, die du auswählst. Prüfe vorher deine Lizenz und behalte jede Sprache, die deine Seite verwendet.
3. Weniger Schriftstärken laden
Jede Strichstärke und Kursivschrift ist eine weitere Datei. Viele Seiten brauchen nur Regular und Bold. Durchsuche dein CSS nach Strichstärken, die du nicht mehr verwendest, und entferne sie.
4. Eine Variable Font in Betracht ziehen
Wenn du drei oder mehr Strichstärken verwendest, kann eine einzelne Variable Font kleiner sein als mehrere statische Dateien. Du kannst sie weiter verkleinern, indem du ihren Strichstärkenbereich im Webfont Generator einengst.
5. Haupt-Font vorladen
Normalerweise findet der Browser eine Schrift erst, nachdem er dein CSS gelesen hat. Mit Preload kann er früher beginnen:
<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>Behalte das Attribut crossorigin bei, auch auf deiner eigenen Domain, sonst wird die Datei möglicherweise zweimal geladen. Lade nur die ein oder zwei Schriften vor, die am Anfang der Seite verwendet werden.
6. font-display setzen
Dies steuert, was Besucher sehen, während eine Schrift lädt. swap zeigt sofort eine Ersatzschrift an, sodass dein Text nie unsichtbar ist. optional verhindert einen späten Wechsel, aber bei langsamen Verbindungen sieht man deine Schrift beim ersten Besuch womöglich gar nicht.
7. Fonts lange cachen
Schriftdateien ändern sich selten, also lass Browser sie speichern. Füge dem Dateinamen eine Version oder einen Hash hinzu und sende dann:
Cache-Control: public, max-age=31536000, immutableErgebnis messen
Teste deine Seite vorher und nachher mit dem Page Speed Test und vergleiche Largest Contentful Paint und Layout-Verschiebungen.
