In den vorherigen Modulen haben Sie gelernt, wie HTML, CSS, JavaScript und Medienressourcen optimiert werden. In diesem Modul lernen Sie Methoden zur Optimierung von Webschriftarten kennen.
Webschriftarten können die Seitenleistung sowohl beim Laden als auch beim Rendern beeinträchtigen.
Das Herunterladen großer Schriftartdateien kann einige Zeit in Anspruch nehmen und sich negativ auf First Contentful Paint (FCP) auswirken. Ein falscher font-display-Wert kann hingegen zu unerwünschten Layoutverschiebungen führen, die zum Cumulative Layout Shift (CLS) einer Seite beitragen.
Bevor wir uns mit der Optimierung von Webschriftarten befassen, kann es hilfreich sein, zu wissen, wie diese vom Browser erkannt werden. So können Sie verstehen, wie CSS in bestimmten Situationen das Abrufen unnötiger Webschriftarten verhindert.
Discovery-Kampagnen
Die Webschriftarten einer Seite werden in einem Stylesheet mithilfe einer @font-face-Deklaration definiert:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Das vorherige Code-Snippet definiert eine font-family mit dem Namen "Open Sans" und teilt dem Browser mit, wo die jeweilige Webfont-Ressource zu finden ist. Um Bandbreite zu sparen, lädt der Browser die Webschrift erst dann herunter, wenn festgestellt wurde, dass das Layout der aktuellen Seite sie benötigt.
h1 {
font-family: "Open Sans";
}
Im vorherigen CSS-Snippet lädt der Browser die Schriftart "Open Sans" herunter, während ein <h1>-Element im HTML-Code der Seite geparst wird.
preload
Wenn Ihre @font-face-Deklarationen in einem externen Stylesheet definiert sind, kann der Browser erst mit dem Download beginnen, nachdem das Stylesheet heruntergeladen wurde.
Dies führt dazu, dass Webschriftarten erst spät entdeckte Ressourcen entdecken. Es gibt jedoch Möglichkeiten, wie der Browser Webschriftarten schneller erkennen kann.
Mit der Anweisung preload können Sie eine frühzeitige Anfrage nach Ressourcen für Webschriftarten starten. Mit der Anweisung preload werden Webschriftarten schon früh beim Seitenaufbau erkannt und im Browser sofort heruntergeladen, ohne darauf zu warten, dass das Stylesheet heruntergeladen und geparst wurde. Die Anweisung preload 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="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
@font-face-Deklarationen inline einfügen
Wenn Sie Schriftarten früher beim Seitenaufbau sichtbar machen möchten, können Sie CSS-Code, der das Rendering blockiert, einschließlich der @font-face-Deklarationen, in den <head>-Bereich Ihres HTML-Codes mithilfe des <style>-Elements einbinden. In diesem Fall erkennt der Browser Webschriftarten früher beim Laden der Seite, da er nicht auf den Download eines externen Stylesheets warten muss.
Das Einfügen von @font-face-Deklarationen hat einen Vorteil gegenüber dem preload-Hinweis, da der Browser nur die zum Rendern der aktuellen Seite erforderlichen Schriftarten herunterlädt. So vermeiden Sie das Risiko, nicht verwendete Schriftarten herunterzuladen.
Herunterladen
Nachdem Webschriftarten erkannt und sichergestellt haben, dass sie für das Layout der aktuellen Seite benötigt werden, kann der Browser sie herunterladen. Die Anzahl der Webschriftarten, ihre Codierung und ihre Dateigröße können erheblichen Einfluss darauf haben, wie schnell eine Webschrift im Browser heruntergeladen und gerendert wird.
Webschriftarten selbst hosten
Webschriftarten können über Dienste von Drittanbietern wie Google Fonts bereitgestellt oder von Ihrem Ursprungsserver selbst gehostet werden. Wenn Sie einen Drittanbieterdienst verwenden, muss Ihre Webseite eine Verbindung zur Domain des Anbieters herstellen, bevor die erforderlichen Webschriftarten heruntergeladen werden können. Dies kann das Erkennen und anschließende Herunterladen von Webschriftarten verzögern.
Dieser Aufwand kann mithilfe des Ressourcenhinweiss preconnect reduziert werden. Mit preconnect können Sie den Browser anweisen, eine Verbindung zum ursprungsübergreifenden Protokoll 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 vorherige 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 Schriftressourcen unterschiedlicher Herkunft zur Verfügung.
Sie brauchen keine Drittanbieterverbindung, indem Sie Ihre Webschriftarten selbst hosten. In den meisten Fällen sind selbst gehostete Webschriftarten schneller als der ursprungsübergreifende Download. Wenn du Webschriftarten selbst hosten möchtest, achte darauf, dass deine Website ein Content Delivery Network (CDN), HTTP/2 oder HTTP/3 verwendet und die richtigen Caching-Header für die Webschriftarten festlegt, die du für deine Website benötigst.
Nur WOFF2 und WOFF2 verwenden
WOFF2 bietet breite Browserunterstützung und die beste Komprimierung – bis zu 30% besser als WOFF. Die reduzierte Dateigröße führt zu kürzeren Downloadzeiten. Das WOFF2-Format ist häufig das einzige, das für eine vollständige Kompatibilität in modernen Browsern erforderlich ist.
Unterteilen Sie Ihre Webschriftarten.
Webschriftarten enthalten in der Regel eine Vielzahl verschiedener Bildzeichen, die erforderlich sind, um die Vielfalt der in verschiedenen Sprachen verwendeten Zeichen darzustellen. Wenn auf Ihrer Seite Inhalte nur in einer Sprache oder mit einem einzigen Alphabet bereitgestellt werden, können Sie die Größe der Webschriftarten über eine Untereinstellung reduzieren. Dazu wird häufig eine Zahl oder ein Bereich von Unicode-Code-Punkten angegeben.
Eine Teilmenge ist ein reduzierter Satz an Bildzeichen, die in der ursprünglichen Webfont-Datei enthalten waren. Anstatt alle Bildzeichen zu verwenden, stellt Ihre Seite beispielsweise eine bestimmte Teilmenge für lateinische Zeichen bereit. Je nach benötigter Teilmenge kann das Entfernen von Glyphen die Größe einer Schriftartdatei erheblich reduzieren.
Einige Anbieter von Webschriftarten wie Google Fonts bieten Teilmengen automatisch über einen Abfragestringparameter an. Über die URL https://fonts.googleapis.com/css?family=Roboto&subset=latin wird beispielsweise ein Stylesheet mit der Roboto-Webschriftart bereitgestellt, die nur das lateinische Alphabet verwendet.
Wenn Sie Ihre Webschriftarten selbst hosten, besteht der nächste Schritt darin, diese Teilmengen mithilfe von Tools wie Glyphanger oder Subfont selbst zu generieren und zu hosten.
Falls Sie jedoch nicht die Möglichkeit haben, Ihre eigenen Webschriftarten selbst zu hosten, können Sie die von Google Fonts bereitgestellten Webschriftarten teilweise verwenden. Geben Sie dazu einen zusätzlichen text-Abfragestringparameter an, der nur die für Ihre Website erforderlichen Unicode-Codepunkte enthält. Wenn Sie beispielsweise eine Schriftart für das Displaynetzwerk auf Ihrer Website haben, für die nur eine geringe Anzahl von Zeichen für die Wortgruppe „Willkommen“ erforderlich ist, können Sie diese Teilmenge über Google Fonts über die folgende URL anfordern: https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Dadurch kann die Menge an Webschriftarten, die für ein einzelnes Schriftbild auf Ihrer Website benötigt wird, deutlich reduziert werden, falls eine solche extreme Untereinstellung auf Ihrer Website nützlich sein kann.
Schriftdarstellung
Nachdem der Browser eine Webschrift erkannt und heruntergeladen hat, kann sie gerendert werden. Standardmäßig blockiert der Browser das Rendern von Text mit einer Webschriftart, bis er heruntergeladen wird. Sie können das Textrenderingverhalten des Browsers anpassen und festlegen, welcher Text angezeigt bzw. nicht angezeigt werden soll, bis die Webschrift vollständig mit der CSS-Eigenschaft font-display geladen wurde.
block
Der Standardwert für font-display ist block. Mit block blockiert der Browser das Rendern von Text, der die angegebene Webfont verwendet. Verschiedene Browser verhalten sich geringfügig unterschiedlich. Chromium und Firefox blockieren das Rendering bis zu drei Sekunden lang, bevor ein Fallback verwendet wird. Safari wird so lange blockiert, bis die
Webschriftart geladen ist.
swap
swap ist der am häufigsten verwendete font-display-Wert. swap blockiert das Rendering nicht und zeigt den Text sofort in einem Fallback an, bevor er in der angegebenen Webschriftart ersetzt wird. So können Sie Inhalte sofort anzeigen,
ohne auf den Download der Webschriftart warten zu müssen.
Der Nachteil von swap besteht jedoch darin, dass sie zu einer Layoutverschiebung führt, wenn die im CSS angegebene Fallback-Webschriftart und die Webschriftart stark in Bezug auf Zeilenhöhe, Unterschneidung und andere Schriftartmesswerte variieren. Dies kann sich auf die CLS Ihrer Website auswirken, wenn Sie nicht unbedingt den preload-Hinweis verwenden, um eine Ressource für Webschriftarten so schnell wie möglich zu laden, oder wenn Sie keine anderen font-display-Werte berücksichtigen.
fallback
Der Wert fallback für font-display stellt einen Kompromiss zwischen block und swap dar. Im Gegensatz zu swap blockiert der Browser das Rendern einer Schriftart, Fallback-Text wird jedoch nur für sehr kurze Zeit eingefügt. Im Gegensatz zu block ist der Sperrzeitraum jedoch extrem kurz.
Die Verwendung des Werts fallback funktioniert gut in schnellen Netzwerken. Wenn die Webschriftart schnell heruntergeladen wird, wird sie sofort beim anfänglichen Rendering der Seite verwendet. Bei langsamen Netzwerken wird der Fallback-Text jedoch nach Ablauf des Blockierungszeitraums zuerst angezeigt und dann ausgetauscht, wenn die Webschriftart verfügbar ist.
optional
optional ist der strengste font-display-Wert und verwendet die Webfont-Ressource nur, wenn der Download innerhalb von 100 Millisekunden erfolgt. Wenn eine Webschriftart länger dauert, wird sie nicht auf der Seite verwendet. Der Browser verwendet das Fallback-Schriftbild für die aktuelle Navigation, während die Webschriftart im Hintergrund heruntergeladen und in den Browser-Cache abgelegt wird.
Daher kann die Webschriftart bei nachfolgenden Seitennavigationen sofort verwendet werden, da sie bereits heruntergeladen wurde. font-display: optional vermeidet den Layout Shift von swap, aber einige Nutzer sehen die Webschriftart nicht, wenn sie zu spät bei der ersten Seitennavigation eintrifft.
Schriftartendemos
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 Webschriftarten in allen modernen Browsern bereitzustellen?
Nächster Schritt: Code-Split-JavaScript
Sobald Sie ein Verständnis für die Optimierung von Schriftarten haben, können Sie mit dem nächsten Modul fortfahren. Darin geht es um ein Thema, bei dem Sie mit großer Wahrscheinlichkeit die anfängliche Seitenladegeschwindigkeit für Ihre Nutzer verbessern können und das Laden von JavaScript durch Codeaufteilung aufgeschoben wird. Dadurch können Sie die Bandbreite und die CPU-Konflikte während der Startphase einer Seite so gering wie möglich halten. Das ist ein Zeitraum, in dem Nutzer sehr wahrscheinlich mit ihr interagieren.