Ein „vollständiger“ WebFont, der alle stilistischen Varianten, die Sie möglicherweise nicht benötigen, sowie alle Glyphen, die möglicherweise nicht verwendet werden, enthält, kann leicht zu einem Download mit mehreren Megabyte führen. In diesem Beitrag erfährst du, wie du das Laden von WebFonts so optimieren kannst, dass Besucher nur das herunterladen, was sie tatsächlich nutzen.
Um das Problem großer Dateien zu lösen, die alle Varianten enthalten, wurde die CSS-Regel @font-face speziell dafür entwickelt, die Schriftfamilie in eine Sammlung von Ressourcen aufzuteilen. Dazu gehören beispielsweise Unicode-Teilmengen und unterschiedliche Stilvarianten.
Anhand dieser Deklarationen ermittelt der Browser die erforderlichen Teilmengen und Varianten und lädt den minimalen Satz herunter, der zum Rendern des Textes erforderlich ist. Das ist sehr praktisch. Wenn Sie nicht aufpassen, kann dies auch zu einem Leistungsengpass im kritischen Rendering-Pfad führen und das Text-Rendering verzögern.
Standardverhalten
Lazy Loading von Schriftarten hat eine wichtige, versteckte Auswirkung, die das Rendern des Texts verzögern kann. Der Browser muss die Renderingstruktur erstellen, die von den DOM- und CSSOM-Bäumen abhängig ist, bevor er weiß, welche Schriftartressourcen zum Rendern des Texts erforderlich sind. Dadurch werden Schriftartanfragen lange nach anderen kritischen Ressourcen verzögert und der Browser kann Text möglicherweise erst dann rendern, wenn die Ressource abgerufen wurde.
- Der Browser fordert das HTML-Dokument an.
- Der Browser beginnt mit dem Parsen der HTML-Antwort und der Erstellung des DOM.
- Der Browser erkennt CSS-, JS- und andere Ressourcen und sendet Anfragen.
- Der Browser erstellt das CSSOM, nachdem der gesamte CSS-Inhalt empfangen wurde, und kombiniert ihn mit der DOM-Baumstruktur, um die Rendering-Struktur zu erstellen.
- Schriftartanfragen werden gesendet, nachdem in der Renderingstruktur angegeben ist, welche Schriftvarianten erforderlich sind, um den angegebenen Text auf der Seite zu rendern.
- Der Browser führt das Layout durch und blendet Inhalte auf dem Bildschirm ein.
- Wenn die Schriftart noch nicht verfügbar ist, rendert der Browser möglicherweise keine Textpixel.
- Sobald die Schriftart verfügbar ist, malt der Browser die Textpixel.
Das „Rennen“ zwischen dem First Paint des Seiteninhalts, der kurz nach dem Erstellen der Renderingstruktur ausgeführt werden kann, und der Anfrage für die Schriftartressource entsteht das „leere Textproblem“, bei dem der Browser möglicherweise das Seitenlayout rendert, aber Text auslässt.
Wenn Sie WebFonts vorab laden und font-display verwenden, um zu steuern, wie sich Browser mit nicht verfügbaren Schriftarten verhalten, können Sie leere Seiten und Layoutverschiebungen durch das Laden von Schriftarten vermeiden.
WebFont-Ressourcen vorab laden
Wenn die Wahrscheinlichkeit hoch ist, dass Ihre Seite eine bestimmte WebFont-URL benötigt, die unter einer Ihnen bereits bekannten URL gehostet wird, können Sie die Ressourcenpriorisierung nutzen.
Wenn Sie <link rel="preload"> verwenden, wird früh im kritischen Rendering-Pfad eine Anfrage für den WebFont ausgelöst, ohne dass Sie warten müssen, bis das CSSOM erstellt ist.
Verzögerung für das Textrendering anpassen
Durch das Vorabladen ist es zwar wahrscheinlicher, dass ein WebFont verfügbar ist, wenn der Inhalt einer Seite gerendert wird. Es gibt jedoch keine Garantien.
Sie müssen dennoch berücksichtigen, wie sich Browser beim Rendern von Text verhalten, der ein noch nicht verfügbares font-family verwendet.
In dem Beitrag Unsichtbaren Text beim Laden von Schriftarten vermeiden sehen Sie, dass das Standardverhalten des Browsers nicht einheitlich ist.
Mit font-display können Sie modernen Browsern jedoch mitteilen, wie sie sich verhalten sollen.
Ähnlich wie bei Zeitüberschreitungen für Schriftarten, die in einigen Browsern implementiert werden, unterteilt font-display die Lebensdauer eines Schriftartdownloads in drei Hauptphasen:
- Der erste Punkt ist der Blocksatz für Schriftarten. Wenn die Schriftart in diesem Zeitraum nicht geladen wird, muss jedes Element, das sie zu verwenden versucht, stattdessen mit einer unsichtbaren Fallback-Schriftart gerendert werden. Wird die Schriftart während des Sperrzeitraums erfolgreich geladen, wird sie normal verwendet.
- Der Zeitraum für den Wechsel der Schriftart wird unmittelbar nach dem Zeitraum für den Schriftartblock festgelegt. Wenn die Schriftart in diesem Zeitraum nicht geladen wird, muss jedes Element, das sie zu verwenden versucht, stattdessen mit einer Fallback-Schriftart gerendert werden. Wird die Schriftart während des Auslagerungszeitraums geladen, wird sie normal verwendet.
- Der Zeitraum für Schriftarten tritt unmittelbar nach dem Zeitraum für den Wechsel der Schriftart auf. Wenn die Schriftart zu Beginn dieses Zeitraums noch nicht geladen wurde, wird sie als fehlgeschlagener Ladevorgang gekennzeichnet, was zu einem normalen Schrift-Fallback führt. Andernfalls wird die Schriftart normal verwendet.
Wenn du diese Zeiträume kennst, kannst du mit font-display festlegen, wie deine Schriftart gerendert werden soll, je nachdem, ob oder wann sie heruntergeladen wurde.
Wenn du mit der Eigenschaft font-display arbeiten möchtest, musst du sie deinen @font-face-Regeln hinzufügen:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: auto; /* or block, swap, fallback, optional */
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
url('/fonts/awesome-l.woff') format('woff'),
url('/fonts/awesome-l.ttf') format('truetype'),
url('/fonts/awesome-l.eot') format('embedded-opentype');
unicode-range: U+000-5FF; /* Latin glyphs */
}
font-display unterstützt derzeit die folgenden Wertebereiche:
autoblockswapfallbackoptional
Weitere Informationen zum Vorabladen von Schriftarten und zur Eigenschaft font-display finden Sie in den folgenden Beiträgen:
- Unsichtbaren Text beim Laden von Schriftarten vermeiden
- Schriftleistung mit font-display steuern
- Layoutverschiebungen und Einblendung von unsichtbarem Text (FOIT) verhindern, indem optionale Schriftarten vorab geladen werden
Die Font Loading API
In Kombination bieten <link rel="preload"> und das CSS-font-display eine Menge Kontrolle über das Laden und Rendern von Schriftarten, ohne viel Aufwand zu verursachen.
Wenn Sie jedoch zusätzliche Anpassungen vornehmen möchten und bereit sind, den durch die Ausführung von JavaScript verursachten Aufwand zu verursachen, gibt es eine andere Option.
Die Font Loading API bietet eine Skriptoberfläche zum Definieren und Bearbeiten von CSS-Schriftarten, zum Verfolgen des Downloadfortschritts und zum Überschreiben des standardmäßigen Lazyload-Verhaltens. Wenn Sie sich beispielsweise sicher sind, dass eine bestimmte Schriftartvariante erforderlich ist, können Sie diese definieren und den Browser auffordern, sofort einen Abruf der Schriftartressource zu starten:
var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});
// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
// apply the font (which may re-render text and cause a page reflow)
// after the font has finished downloading
document.fonts.add(font);
document.body.style.fontFamily = "Awesome Font, serif";
// OR... by default the content is hidden,
// and it's rendered after the font is available
var content = document.getElementById("content");
content.style.visibility = "visible";
// OR... apply your own render strategy here...
});
Außerdem lässt sich eine benutzerdefinierte Strategie für das Rendering von Text auf Ihren Seiten definieren, da Sie über die Methode check() den Status der Schriftart prüfen und den Downloadfortschritt verfolgen können:
- Sie können das gesamte Textrendering beibehalten, bis die Schriftart verfügbar ist.
- Sie können für jede Schriftart ein benutzerdefiniertes Zeitlimit implementieren.
- Sie können die Fallback-Schriftart verwenden, um die Blockierung des Renderings aufzuheben und einen neuen Stil einzufügen, der die gewünschte Schriftart verwendet, sobald die Schriftart verfügbar ist.
Das Beste ist, dass Sie die oben genannten Strategien auch für unterschiedliche Inhalte auf der Seite kombinieren können. Sie können beispielsweise das Textrendering in einigen Abschnitten verzögern, bis die Schriftart verfügbar ist, eine Fallback-Schriftart verwenden und dann noch einmal rendern, nachdem die Schriftart heruntergeladen wurde.
Richtiges Caching ist ein Muss
Schriftartenressourcen sind in der Regel statische Ressourcen, die nicht häufig aktualisiert werden. Daher eignen sie sich ideal für eine lange Ablaufzeit der maximalen Altersgrenze. Geben Sie für alle Schriftarten sowohl einen bedingten ETag-Header als auch eine optimale Cache-Control-Richtlinie an.
Wenn Ihre Webanwendung einen Service Worker verwendet, ist die Bereitstellung von Schriftartenressourcen mit einer Cache-First-Strategie für die meisten Anwendungsfälle geeignet.
Sie sollten keine Schriftarten mit localStorage oder IndexedDB speichern, da jede dieser Schriftarten eigene Leistungsprobleme aufweist.
Der HTTP-Cache des Browsers bietet den besten und zuverlässigsten Mechanismus zur Bereitstellung von Schriftartenressourcen an den Browser.
WebFont-Checkliste zum Laden
- Passen Sie das Laden und Rendern von Schriftarten mit
<link rel="preload">,font-displayoder der Font Loading API an. Das standardmäßige Lazy Loading-Verhalten kann zu verzögertem Textrendering führen. Mit diesen Webplattformfunktionen können Sie dieses Verhalten für bestimmte Schriftarten überschreiben und benutzerdefinierte Rendering- und Zeitüberschreitungsstrategien für verschiedene Inhalte auf der Seite festlegen. - Geben Sie Richtlinien für eine erneute Validierung und optimales Caching an: Schriftarten sind statische Ressourcen, die selten aktualisiert werden. Achten Sie darauf, dass Ihre Server einen langlebigen „max-age“-Zeitstempel und ein Revalidierungstoken bereitstellen, damit Schriftarten effizient auf verschiedenen Seiten wiederverwendet werden können. Wenn Sie einen Service Worker verwenden, ist eine Cache-First-Strategie angemessen.
Automatisierte Tests des WebFont-Ladeverhaltens mit Lighthouse
Mit Lighthouse lässt sich der Prozess zur Automatisierung der Einhaltung der Best Practices für die Optimierung von Webschriftarten automatisieren.
Mit den folgenden Prüfungen können Sie dafür sorgen, dass Ihre Seiten langfristig den Best Practices für die Optimierung von Webschriftarten entsprechen: