In den vorherigen Modulen haben Sie gelernt, wie Sie HTML-, CSS-, JavaScript- und Media-Ressourcen optimieren. In diesem Modul werden einige Methoden zur Optimierung von Webfonts vorgestellt.
Webfonts können sich sowohl bei der Ladezeit als auch bei der Rendering-Zeit auf die Seitenleistung auswirken.
Das Herunterladen großer Schriftartdateien kann eine Weile dauern und sich negativ auf First Contentful Paint (FCP) auswirken. Der falsche font-display-Wert kann zu unerwünschten Layoutverschiebungen führen, die zum Cumulative Layout Shift (CLS) einer Seite beitragen.
Bevor wir uns mit der Optimierung von Webfonts befassen, ist es hilfreich zu wissen, wie sie vom Browser erkannt werden. So können Sie nachvollziehen, wie CSS das Abrufen unnötiger Webfonts in bestimmten Situationen verhindert.
Discovery
Die Webfonts einer Seite werden in einem Stylesheet mit einer @font-face-Deklaration definiert:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Im vorherigen Code-Snippet wird ein font-family mit dem Namen "Open Sans" definiert und dem Browser mitgeteilt, wo die entsprechende Webfont-Ressource zu finden ist. Um Bandbreite zu sparen, lädt der Browser die Web-Schriftart erst herunter, wenn festgestellt wird, dass sie für das Layout der aktuellen Seite benötigt wird.
h1 {
font-family: "Open Sans";
}
Im vorherigen CSS-Snippet lädt der Browser die Schriftartdatei "Open Sans" herunter, während er ein <h1>-Element im HTML-Code der Seite parst.
preload
Wenn Ihre @font-face-Deklarationen in einem externen Stylesheet definiert sind, kann der Browser erst mit dem Herunterladen beginnen, wenn er das Stylesheet heruntergeladen hat.
Webfonts werden also erst spät erkannt. Es gibt jedoch Möglichkeiten, dem Browser zu helfen, Webfonts früher zu erkennen.
Mit der Direktive preload können Sie eine frühe Anfrage für Webfont-Ressourcen initiieren. Mit der preload-Anweisung werden Webfonts frühzeitig beim Laden der Seite erkannt und der Browser beginnt sofort mit dem Herunterladen, ohne darauf zu warten, dass das Stylesheet vollständig heruntergeladen und geparst wurde. Die preload-Anweisung wartet nicht, bis die Schriftart auf der Seite benötigt wird.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/https/web.dev/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Inline-@font-face-Erklärungen
Sie können dafür sorgen, dass Schriftarten früher während des Seitenaufbaus erkannt werden, indem Sie das rendern-blockierende CSS, einschließlich der @font-face-Deklarationen, im <head> Ihres HTML-Codes mit dem <style>-Element inline einfügen. In diesem Fall erkennt der Browser Webfonts früher beim Laden der Seite, da er nicht auf den Download eines externen Stylesheets warten muss.
Das Inline-Einbinden von @font-face-Deklarationen hat einen Vorteil gegenüber der Verwendung des preload-Hinweises, da der Browser nur die Schriftarten herunterlädt, die zum Rendern der aktuellen Seite erforderlich sind. So wird das Risiko des Herunterladens nicht verwendeter Schriftarten ausgeschlossen.
Herunterladen
Nachdem Webfonts erkannt wurden und der Browser festgestellt hat, dass sie für das Layout der aktuellen Seite benötigt werden, kann er sie herunterladen. Die Anzahl der Webfonts, ihre Codierung und ihre Dateigröße können sich erheblich darauf auswirken, wie schnell ein Webfont vom Browser heruntergeladen und gerendert wird.
Webschriftarten selbst hosten
Webschriftarten können über Drittanbieterdienste wie Google Fonts bereitgestellt oder auf Ihrem Ursprungsserver selbst gehostet werden. Wenn Sie einen Drittanbieterdienst verwenden, muss Ihre Webseite eine Verbindung zur Domain des Anbieters herstellen, bevor sie die erforderlichen Webfonts herunterladen kann. Dies kann die Erkennung und das anschließende Herunterladen von Webfonts verzögern.
Dieser Overhead kann mit dem Ressourcenhinweis preconnect reduziert werden. Mit preconnect können Sie den Browser anweisen, eine Verbindung zur Cross-Origin-Domain früher als gewöhnlich zu öffnen:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Das obige HTML-Snippet weist den Browser an, eine Verbindung zu fonts.googleapis.com und eine CORS-Verbindung zu fonts.gstatic.com herzustellen. Einige Schriftartenanbieter wie Google Fonts stellen CSS- und Schriftartenressourcen über verschiedene Ursprünge bereit.
Wenn Sie Ihre Webfonts selbst hosten, ist keine Verbindung zu einem Drittanbieter erforderlich. In den meisten Fällen ist das Self-Hosting von Webfonts schneller als das Herunterladen von einer anderen Quelle. Wenn Sie Webfonts selbst hosten möchten, prüfen Sie, ob Ihre Website ein Content Delivery Network (CDN), HTTP/2 oder HTTP/3 verwendet und die richtigen Caching-Header für die Webfonts festlegt, die Sie für Ihre Website benötigen.
Nur WOFF2 verwenden
WOFF2 wird von vielen Browsern unterstützt und bietet die beste Komprimierung – bis zu 30% besser als WOFF. Die reduzierte Dateigröße führt zu kürzeren Downloadzeiten. Das WOFF2-Format ist oft das einzige, das für die vollständige Kompatibilität mit modernen Browsern erforderlich ist.
Webschriftarten in Untergruppen aufteilen
Webfonts enthalten in der Regel eine Vielzahl verschiedener Glyphen, die zur Darstellung der vielen Zeichen benötigt werden, die in verschiedenen Sprachen verwendet werden. Wenn auf Ihrer Seite Inhalte nur in einer Sprache bereitgestellt werden oder nur ein Alphabet verwendet wird, können Sie die Größe Ihrer Webfonts durch Subsetting reduzieren. Dies geschieht häufig durch Angabe einer Zahl oder eines Bereichs von Unicode-Codepoints.
Eine Teilmenge ist eine reduzierte Gruppe der Glyphen, die in der ursprünglichen Webfont-Datei enthalten waren. Anstatt alle Glyphen zu rendern, wird auf Ihrer Seite beispielsweise nur eine bestimmte Teilmenge für lateinische Zeichen gerendert. Je nach benötigter Teilmenge kann die Dateigröße einer Schriftart durch das Entfernen von Glyphen erheblich reduziert werden.
Einige Anbieter von Webschriftarten, z. B. Google Fonts, bieten automatisch Teilmengen über einen Abfragestringparameter an. Über die URL https://fonts.googleapis.com/css?family=Roboto&subset=latin wird beispielsweise ein Stylesheet mit der Web-Schriftart „Roboto“ bereitgestellt, in der nur das lateinische Alphabet verwendet wird.
Wenn Sie sich für das Self-Hosting Ihrer Webfonts entschieden haben, müssen Sie die entsprechenden Teilmengen selbst generieren und hosten. Dazu können Sie Tools wie glyphanger oder subfont verwenden.
Wenn Sie jedoch nicht die Möglichkeit haben, Ihre eigenen Webschriftarten selbst zu hosten, können Sie die von Google Fonts bereitgestellten Webschriftarten einschränken, indem Sie einen zusätzlichen text-Abfrageparameter angeben, der nur die für Ihre Website erforderlichen Unicode-Codepunkte enthält. Wenn Sie beispielsweise eine Web-Schriftart für die Anzeige auf Ihrer Website haben, für die nur eine kleine Anzahl von Zeichen für den Ausdruck „Willkommen“ benötigt wird, können Sie dieses Subset über die folgende URL bei Google Fonts anfordern: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Dadurch kann die Menge der für eine einzelne Schriftart auf Ihrer Website benötigten Webfont-Daten erheblich reduziert werden, wenn ein so extremes Subsetting auf Ihrer Website sinnvoll ist.
Schriftart-Rendering
Nachdem der Browser eine Webfont erkannt und heruntergeladen hat, kann sie gerendert werden. Standardmäßig blockiert der Browser das Rendern von Text, für den eine Web-Schriftart verwendet wird, bis diese heruntergeladen wurde. Mit der CSS-Eigenschaft font-display können Sie das Verhalten des Browsers beim Rendern von Text anpassen und konfigurieren, welcher Text angezeigt werden soll (oder nicht), bis die Webfont vollständig geladen wurde.
block
Der Standardwert für font-display ist block. Mit block blockiert der Browser das Rendern von Text, für den die angegebene Webfont verwendet wird. Verschiedene Browser verhalten sich etwas unterschiedlich. In Chromium und Firefox wird das Rendern bis zu maximal 3 Sekunden blockiert, bevor ein Fallback verwendet wird. Safari blockiert die Seite unbegrenzt, bis die Web-Schriftart geladen wurde.
swap
swap ist der am häufigsten verwendete font-display-Wert. swap blockiert das Rendern nicht und zeigt den Text sofort in einem Fallback an, bevor die angegebene Webschriftart eingefügt wird. So können Sie Ihre Inhalte sofort anzeigen, ohne auf den Download der Web-Schriftart warten zu müssen.
Der Nachteil von swap besteht jedoch darin, dass es zu einem Layoutwechsel kommt, wenn sich die Fallback-Webschriftart und die in Ihrem CSS angegebene Webschriftart in Bezug auf Zeilenhöhe, Kerning und andere Schriftartmesswerte stark unterscheiden. Dies kann sich auf den CLS Ihrer Website auswirken, wenn Sie das preload-Hinweis nicht verwenden, um eine Webfont-Ressource so schnell wie möglich zu laden, oder wenn Sie andere font-display-Werte nicht berücksichtigen.
fallback
Der fallback-Wert für font-display ist ein Kompromiss zwischen block und swap. Im Gegensatz zu swap blockiert der Browser das Rendern einer Schriftart, tauscht aber nur für einen sehr kurzen Zeitraum Fallback-Text ein. Im Gegensatz zu block ist der Sperrzeitraum jedoch extrem kurz.
Die Verwendung des Werts fallback kann in schnellen Netzwerken gut funktionieren, da die Web-Schriftart bei schnellem Download sofort beim ersten Rendern der Seite verwendet wird. Bei langsamen Netzwerken wird jedoch zuerst der Fallback-Text angezeigt, nachdem der Blockierungszeitraum abgelaufen ist. Er wird dann ausgetauscht, wenn die Webfont geladen wird.
optional
optional ist der strengste font-display-Wert. Die Webfont-Ressource wird nur verwendet, wenn sie innerhalb von 100 Millisekunden heruntergeladen wird. Wenn das Laden einer Webfont länger dauert, wird sie auf der Seite nicht verwendet. Der Browser verwendet dann für die aktuelle Navigation die Fallback-Schriftart, während die Webfont im Hintergrund heruntergeladen und im Browsercache gespeichert wird.
Bei nachfolgenden Seitennavigationen kann die Webfont daher sofort verwendet werden, da sie bereits heruntergeladen wurde. font-display: optional vermeidet die Layoutverschiebung, die bei swap auftritt. Einige Nutzer sehen die Web-Schriftart jedoch nicht, wenn sie bei der ersten Seitennavigation zu spät geladen wird.
Schriftart-Demos
Wissen testen
Wann lädt der Browser eine Webfont-Ressource herunter (vorausgesetzt, sie wird nicht mit einer preload-Anweisung abgerufen)?
Welches ist das einzige (und effizienteste) Format, das erforderlich ist, um Webfonts für alle modernen Browser bereitzustellen?
Als Nächstes: JavaScript aufteilen
Nachdem Sie sich mit der Schriftartenoptimierung vertraut gemacht haben, können Sie nun zum nächsten Modul übergehen. Dort wird ein Thema behandelt, das das Potenzial hat, die anfängliche Seitenladezeit für Ihre Nutzer erheblich zu verbessern: das verzögerte Laden von JavaScript durch Code-Splitting. So können Sie die Bandbreite und CPU-Auslastung während der Startphase einer Seite so gering wie möglich halten. In dieser Zeit interagieren Nutzer sehr wahrscheinlich mit der Seite.