Nachdem ich meine Homepage hier schon auf einen Pagespeed Score von 99 / 100 hoch optimiert habe, sitze ich den letzten Optimierungsschritt aus. Im Wesentlichen behindert noch eine CSS-Datei und die Font-Datei von Generate Press den 100% Erfolg. Das Problem der Font-Datei dürfte sich mit der bald erscheinenden Version 2.0 von Generate Press von alleine erledigen. Dann gibt es eine Ausweichmöglichkeit über SVG Elemente. Wobei eine Optimierung der derzeit 1264 Byte großen Datei eher akademischer Natur sein dürfte. Weniger geht kaum. Die im Woff2 Format abgelegte Font Datei transportiert wirklich nur das nötigste. Neugierig wie ich bin, musste ich mir das aber dennoch aus der Nähe ansehen. Im Folgenden ein Blick in die Font-Datei:
So wirklich notwendig erscheint mir nur das Hamburger Menü Icon. Und dies auch nur mobil. Dann kommen noch das Verzeichnis und das Kommentar-Symbol zum Einsatz. Nett, dekorativ, aber fast schon verzichtbar. Noch überflüssiger sind die Vorwärts und Zurück Pfeile, anstatt als Icon-Font-Symbol würden diese besser als klassische < bzw. > Text-Zeichen zum Einsatz kommen. Um überhaupt zu sehen, was in dem Generate Press Font drin steckte, habe ich etwas Tricksen müssen. Geholfen hat mir dabei Icomoon, eine kostenlose App, die helfen kann, freie und kommerzielle Fonts zusammen zu stellen. Dank der Import-Funktion war es ein Leichtes, die im SVG Format von Generate Press angebotenen Font-Zeichen einzuladen und darzustellen.
Icomoon – ein geniales Tool für Fonts
Mit Hilfe von Icomoon kann man die Fonts bequem mergen, oder nur bestimmte Zeichen auswählen, und am Ende einen individuell zusammen gestellten Font generieren und downloaden. Es werden alle gängigen Ausgabe-Formate angeboten, lediglich das besser komprimierte woff2 Format bedarf einer Premium Mitgliedschaft. Die Preise hierfür sind aber sehr erschwinglich. Icomoon ist ein tolles Tool. Und einfach in der Bedienung. Und kam mir sehr gelegen, als ich mich mit der Optimierung einer Website auf Basis des Avada Themes beschäftigt habe – speziell als es um die Beschleunigung der Homepage von Gruenesmoothies.org ging.
An dem dortigen Avada Theme habe ich mir schon lange die Zähne ausgebissen. Mit einer Nutzlast von ehemals 1,5 MB war die Webseite auf Desktop Geräten ganz erträglich, aber mobil wurde es dann deutlich zäh. Zumindest wenn man nicht mit WLan oder LTE auf die Leitung gehen konnte. Während das Rauswerfen der Google Fonts noch sehr naheliegend (und mühselig) war, immerhin konnte ich so im Schnitt 160-180 KB an Nutzlast einsparen, war das Optimieren der dem Avada Theme beiliegenden freien Fonts (Icomoon und Font Awesome) etwas trickreicher. Und genau hier kam mir die Icoomon App zur Hilfe. Ich lud mir die entsprechende Font Awesome SVG Datei aus meinem Theme in Icomoon hoch und selektierte nur jene 8 Zeichen, die auf der Webseite überhaupt benötigt wurden. Damit schrumpfte die ehemals 72,5 KB schwere Font-Datei auf lediglich 1,1 KB zusammen. Was für ein krasser Gewinn 🙂
Ein Quick Win war dann das Umwandeln der beiliegenden Icomoon-Datei vom Format woff nach woff2. Das machte aus 17,5 KB nur noch 9,2 KB. Da das woff2 Format von allen neueren Browsern verarbeitet werden kann, ein smarter Zugewinn. Denn an den Inhalten hatte sich nichts verändert. Mit einem kleinen Haken. Es bedurfte noch etwas Fummelei, damit die Browser von der neuen woff2 Datei erfuhren und diese auch tatsächlich anfordern konnten. Und wo ich schon so weit am Rumtricksen war, konnte ich mir den letzten Optimierungsschritt auch nicht mehr verkneifen. Und habe Font Icomoon und Font Awesome zusammen gemixt, auf die notwendigen Zeichen eingedampft und das Resultat dann als neuen Icomoon Font exportiert. So wurden aus zwei Font-Dateien mit zusammen 90 KB Gewicht am Ende eine gemergte Datei mit nicht mal 5 KB. Es musste natürlich noch etwas CSS dazu gestrickt werden, damit die Fonts von den Browsern korrekt adressiert und angezeigt wurden.