Aureola optimieren: Optimierte Iconfont mit Icomoon

Die Optimierung geht weiter. Heute widme ich mich einem Thema, das oft wenig Beachtung zu finden scheint. Der Größe externer Libraries. Nun nutze ich auf meiner Seite nicht wirklich irgendwelche Frameworks. Es gibt dennoch einen Kandidaten, den man sich einmal genauer anschauen sollte: Font Awesome.

Zuletzt hatten wir alle Bilder durch webp-Formate ersetzt und damit die Downloadgröße drastisch reduzieren können. Von 866 kb und 1,6 MB auf 495 kb und375 kb. Die Antwortzeiten reduzierten sich von 359 ms und 459 ms auf 279 ms und 265 ms. Eins fällt hier allerdings noch auf. Die Icon-Font von Font Awesome schlägt mit 77,9 kb zu Buche. Das ist größer als ein optimiertes Bild.

Font Awesome ist eine in der Grundversion kostenlos nutzbare Icon-Font. In der Variante, die ich in die Seite eingebunden habe, finden sich mehr als 700 Icons. Mittlerweile beinhaltet die aktuelle Version über 1600 Icons. Es ist also für jeden etwas dabei. Da ist nur eine Sache. Auf der ganzen Webseite nutze ich nur 12 Icons. Ich habe also über 700 Icons zuviel eingebunden.

Nun kann man natürlich hingehen und in mühevoller Kleinarbeit die Schrift anpassen. Oder man nutzt einen Service, der Icon-Fonts erstellen kann. Icomoon zum Beispiel. Hier kann man nicht nur eigene Icon-Fonts erstellen, sondern auch aus einer Reihe von Packs Icons auswählen und als Schrift exportieren. Und zwar genau die, die man auch wirklich braucht. Ich entschied mich dafür ein Pack von Icomoon selbst zu wählen. Und gab Font Awesome den Laufpass. Auch das resultierte wieder in einer deutlichen Einsparung.

Statt Font Awesome mit 700 Icons und einer Größe von 77,9 kb, verwende ich nun eine Font von Icomoon mit genau den 12 Icons, die ich auch brauche und die dadurch nur mit 4,1 kb zu Buche schlägt. Als Fazit für diese Optimierung kann man also festhalten: Binde nur ein, was Du auch wirklich brauchst. Oder wenn man den alten Ingenieursspruch etwas abwandelt: Nicht so viel wie möglich, sondern so viel wie nötig einbinden.