Webschriftarten optimieren

In den vorherigen Modulen haben Sie gelernt, wie Sie HTML, CSS, JavaScript, und Medienressourcen. In diesem Modul lernen Sie Methoden kennen, Schriftarten.

Webschriftarten können die Seitenleistung sowohl bei der Ladezeit als auch beim Rendern beeinträchtigen. Das Herunterladen großer Schriftartdateien kann eine Weile dauern, was sich negativ auf Erste Contentful Paint (FCP). Der falsche Wert für font-display kann jedoch dazu führen, Unerwünschte Layout Shifts, die zum Cumulative Layout Shift einer Seite beitragen (CLS)

Bevor wir über die Optimierung von Webschriftarten sprechen können, müssen wir wissen, wie sie von Der Browser kann hilfreich sein, um zu verstehen, wie CSS den Fehler verhindert. das Abrufen unnötiger Webschriftarten.

Discovery

Die Webschriftarten einer Seite werden in einem Stylesheet mithilfe einer @font-face definiert. Erklärung:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Das vorherige Code-Snippet definiert ein font-family-Element mit dem Namen "Open Sans". wird dem Browser mitgeteilt, wo die entsprechende Webschriftart-Ressource zu finden ist. Um Einsparungen verwendet wird, lädt der Browser die Webschriftart erst herunter, dass das Layout der aktuellen Seite sie benötigt.

h1 {
  font-family: "Open Sans";
}

Im vorherigen CSS-Snippet lädt der Browser die Schriftartdatei "Open Sans" herunter. da es ein <h1>-Element im HTML-Code der Seite parst.

preload

Wenn Ihre @font-face-Deklarationen in einem externen Stylesheet definiert sind, gibt das Attribut kann der Browser erst mit dem Download beginnen, nachdem das Stylesheet heruntergeladen wurde. Dadurch werden Web-Schriftarten erst spät entdeckt, aber es gibt Möglichkeiten, Webschriftarten schneller zu finden.

Sie können mithilfe der preload eine frühe Anfrage nach Ressourcen für Webschriftarten initiieren. . Die Anweisung preload sorgt dafür, dass Webschriftarten frühzeitig erkannt werden. und der Browser beginnt sofort und ohne Wartezeit mit dem Herunterladen der Seite. damit das Stylesheet den Download und das Parsen abgeschlossen hat. 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>

Inline-@font-face-Deklarationen

Sie können Schriftarten während des Seitenaufbaus früher sichtbar machen, indem Sie CSS-Code, der das Rendering blockiert, einschließlich der @font-face-Deklarationen in den <head> von in Ihren HTML-Code mithilfe des <style>-Elements einfügen. In diesem Fall erkennt der Browser die Web-Schriftarten früher beim Laden der Seite eingefügt werden, da sie nicht auf eine externe herunterladen können.

<ph type="x-smartling-placeholder">

Das Inline-Format von @font-face-Deklarationen hat einen Vorteil gegenüber der preload. da der Browser nur die Schriftarten herunterlädt, die zum Rendern der aktuellen Seite. Dadurch wird das Risiko des Herunterladens nicht verwendeter Schriftarten eliminiert.

<ph type="x-smartling-placeholder">

Herunterladen

Nachdem Sie Webschriftarten erkannt und sichergestellt haben, dass sie vom kann der Browser sie herunterladen. Die Anzahl der Web-Schriftarten, ihre Codierung, und die Dateigröße kann sich erheblich darauf auswirken, wie schnell eine Webschriftart die vom Browser heruntergeladen und gerendert werden.

Web-Schriftarten selbst hosten

Webschriftarten können über Drittanbieterdienste wie Google Fonts oder können bei Ihrem Ursprung selbst gehostet werden. Wenn Sie einen Drittanbieterdienst verwenden, Für die Seite muss eine Verbindung zur Domain des Anbieters hergestellt werden, bevor sie gestartet werden kann. die benötigten Web-Schriftarten herunterladen. Dies kann die Erkennung und nachfolgende das Herunterladen von Webschriftarten.

Dieser Aufwand kann mit dem Ressourcenhinweis preconnect reduziert werden. Durch die Verwendung von preconnect können Sie den Browser anweisen, eine Verbindung zur ursprungsübergreifenden früher als der Browser normalerweise tun würde:

<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. Einige Anbieter von Schriftarten wie Google Fonts stellen CSS- und Schriftartenressourcen von verschiedenen Ursprüngen.

Sie können die Verbindung zu Drittanbietern überflüssig machen, indem Sie Ihr Web-Schriftarten. In den meisten Fällen ist das selbst gehostete Web Fonts schneller als der Download. ursprungsübergreifend sein. Wenn Sie Webschriftarten selbst hosten möchten, überprüfen Sie, ob Ihre Website ein Content Delivery Network (CDN), HTTP/2 oder HTTP/3 verwendet und den Caching-Header für die Webschriftarten, die Sie für Ihre Website benötigen.

Nur WOFF2 und WOFF2 verwenden

WOFF2 bietet umfassende Browserunterstützung und eine um bis zu 30% bessere Komprimierung. als WOFF. Die geringere Dateigröße führt zu kürzeren Download-Zeiten. WOFF2 Format ist oft das einzige, das für eine vollständige Kompatibilität mit modernen Browser.

<ph type="x-smartling-placeholder">

Untersatz von Webschriftarten

Webschriftarten umfassen in der Regel viele verschiedene Glyphen, die benötigt werden, um die Vielfalt der in verschiedenen Sprachen verwendeten Zeichen darzustellen. Wenn Ihr Content nur in einer Sprache bereitstellt oder nur ein einziges Alphabet enthält, können Sie können Sie die Größe Ihrer Webschriftarten mithilfe von Untereinstellungen reduzieren. Das wird oft von Sie geben eine Zahl oder einen Bereich von Unicode-Codepunkten an.

Eine Untergruppe ist eine reduzierte Anzahl von Symbolen, die im ursprünglichen Web enthalten waren Schriftartdatei. Anstatt alle Glyphen anzuzeigen, könnte Ihre Seite beispielsweise ein bestimmte Teilmenge für lateinische Zeichen. Je nach benötigten Teilmengen Glyphen die Größe einer Schriftartdatei erheblich reduzieren.

Einige Anbieter von Webschriftarten, wie z. B. Google Fonts, bieten Teilmengen automatisch über die Verwendung eines Abfragestringparameters. Beispiel: Der Parameter https://fonts.googleapis.com/css?family=Roboto&subset=latin URL liefert ein mit der Roboto-Webschriftart erstellen, die nur das lateinische Alphabet verwendet.

Wenn Sie sich entschieden haben, Ihre Web-Schriftarten selbst zu hosten, besteht der nächste Schritt darin, hosten Sie diese Teilmengen selbst mit Tools wie Glyphanger oder Subfont.

Wenn Sie jedoch nicht die Möglichkeit haben, Ihre eigenen Webschriftarten selbst zu hosten, können Sie von Google Fonts bereitgestellten Webschriftarten. Dazu wird ein zusätzlicher text-Wert angegeben. Parameter, der nur die Unicode-Codepunkte enthält, die für Ihrer Website. Wenn Sie auf Ihrer Website eine Webschriftart für das Display verwenden, die nur für den Satz "Willkommen" nur wenige Zeichen benötigen, können Sie fordern Sie diese Untergruppe über Google Fonts an. Verwenden Sie dazu die folgende URL: https://fonts.googleapis.com/css?family=Monoton&text=Welcome Dies kann die Menge an Webschriftart-Daten für eine einzelne Schriftart erheblich zu reduzieren. auf Ihrer Website zu platzieren, wenn eine solch extreme Untereinstellung auf Ihrer Website nützlich sein kann.

Schriftart-Rendering

Nachdem der Browser eine Webschriftart erkannt und heruntergeladen hat, gerendert. Standardmäßig blockiert der Browser die Darstellung von Text, der eine Web-Schriftart angezeigt, bis sie heruntergeladen sind. Sie können die Textdarstellung des Browsers und konfigurieren, welcher Text angezeigt werden soll – oder nicht –, bis das Web Schriftart wurde mithilfe der CSS-Eigenschaft font-display vollständig geladen.

block

Der Standardwert für font-display ist block. Mit block wird der Browser blockiert die Darstellung von Text, der die angegebene Webschriftart verwendet. Unterschiedlich verhalten sich ein wenig anders. Chromium und Firefox blockieren das Rendering für bis zu drei Sekunden verstreichen lassen, bevor ein Fallback verwendet wird. Safari wird auf unbestimmte Zeit gesperrt bis die Webschriftart geladen ist.

swap

„swap“ ist der am häufigsten verwendete Wert für „font-display“. swap blockiert nicht und der Text wird sofort in einem Fallback angezeigt, bevor der Text in der Web-Schriftart verwendet. So können Sie Ihre Inhalte sofort präsentieren, ohne warten zu müssen für den Download der Webschriftart.

Der Nachteil von swap ist jedoch, dass es eine Layoutverschiebung verursacht, wenn das Fallback Webschriftart und Webschriftart, die in Ihrem CSS festgelegt ist, unterscheiden sich hinsichtlich der Zeilengröße stark. Höhe, Unterschneidung und andere Schriftmesswerte. Dies kann sich auf die CLS Ihrer Website auswirken, wenn ist es nicht wichtig, den preload-Hinweis zu verwenden, um eine Webschriftart-Ressource sofort zu laden, oder wenn Sie andere font-display-Werte nicht berücksichtigen.

fallback

Der Wert fallback für font-display stellt einen Kompromiss zwischen block und swap. Im Gegensatz zu swap blockiert der Browser das Rendern einer Schriftart, aber Fallback-Text nur für sehr kurze Zeit ersetzen. Im Gegensatz zu block, Die Sperrzeit ist jedoch extrem kurz.

Die Verwendung des fallback-Werts kann in schnellen Netzwerken gut funktionieren, wenn die Webschriftart ist die Web-Schriftart die Schriftart, die unmittelbar auf der für das erste Rendering. Bei langsamen Netzwerken wird der Fallback-Text erkannt. nach Ablauf des Blockierzeitraums und wird dann ausgetauscht, kommt.

optional

optional ist der strengste font-display-Wert. Es wird nur das Web verwendet. . Wenn eine Webschriftart länger als dieser geladen ist, wird er nicht auf der Seite verwendet und der Browser nutzt Fallback-Schriftbild für die aktuelle Navigation, während die Webschriftart heruntergeladen wird. im Hintergrund und werden im Browser-Cache abgelegt.

Dadurch kann bei nachfolgenden Seitennavigationen die Webschriftart sofort verwendet werden, da bereits heruntergeladen. font-display: optional verhindert, dass Layout Shifts erkannt werden mit swap. Einige Nutzer sehen die Webschriftart jedoch nicht, wenn sie zu spät auf der Seite anfängliche Seitennavigation.

Schriftarten-Demos

Wissen testen

Wann lädt der Browser eine Webschriftart-Ressource herunter (sofern sie nicht mit einer preload-Anweisung abgerufen werden?

Sobald der Verweis darauf in einem Stylesheet erkannt wurde
Bitte versuchen Sie es noch einmal.
Wenn das CSSOM der Seite erstellt und festgestellt wird, dass die Webschriftart die für das aktuelle Layout benötigt werden.
Richtig!

Welches ist das einzige (und effizienteste) Format, das zur Bereitstellung von Schriftarten in allen modernen Browsern?

WOFF2
Richtig!
WOFF
Bitte versuchen Sie es noch einmal.
TTF
Bitte versuchen Sie es noch einmal.
EOT
Bitte versuchen Sie es noch einmal.

Nächster Schritt: JavaScript zur Codeaufteilung

Mit diesen Kenntnissen zur Schriftartoptimierung können Sie Im nächsten Modul geht es um ein Thema mit hohem Verbesserungspotenzial. die anfängliche Ladegeschwindigkeit für Ihre Nutzer verbessert und dadurch das Laden der Seiten JavaScript durch Code-Splitting. Dadurch bleiben Bandbreite und CPU-Leistung in der Startphase einer Seite so gering wie möglich sind, Zeitpunkt, zu dem Nutzende sehr wahrscheinlich damit interagieren.