Font Awesome mit Subsetting zur Leistungssteigerung optimieren

Font Awesome ist eine unglaublich beliebte Icon-Bibliothek. Leider ist es recht einfach, sie so zu verwenden, dass dies zu einer suboptimalen Leistung führt. Durch Subsetting von Font Awesome können wir alle ungenutzten Glyphen aus den von der Bibliothek bereitgestellten Schriftdateien entfernen. Dies reduziert die über das Netz übertragenen Bytes und verbessert die Leistung.

Lassen Sie uns gemeinsam Fonts in einem Font Awesome-Projekt subsetten, um zu sehen, welchen Unterschied dies macht. Dabei gehe ich davon aus, dass Sie die von Font Awesome bereitgestellte CSS-Datei importieren und dessen Webfonts zur Anzeige von Icons verwenden.

Lasst uns alles einrichten

Zu Demonstrationszwecken habe ich nichts weiter als eine HTML-Datei, die die Basis-CSS-Datei von Font Awesome importiert. Um eine vernünftige Auswahl an Icons zu erhalten, habe ich jedes einzelne aufgeführt, das ich in einem meiner Nebenprojekte verwende.

So sieht unsere HTML-Datei im Browser vor dem Subsetting der Fonts aus

Hier ist ein Blick auf den Netzwerk-Tab der Entwicklertools, um zu sehen, was heruntergeladen wird.

Sehen wir uns nun an, wie viele Bytes unsere Schriftdateien benötigen, um all das darzustellen.

Hier ist unser Basis-Fall

Wir wollen sehen, wie die geradlinigste, am wenigsten performante Nutzung von Font Awesome aussieht. Anders ausgedrückt, wir wollen die langsamste mögliche Implementierung ohne Optimierung. Ich importiere die all.min.css-Datei, die Font Awesome bereitstellt.

Wie wir oben gesehen haben, wiegt die gzippte Datei 33,4 KB, was gar nicht schlecht ist. Leider wird es etwas schlimmer, wenn wir in den Schrift-Tab der Entwicklertools schauen.

Obwohl Schriftdateien keine so teure Ressource für Ihren Browser sind wie JavaScript, sind das immer noch Bytes, die Ihr Browser herunterladen muss, nur für ein paar kleine Icons. Bedenken Sie, dass einige Ihrer Benutzer Ihre Website möglicherweise auf Mobilgeräten mit schwacher oder langsamer Internetverbindung aufrufen.

Erster Versuch mit PurifyCSS

Das Haupt-Stylesheet von Font Awesome enthält Definitionen für buchstäblich Tausende von Icons. Aber was, wenn wir nur ein paar Dutzend maximal benötigen? Sicherlich könnten wir den unnötigen Kram entfernen?

Es gibt viele Tools, die Ihren Code analysieren und ungenutzte Styles von einem Stylesheet entfernen. Ich verwende PurifyCSS. Obwohl diese Bibliothek nicht mehr aktiv gepflegt wird, ist die Idee dieselbe, und letztendlich ist dies nicht die Lösung, nach der wir suchen. Aber sehen wir uns an, was passiert, wenn wir unser CSS auf das Nötigste reduzieren, was wir mit diesem Skript tun können

const purify = require("purify-css");

const content = ["./dist/**/*.js"]; // Vite-built content

purify(content, ["./css/fontawesome/css/all.css"], {
  minify: true,
  output: "./css/fontawesome/css/font-awesome-minimal-build.css"
});

Und wenn wir diese neu erstellte CSS-Datei laden, sinken unsere CSS-Bytes über das Netz von 33 KB auf nur 7,1 KB!

Aber leider sind unsere anderen Font Awesome-Schriftdateien unverändert.

Was ist passiert? PurifyCSS hat seine Arbeit getan. Es hat tatsächlich die CSS-Regeln für alle ungenutzten Icons entfernt. Leider war es nicht in der Lage, in die eigentlichen Schriftdateien einzudringen, um die Glyphen neben den CSS-Regeln zu trimmen.

Wenn es doch nur ein Tool wie PurifyCSS gäbe, das mit Schriftdateien umgehen kann…

Subsetter zur Rettung!

Es gibt natürlich Tools, die ungenutzte Inhalte aus Schriftdateien entfernen können, und sie werden Subsetter genannt. Ein Subsetter analysiert Ihre Webseite, schaut sich Ihre Schriftdateien an und trimmt die ungenutzten Zeichen heraus. Es gibt eine ganze Reihe von Tools zum Subsetting von Fonts, wie z. B. Zach Leatherman's Glyphhanger. Wie sich herausstellt, ist das Subsetting von Font Awesome ziemlich einfach, da es eigene integrierte Subsetter mitliefert. Werfen wir einen Blick darauf.

Automatisch Fonts subsetten

Die Tools für automatisches und manuelles Subsetting, die ich Ihnen gleich zeigen werde, erfordern ein kostenpflichtiges Font Awesome Pro-Abonnement.

Font Awesome ermöglicht es Ihnen, sogenannte Kits einzurichten, die in den Font Awesome Docs als "eine Tasche, die alle Icons und alles Awesome, das Sie brauchen, in einem schön kleinen, leichten Bündel transportiert, das Sie mit Leichtigkeit auf den Rücken Ihres Projekts schnallen können" beschrieben werden. Anstatt also jede beliebige CSS-Datei zu importieren, bietet ein Kit ein einzelnes Skript-Tag, das Sie in den <head>-Bereich Ihrer HTML-Datei einfügen können, und von dort sendet das Kit nur die tatsächlich benötigten Schrift-Glyphen aus der Schriftdatei.

Das Erstellen eines Kits dauert etwa eine Minute. Sie erhalten ein Skript-Tag, das etwa so aussieht

<script src="https://kit.fontawesome.com/xyzabc.js" crossorigin="anonymous"></script>

Wenn das Skript geladen ist, haben wir jetzt gar keine CSS-Dateien mehr, und die JavaScript-Datei ist nur 4 KB groß. Werfen wir einen Blick auf den Entwicklertools-Schrift-Tab, um zu sehen, welche Schriftdateien geladen werden, jetzt, da wir etwas Subsetting betrieben haben.

Wir sind von 757 KB auf 331 KB heruntergekommen. Das ist eine Reduzierung von mehr als 50 %. Aber wir können immer noch besser werden, besonders wenn wir nur 54 Icons rendern. Hier kommt der manuelle Font-Subsetter von Font Awesome ins Spiel.

Fonts manuell subsetten

Wäre es nicht schön, wenn Font Awesome uns ein Tool geben würde, mit dem wir buchstäblich die genauen Icons auswählen können, die wir wollen, und dann eine benutzerdefinierte Build für diese erhalten? Nun, das tun sie. Sie werben aus irgendeinem Grund nicht allzu laut dafür, aber sie haben tatsächlich eine Desktop-Anwendung, die genau zum manuellen Subsetting von Fonts dient. Die App ist von ihrer Website herunterladbar – aber, wie der automatische Subsetter, erfordert diese App ein kostenpflichtiges Font Awesome-Abonnement, um sie tatsächlich nutzen zu können.

Suchen Sie nach den Icons, wählen Sie die Familie aus, fügen Sie hinzu, was Sie möchten, und klicken Sie dann auf den großen blauen Build-Button. Das ist wirklich alles, was nötig ist, um ein benutzerdefiniertes Subset von Font Awesome-Icons zu generieren.

Nachdem Sie auf den Button geklickt haben, fragt Font Awesome, wo Ihr benutzerdefinierter Build gespeichert werden soll, und dann wird eine ZIP-Datei mit allem, was Sie brauchen, entpackt. Tatsächlich ist die Struktur genau die gleiche wie beim normalen Font Awesome-Download, was die Sache besonders einfach macht. Und natürlich können Sie den benutzerdefinierten Build als Projektdatei speichern, damit Sie ihn später wieder öffnen können, um Icons nach Bedarf hinzuzufügen oder zu entfernen.

Wir werden die Entwicklertools öffnen, um die endgültige Größe der Icons zu sehen, die wir laden, aber zuerst werfen wir einen Blick auf die eigentlichen Schriftdateien. Der benutzerdefinierte Build erstellt viele verschiedene Typen, je nachdem, was Ihr Browser verwendet. Konzentrieren wir uns auf die .woff2-Dateien, die Chrome lädt. Dieselben leichten, normalen, duotonalen, soliden und Marken-Dateien, die vorher da waren, sind immer noch vorhanden, nur ist diesmal keine Datei größer als 5 KB… und das, bevor sie gzippt werden!

Und was ist mit der CSS-Datei? Sie schrumpft auf nur 8 KB. Mit Gzip sind es nur 2 KB!

Hier ist die Endabrechnung in den Entwicklertools

Bevor wir gehen, werfen wir einen kurzen Blick auf die Dateinamen der Schriftarten. Die Schriftdatei fa-light-300.woff2 ist immer noch da, aber die anderen sehen anders aus. Das liegt daran, dass ich Vite verwende, und es beschloss, die Schriftdateien automatisch in das CSS einzubinden, da sie so winzig sind.

Deshalb sieht unsere CSS-Datei im Entwicklertools-Netzwerktab etwas größer aus als die 2 KB, die wir zuvor auf der Festplatte gesehen haben. Der Kompromiss ist, dass die meisten der obigen "Schriftdateien" gar keine Dateien sind, sondern Base64-kodierte Strings, die direkt in diese CSS-Datei eingebettet sind, was uns zusätzliche Netzwerkanfragen erspart.

Trotzdem bindet Vite viele verschiedene Schriftformate ein, die der Browser nie verwenden wird. Aber insgesamt ist es eine ziemlich kleine Anzahl von Bytes, besonders im Vergleich zu dem, was wir vorher gesehen haben.

Bevor ich gehe: Wenn Sie sich fragen, ob dieses GUI-Tool für das manuelle Subsetting von Fonts auch als CLI erhältlich ist, das sich in CI/CD integrieren lässt, um diese Dateien zur Build-Zeit zu generieren, lautet die Antwort… noch nicht. Ich habe die Font Awesome-Leute per E-Mail kontaktiert, und sie sagten, dass etwas geplant sei. Das wird es den Nutzern ermöglichen, ihren Build-Prozess zu optimieren, wenn und wann es veröffentlicht wird.

---

Wie Sie gesehen haben, ist die Verwendung von etwas wie Font Awesome für Icons super cool. Aber die Standardverwendung ist möglicherweise nicht immer der beste Ansatz für Ihr Projekt. Um die kleinstmögliche Dateigröße zu erreichen, können wir durch Subsetting von Fonts das entfernen, was wir nicht brauchen, und nur das ausliefern, was wir brauchen. Das ist die Art von Leistung, die wir wollen, insbesondere wenn es um das Laden von Fonts geht, die traditionell schwer zu handhaben waren.