⛺️ 👩‍✈️ 👩🏾‍🔧 Über die positiven Auswirkungen variabler Schriftarten auf die Leistung von Webprojekten 🤙🏾 🌙 ◻️

Wenn sie über Web-Schriftarten nachdenken und welche Auswirkungen sie auf die Leistung der Website haben, achten sie häufig auf die folgenden drei Indikatoren:

Anzahl der Anforderungen zum Herunterladen von Schriftdateien.
Größen von Schriftdateien.
Die Zeit bis zum Rendern der ersten Seite.

Ich wollte wissen, wie sich die Verwendung variabler Schriftarten auf diese Indikatoren auswirkt. Deshalb habe ich sie mit normalen Schriftarten verglichen. Das ist, was ich tat.

Reduzieren Sie die Anzahl der Anforderungen zum Herunterladen von Schriftdateien

Es gibt verschiedene Möglichkeiten, um die Anzahl der Anforderungen zum Herunterladen von Schriftarten zu verringern. Dies ist beispielsweise das Zwischenspeichern mithilfe von CDN, wodurch die Anzahl der verwendeten Schriftartenvarianten verringert wird. Ich werde hier nicht über die Verwendung von CDN oder Caching sprechen, da dies im Allgemeinen bei der Arbeit mit normalen Schriftarten dasselbe ist wie bei der Arbeit mit variablen Schriftarten. Stattdessen werde ich über die Reduzierung der Anzahl der Schriftstiloptionen sprechen.

In der Welt der Standardschriftarten wird durch Verringern der Anzahl der verwendeten Schriftartenoptionen die Anzahl der Anforderungen zum Herunterladen von Schriftarten verringert. Dies liegt daran, dass bei Verwendung weniger Stile weniger Schriftdateien benötigt werden. In der Regel müssen Sie dazu die Auswahl der Schriftarten planen und ein Gleichgewicht zwischen Design und Leistung suchen. Dabei müssen Sie entscheiden, ob das attraktivere und „schwerere“ Design den Einfluss auf die Leistung wert ist.

Die Verwendung variabler Schriftarten bedeutet aufgrund der Tatsache, dass sie verschiedene Schriftartenoptionen in einer Datei speichern können, dass die Anzahl der Anforderungen zum Herunterladen von Schriftdateien verringert wird, ohne dass Sie mit dem Designer sprechen müssen, um die Anzahl der im Projekt verwendeten Schriftartenoptionen zu verringern.

Die Verwendung variabler Schriftarten führt nur aufgrund der Gerätefunktionen der Dateien solcher Schriftarten zu einer Verringerung der Anzahl von Anforderungen. Wenn die Datei jedoch alle Informationen zu den verschiedenen Schriftartenoptionen enthält, sollten Sie sich fragen, wie sich dies auf die Dateigröße auswirkt.

Reduzieren der Schriftgröße

Es gibt viele Möglichkeiten, die Schriftgröße zu reduzieren. Normalerweise besteht der erste Schritt in diesem Prozess darin, das effizienteste Format zum Speichern von Web-Schriftarten auszuwählen. Zum Beispiel - WOFF2.

▍ Referenzpunkt finden

Ich habe eine Studie über die Größe verschiedener Schriftdateien durchgeführt. Insbesondere mit der Schriftart Source Sans Pro von Adobe. Ich habe diese bestimmte Schriftart gewählt, weil ihr Code auf GitHub gehostet wird und weil es Open Source ist.

Vergleich der Größe von OTF-Dateien der Schriftart Source Sans Pro - eine Datei, in der eine Schriftart mit einer Sättigung und eine Datei mit variabler Schriftart gespeichert ist.

Als Referenzpunkt habe ich eine Datei verwendet, die eine Schriftart mit einer Sättigung der Standardversion von Source Sans Pro beschreibt. Seine Größe im OTF-Format beträgt 248 Kb. Die Größe der OTF-Datei mit variabler Schriftart beträgt 405 KB. Dies bedeutet, dass die Dateigröße der variablen Schriftart 73% größer ist als die Dateigröße, die eine Version der Standardquelle Source Pro enthält.

In Anbetracht der Tatsache, dass die variable Schriftartdatei alle Informationen enthält, die für Schriftartenvarianten mit beliebiger Sättigung erforderlich sind, beträgt die Größe einer Reihe regulärer Schriftdateien mit ähnlichen Funktionen etwa 1170 KB.

Und das ist fast dreimal so groß wie die Datei mit variabler Schriftart.

Selbst wenn Sie eine Schriftart mit den normalen und fett gedruckten Sättigungsoptionen benötigen, stellen sich die beiden zum Speichern dieser Schriftartenoptionen erforderlichen Dateien als mehr als eine variable Schriftartdatei heraus.

▍Vergleich der Formate OTF und WOFF2

OTF-Dateien sind im Vergleich zu den komprimierten Formaten WOFF und WOFF2 recht groß.

Eine Datei mit einer Schriftartoption: OTF - 234 Kb, WOFF2 - 111 Kb. Variable Schriftartdatei: OTF - 405 KB, WOFF2 - 112 KB.

Wenn Sie die Dateigrößen verschiedener Formate vergleichen, stellt sich heraus, dass Sie die Dateigröße durch einfaches Verwenden des WOFF2-Formats erheblich reduzieren können.

Es schien mir interessant, wie viel Einsparungen durch die Verwendung des WOFF2-Formats beim Speichern variabler Schriftdaten erzielt werden. Die Tatsache, dass die Dateigröße von 405 KB auf 112 KB verringert wurde, führt dazu, dass die Datei mit variabler Schriftart fast dieselbe Größe hat wie die Datei, in der nur eine Version der Standardquelle Sans Pro gespeichert ist.

Dies stellte sich für mich als Überraschung heraus, und ich bin absolut sicher, dass eine solche Einsparung nicht in allen Fällen möglich sein wird. Es ist jedoch sehr schön zu sehen, wie effektiv die WOFF2-Komprimierung sein kann, wenn sie auf eine variable Schriftart angewendet wird.

▍ Reduzieren der Dateigröße mithilfe von Teilmengen von Schriftarten

Bei der Arbeit mit Standardschriftarten gibt es eine andere Möglichkeit, die Dateigröße zu reduzieren. Es besteht aus der Verwendung von Teilmengen von Schriftarten. Auf diese Weise können Sie beispielsweise unnötige Zeichen entfernen oder den Zeichensatz für Schriftarten reduzieren, sodass nur diejenigen übrig bleiben, die für die Anzeige von lateinisch eingegebenen Texten erforderlich sind.

Das Erstellen von Teilmengen von Schriftarten birgt einige Risiken. Die Verwendung von Teilmengen kann dazu führen, dass einige Teile des Textes mit einer Fallback-Schriftart angezeigt werden. Dies kann passieren, wenn die erforderlichen Zeichen versehentlich aus der verwendeten Schriftart gelöscht wurden.

Sie können Teilmengen von Schriftarten mit speziellen Werkzeugen wie Glyphhanger erstellen. Insbesondere wurde für dieses Tool eine gute Anleitung zu GitHub erstellt. Es funktioniert sowohl mit Standard- als auch mit variablen Schriftarten.

Ich habe die Standard- und Variablenversionen von Source Sans Pro mit Glyphhanger und ausgewählten Klein- und Großbuchstaben des lateinischen Alphabets sowie Zahlen und Sonderzeichen wie Ausrufezeichen verarbeitet.

Verwenden von Teilmengen von Schriftarten zum Reduzieren der Dateigröße Mit

diesem Vorgang konnten wir die Größe einer Datei mit einer Schriftart von einer Sättigung von 111 KB auf 16 KB reduzieren (85% Einsparung ist sehr gut). Bei einer variablen Schriftart verringerte sich die Dateigröße von 112 KB auf 27 KB (75% sind ein akzeptables Einsparungsniveau).

Auch diese Ergebnisse haben mich überrascht. Ich hatte erwartet, dass eine variable Schriftartdatei größer sein würde. In Anbetracht der Tatsache, dass sie in typischen Situationen dieselbe Schriftart mit normaler und fetter Sättigung verwenden, stellt sich heraus, dass eine variable Schriftartdatei mit 27 KB kleiner als zwei Dateien ist, von denen jede Informationen über dieselbe Schriftart mit unterschiedlicher Sättigung enthält. Daher glaube ich, dass dieser Ansatz sehr gute Einsparungen bietet.

Es ist wichtig zu beachten, dass hier nur meine Experimente mit der Schriftart Source Sans Pro beschrieben werden. Bei anderen Schriftarten können dieselben Methoden zu anderen, nicht so guten Ergebnissen führen. Die Verwendung einer variablen Schriftart führt möglicherweise nicht zu der gleichen Reduzierung der Dateigröße. Aus diesem Grund empfehle ich, bei der Verwendung von Teilmengen von Schriftarten Vorsicht walten zu lassen. Bevor Sie diese Optimierungstechnik in der Praxis anwenden, sollten Sie alles gut testen, bewerten und verstehen, was für ein bestimmtes Projekt am besten ist.

▍ Zusätzliche Überlegungen zur Dateigröße

Einige zusätzliche Überlegungen, die bei der Schriftgröße berücksichtigt werden müssen, sind, dass das Herunterladen einer großen Datei länger dauert als das Herunterladen mehrerer kleinerer Dateien.

Wenn Sie beispielsweise Standardschriftarten verwenden, sind Dateien, in denen Informationen zu ihrer normalen Sättigung gespeichert sind, normalerweise kleiner als andere. Dadurch kann der Hauptteil des Dokuments unmittelbar nach dem Herunterladen der entsprechenden kleinen Datei schnell angezeigt werden. Und später, nachdem Sie die fett gedruckte Version der Schriftart geladen haben, können Sie sie anwenden. Der Vorteil dieses Ansatzes besteht darin, dass Sie Text auf der Seite schneller anzeigen können als mit einer variablen Schriftart. Der Punkt hier ist, dass einzelne Standardschriftdateien kleiner sind als die variable Schriftdatei.

Wenn Sie eine variable Schriftart verwenden, müssen Sie auf das Laden einer einzelnen großen Datei warten, bevor Sie den Text anzeigen. Dies kann die Zeit verlängern, die zum Vorbereiten einer Seite für die Arbeit benötigt wird. Wenn Sie jedoch auf alle Schriftdaten warten müssen, bevor der Text angezeigt wird, können Sie das Problem vermeiden, dass sich nach und nach heruntergeladene Schriftarten auf den bereits angezeigten Text auswirken. Da bei Verwendung variabler Schriftarten alle Schriftarten gleichzeitig geladen werden, müssen wir den Browser nicht zwingen, die Seite jedes Mal neu zu zeichnen, wenn eine neue Version der Schriftart geladen wird.

Wenn wir über die Größe von Schriftdateien sprechen, hängt die Schlussfolgerung, die über die Verwendung variabler Schriftarten gezogen werden kann, von der jeweiligen Situation ab. Nämlich - aus den Merkmalen des Projekts, aus den Entwurfsanforderungen, aus den verwendeten Schriftarten.

Reduzieren Sie die Zeit bis zum ersten Rendern

Lassen Sie uns nun über die Verkürzung der Zeit vor dem Rendern der ersten Seite sprechen. Je kürzer diesmal, desto besser für die Leistung. Das ist ziemlich offensichtlich. Darüber hinaus muss berücksichtigt werden, dass, wie bereits erwähnt, die einzige große variable Schriftartdatei langsamer geladen werden kann als einige kleine Schriftdateien. Aber selbst eine geringfügige Verzögerung bei der Ausgabe der Seite, das einzige "Aufblitzen von unsichtbarem Text" (Aufblitzen von unsichtbarem Text, FOIT), kann dazu führen, dass der Benutzer das Gefühl hat, dass die Seite langsamer geladen wird, als es tatsächlich geschieht. Aus diesem Grund glaube ich, dass wir versuchen sollten, dieses Problem auf das zu beschränken, was als „Flash of Unstyled Text“ (FOUT) bezeichnet wird, anstatt die Seite dem FOIT-Risiko auszusetzen.

▍FOIT

So sieht FOIT aus.

Ein Beispiel für die visuelle Manifestation von FOIT

„Flash of unsichtbarer Text“ tritt auf, wenn wir die Textausgabe blockieren oder verzögern, bis die gewünschte Schriftart geladen ist. Daher sieht die Seite vor dem Laden der Schriftart leer aus.

▍FOUT

Und hier ist ein Beispiel für FOUT.

Ein Beispiel für die visuelle Manifestation von FOUT

„Flash of nicht stilisierter Text“ tritt auf, wenn der Text zuerst mit einer Sicherungsschrift angezeigt wird und dann, wenn die gewünschte Schrift verfügbar ist, zu dieser wechselt oder die zuvor verwendete Schrift ersetzt.

Ich glaube, dass es besser ist, wenn der Benutzer auf FOUT stößt, als auf die Unfähigkeit, den Inhalt der Seite zu lesen. Daher ist es am besten, wenn wir uns einerseits ein Szenario mit dem Erscheinungsbild von FOUT vor dem Benutzer vorstellen und andererseits versuchen, die Benutzerfreundlichkeit des Projekts so wenig wie möglich zu beeinträchtigen.

Der einfachste Weg, den FOUT-Mechanismus in einem Projekt zu implementieren, ist die Verwendung einer Eigenschaftfont-displaymit einem Wertswap. Auf diese Weise kann der Text mit der im Schriftsatz beschriebenen Fallback-Schriftart angezeigt werden. Nach dem Laden der gewünschten Schriftart wird die Sicherungsschrift ersetzt. Die Eigenschaft font-displaykann andere Werte annehmen, und ich empfehle, dass Sie sie untersuchen. Um jedoch das FOUT-Verhalten von Texten zu implementieren, ist der Wert swapein guter Ausgangspunkt.

font-display: swap;

Eines der Probleme mit FOUT besteht darin, dass beim Ersetzen einer Schriftart häufig der auf der Seite neu angeordnete Text angezeigt wird, um den Inhalt an eine Schriftart anzupassen, deren Parameter anders als die Parameter einer zuvor verwendeten Schriftart „gemessen“ werden.

Wenn mit Standard - Schriften arbeiten, können wir Eigenschaften modifizieren, wie line-height, font-sizeund letter-spacingdurch diese tun , um den Text zu ersetzen , die Schriftart und verringern die Inhaltsverschiebungen , die während dieses Prozesses auftreten anzupassen. Sie können dies mit dem fantastischen Font Style Matcher- Tool tun . Es wurde von Monica Dinkulescu erstellt , die sich von diesem ausgezeichneten Artikel von Helen Holmes inspirieren ließ (im Ernst - ein wunderbarer Artikel - ich empfehle ihn zu lesen).

Ich hoffe, dass variable Schriftarten im Laufe der Zeit eine breitere Unterstützung für Betriebssysteme erhalten. Auf diese Weise können Sie die Änderung von Layouts vereinfachen, indem Sie die Schriftart der Systemvariablen als Backup verwenden.

Schriftart für Sicherungsvariablen

Stellen Sie sich vor, was passieren würde, wenn wir eine Systemschriftart hätten, die die Steuerung der Sättigung, Breite und optischen Größe unterstützt. Dies würde es ermöglichen, die Eigenschaften einer solchen Schriftart so zu ändern, dass sie den Eigenschaften der von uns verwendeten speziellen Schriftarten entspricht. Wenn Sie dies mit vorhandenen Methoden zum Festlegen von Eigenschaften wieline-heightoderkombinierenfont-size, haben wir die Möglichkeit, fast unmerkliche Übergänge zwischen den beiden Schriftarten zu erstellen. Dies bedeutet, dass Benutzer weniger auffällige Manifestationen von FOUT erleben und dass Browser aufgrund kleinerer Änderungen der Layouts beim Ändern der Schriftart weniger Arbeit beim Neuzeichnen der Seiten leisten müssen.

Das wäre einfach wunderbar und ich hoffe, dass es so sein wird.

Zusammenfassung

Durch die Verwendung variabler Schriftarten wird die Gesamtgröße der vom Browser heruntergeladenen Schriftdaten verringert. Die Tatsache, dass anstelle der üblichen Schriftart auf der Seite automatisch eine variable Schriftart verwendet wird, bedeutet, dass Sie weniger Anforderungen ausführen müssen, um die Seite für die Ausgabe vorzubereiten.

Auch wenn die Dateigröße variabler Schriftarten für Sie recht groß erscheint - beachten Sie, dass Sie bei Verwendung solcher Schriftarten andere Optimierungstechniken anwenden können. Wir sprechen nämlich über erweiterte Schriftformate wie WOFF2, über die Bildung von Teilmengen von Schriftarten und über die Verwendung der Eigenschaft font-display: swap. All dies deutet darauf hin, dass durch die Verwendung variabler Schriftarten die Schriftdaten reduziert und die Möglichkeit, Seiten zu formatieren, erheblich verbessert werden kann.

Wenn wir einige der bestehenden Leistungsherausforderungen bewältigen können, können wir dem Design mehr Aufmerksamkeit schenken. Das heißt, Sie müssen nicht mehr nach Kompromissen zwischen Design und Seitenleistung suchen.

Im Bereich der Verwendung variabler Schriftarten haben wir die Möglichkeit zu verstehen, wie diese Technologie dazu beitragen kann, durch die Arbeit mit unseren Projekten eine positivere Benutzererfahrung zu erzielen. Aufgrund der Tatsache, dass die Verwendung einer variablen Schriftart die Möglichkeit bietet, viele Schriftartenoptionen zu verwenden, können wir Projekte erstellen, die sich flexibel an die Funktionen der Geräte anpassen können, die für die Arbeit mit ihnen verwendet werden. Auf diese Weise können Sie zugänglichen und lesbaren Text erstellen, ohne sich Gedanken darüber machen zu müssen, dass zusätzliche reguläre Schriftdateien die Größe der Daten, die für die Funktionsfähigkeit der Seiten erforderlich sind, stark beeinträchtigen.

Liebe Leser! Verwenden Sie in Ihren Projekten variable Schriftarten?

Über die positiven Auswirkungen variabler Schriftarten auf die Leistung von Webprojekten