In den vorherigen Modulen haben Sie erfahren, wie Sie HTML-, CSS-, JavaScript- und Media-Ressourcen optimieren. In diesem Modul stellen wir Ihnen einige Methoden zur Optimierung von Webschriftarten vor.
Webschriftarten können sich sowohl auf die Ladezeit als auch auf die Renderingzeit der Seite auswirken.
Das Herunterladen großer Schriftartdateien kann einige Zeit dauern und sich negativ auf First
Contentful Paint (FCP) auswirken. Ein falscher font-display value kann zu
unerwünschten visuellen Rendering-Verschiebungen führen.
Bevor wir uns mit der Optimierung von Webschriftarten befassen, ist es hilfreich zu wissen, wie sie vom Browser erkannt werden. So können Sie nachvollziehen, wie CSS in bestimmten Situationen das Abrufen unnötiger Webschriftarten verhindert.
Discovery
Die Webschriftarten 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");
}
Das oben gezeigte Code-Snippet definiert eine font-family namens "Open Sans" und
teilt dem Browser mit, wo er die entsprechende Webschriftart-Ressource findet. Um Bandbreite zu sparen, lädt der Browser die Webschriftart erst herunter, wenn festgestellt wurde, dass sie für das Layout der aktuellen Seite benötigt wird.
h1 {
font-family: "Open Sans";
}
Im oben gezeigten CSS-Snippet lädt der Browser die "Open Sans" Schriftartdatei
herunter, während er ein <h1> Element im HTML der Seite parst.
preload
Wenn Ihre @font-face-Deklarationen in einem externen Stylesheet definiert sind, kann der Browser erst mit dem Herunterladen beginnen, nachdem er das Stylesheet heruntergeladen hat.
Dadurch werden Webschriftarten erst spät erkannt. Es gibt jedoch Möglichkeiten, dem Browser zu helfen, Webschriftarten früher zu erkennen.
Mit der preload-Anweisung können Sie eine frühe Anfrage für Webschriftart-Ressourcen initiieren. Die preload-Anweisung sorgt dafür, dass Webschriftarten frühzeitig beim Seitenaufbau erkannt werden. Der Browser beginnt sofort mit dem Herunterladen, ohne auf das Herunterladen und Parsen des Stylesheets zu warten. 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="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Inline-@font-face-Deklarationen
Sie können dafür sorgen, dass Schriftarten früher beim Seitenaufbau erkannt werden, indem Sie Rendering-blockierendes CSS, einschließlich der @font-face Deklarationen, in den <head> von Ihrem HTML mit dem <style> Element einfügen. In diesem Fall erkennt der Browser Webschriftarten früher beim Seitenaufbau, da er nicht auf das Herunterladen eines externen Stylesheets warten muss.
Das Inline-Einfügen 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 vermieden, dass nicht verwendete Schriftarten heruntergeladen werden.
Herunterladen
Nachdem der Browser Webschriftarten erkannt und festgestellt hat, dass sie für das Layout der aktuellen Seite benötigt werden, kann er sie herunterladen. Die Anzahl der Webschriftarten, ihre Codierung und ihre Dateigröße können sich erheblich darauf auswirken, wie schnell eine Webschriftart vom Browser heruntergeladen und gerendert wird.
Webschriftarten selbst hosten
Webschriftarten können über Drittanbieterdienste wie Google Fonts bereitgestellt oder auf Ihrem Ursprung selbst gehostet werden. Wenn Sie einen Drittanbieterdienst verwenden, muss Ihre Webseite eine Verbindung zur Domain des Anbieters herstellen, bevor sie die erforderlichen Webschriftarten herunterladen kann. Dies kann die Erkennung und das anschließende Herunterladen von Webschriftarten verzögern.
Dieser Overhead kann mit dem Ressourcenhinweis preconnect reduziert werden. Mit preconnect können Sie den Browser anweisen, eine Verbindung zum Ursprung früher herzustellen, als er es normalerweise tun würde:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Das oben gezeigte HTML-Snippet weist den Browser an, eine Verbindung zu
fonts.googleapis.com und eine CORS Verbindung zu fonts.gstatic.com herzustellen. Einige Schriftartanbieter wie Google Fonts stellen CSS- und Schriftartressourcen von verschiedenen Ursprüngen bereit.
Sie können eine Drittanbieterverbindung vermeiden, indem Sie Ihre Webschriftarten selbst hosten. In den meisten Fällen ist das Selbsthosting von Webschriftarten schneller als das Herunterladen von einem Ursprung. Wenn Sie Webschriftarten 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 Webschriftarten 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 unterteilen
Webschriftarten enthalten in der Regel eine Vielzahl verschiedener Glyphen, die benötigt werden zur Darstellung der vielen Zeichen, die in verschiedenen Sprachen verwendet werden. Wenn Ihre Seite Inhalte nur in einer Sprache bereitstellt oder nur ein Alphabet verwendet, können Sie die Größe Ihrer Webschriftarten durch Unterteilung reduzieren. Dies geschieht häufig durch Angabe einer Anzahl oder eines Bereichs vonUnicode-Codepunkten.
Ein Subset ist eine reduzierte Menge der Glyphen, die in der ursprünglichen Webschriftartdatei enthalten waren. Anstatt alle Glyphen bereitzustellen, kann Ihre Seite beispielsweise ein bestimmtes Subset für lateinische Zeichen bereitstellen. Je nach benötigtem Subset kann das Entfernen von Glyphen die Größe einer Schriftartdatei erheblich reduzieren.
Einige Webschriftartanbieter wie Google Fonts bieten Subsets automatisch durch Verwendung eines Abfrageparameter an. Die
https://fonts.googleapis.com/css?family=Roboto&subset=latin URL stellt beispielsweise ein
Stylesheet mit der Webschriftart Roboto bereit, die nur das lateinische Alphabet verwendet.
Wenn Sie sich für das Selbsthosting Ihrer Webschriftarten entschieden haben, müssen Sie diese Subsets selbst mit Tools wie glyphanger oder subfont generieren und hosten.
Wenn Sie jedoch nicht die Möglichkeit haben, Ihre eigenen Webschriftarten selbst zu hosten, können Sie Webschriftarten von Google Fonts unterteilen, indem Sie einen zusätzlichen Abfrageparameter text angeben, der nur die Unicode-Codepunkte enthält, die für Ihre Website erforderlich sind. Wenn Sie beispielsweise eine Webschriftart auf Ihrer Website haben, die nur
eine kleine Anzahl von Zeichen für den Ausdruck „Willkommen“ benötigt, 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 Webschriftartdaten, die für eine einzelne Schriftart auf Ihrer Website benötigt werden, erheblich reduziert werden, wenn eine so extreme Unterteilung auf Ihrer Website sinnvoll ist.
Schriftart-Rendering
Nachdem der Browser eine Webschriftart erkannt und heruntergeladen hat, kann sie gerendert werden. Standardmäßig blockiert der Browser das Rendern von Text, der eine Webschriftart verwendet, bis diese heruntergeladen wurde. Mit der CSS-Eigenschaft font-display können Sie das Textrendering
Verhalten des Browsers anpassen und konfigurieren, welcher Text angezeigt werden soll und welcher nicht, bis die Web
Schriftart vollständig geladen ist.
block
block ist der Standardwert für font-display. Mit block blockiert der Browser das Rendern von Text, der die angegebene Webschriftart verwendet. Verschiedene Browser verhalten sich etwas unterschiedlich. Chromium und Firefox blockieren das Rendering maximal 3 Sekunden lang, bevor sie eine Fallback-Schriftart verwenden. Safari blockiert das Rendering unbegrenzt, bis die Webschriftart geladen wurde.
swap
swap ist der am häufigsten verwendete font-display-Wert. swap blockiert das Rendering nicht und zeigt den Text sofort in einer Fallback-Schriftart an, bevor die angegebene Webschriftart verwendet wird. So können Sie Ihre Inhalte sofort anzeigen, ohne auf das Herunterladen der Webschriftart zu warten.
Der Nachteil von swap ist jedoch, dass es zu einer sichtbaren Verschiebung des Inhalts führt, wenn sich die Fallback-Webschriftart und die in Ihrem CSS angegebene Webschriftart in Bezug auf Zeilenhöhe, Kerning und andere Schriftartmesswerte stark unterscheiden.
Dies führt in der Regel nicht zu einem schlechteren Cumulative Layout Shift (CLS) als bei
block, da bei block die Seite mit den Fallback-Schriftarten gerendert werden muss,
auch wenn der Text selbst nicht angezeigt wird. Daher sind beide von der Verschiebung des Inhalts
betroffen. Es kann jedoch visuell störender sein.
fallback
Der Wert fallback für font-display ist ein Kompromiss zwischen block und swap. Im Gegensatz zu swap blockiert der Browser das Rendern einer Schriftart, verwendet aber nur für kurze Zeit Fallback-Text. Im Gegensatz zu block ist die Blockierungszeit jedoch extrem kurz.
Die Verwendung des Werts fallback kann in schnellen Netzwerken gut funktionieren. Wenn die Webschriftart schnell heruntergeladen wird, wird sie sofort beim ersten Rendern der Seite verwendet. Bei langsamen Netzwerken wird jedoch zuerst der Fallback-Text angezeigt, nachdem die Blockierungszeit abgelaufen ist, und dann wird er ersetzt, wenn die Webschriftart eintrifft.
optional
optional ist der strengste font-display-Wert. Die Webschriftart-Ressource wird nur verwendet, wenn sie innerhalb von 100 Millisekunden heruntergeladen wird. Wenn das Laden einer Webschriftart länger dauert, wird sie auf der Seite nicht verwendet. Der Browser verwendet die Fallback-Schriftart für die aktuelle Navigation, während die Webschriftart im Hintergrund heruntergeladen und im Browsercache platziert wird.
Daher kann die Webschriftart bei nachfolgenden Seitennavigationen sofort verwendet werden, da sie bereits heruntergeladen wurde. font-display: optional vermeidet die visuelle Verschiebung, die bei swap auftritt. Einige Nutzer sehen die Webschriftart jedoch nicht, wenn sie bei der ersten Seitennavigation zu spät eintrifft.
Schriftartdemos
Wissen testen
Wann lädt der Browser eine Webschriftart-Ressource herunter (vorausgesetzt, sie wird nicht
mit einer preload Anweisung abgerufen)?
Welches ist das einzige (und effizienteste) Format, das erforderlich ist, um Web Schriftarten für alle modernen Browser bereitzustellen?
Nächstes Video: JavaScript-Code aufteilen
Nachdem Sie sich mit der Schriftartoptimierung vertraut gemacht haben, können Sie nun zum nächsten Modul übergehen. Dort wird ein Thema behandelt, das das Potenzial hat, den anfänglichen Seitenaufbau für Ihre Nutzer erheblich zu verbessern: das Verzögern des Ladens von JavaScript durch Code-Splitting. So können Sie die Bandbreite und die CPU-Auslastung während der Startphase einer Seite so gering wie möglich halten. In dieser Zeit interagieren Nutzer sehr wahrscheinlich mit der Seite.