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.
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.
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?
Welches ist das einzige (und effizienteste) Format, das zur Bereitstellung von Schriftarten in allen modernen Browsern?
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.