Beim Design der discoverize-Branchenportale verwenden wir Icon-Fonts zur Anzeige graphischer Symbole. Der Großteil der Icons ist auf allen Portalen identisch, denn sie werden für viele Standardelemente wie Navigation und Verlinkungen verwendet. Deswegen nutzten bis vor Version 8.12.0 alle discoverize-Portale denselben Icon-Font.
In jedem Branchenportal gibt es darüber hinaus aber auch branchenspezifische Icons. Anfangs war deren Anzahl im Vergleich zu den Standardicons gering. Doch mit jedem weiteren Portal kamen neue hinzu – und die Icon-Font-Dateien wuchsen stetig an. Zuletzt überstieg die Anzahl der portal-spezifischen Icons sogar die der Standardicons, sodass für die Mehrzahl der Portale mehr als die Hälfte der Icons überflüssig war. Wir wussten, dass wir dies ändern müssen.
Kleinere Dateien – kürzere Ladezeiten
Die Größe der Icon-Font-Dateien selbst konnten wir z. B. auf Kinderhotel.info für das bis dahin meistgenutzte Format WOFF von 102 KB auf 13 KB reduzieren – das entspricht einer Einsparung von über 87%! Darüber sind auch die CSS-Dateien für alle Portale um 40-50 KB kleiner geworden. Dadurch wird nochmal Übertragungszeit für eine wichtige Ressource eingespart und im Browser kann die Datei schneller verarbeitet werden, sodass die Webseite wiederum schneller laden kann.
Ein willkommener Nebeneffekt bei der Umstellung der Icon-Font-Generierung ist das Hinzukommen der WOFF2-Font-Datei, die nochmal kleiner ist als die WOFF-Datei und von allen Mainstream-Browsern unterstützt wird. Damit ist die Einsparung bei der Dateigröße defacto sogar noch etwas größer.
Verbesserungen während der Entwickung
Auch bei der Arbeit mit den Icons gibt es deutlichere Verbesserungen. Der Erstellungsprozess der Icon-Font-Dateien ist nun komplett automatisiert, sodass wir hier kostbare Zeit und manchmal auch Designer-Nerven sparen.
Fazit
Der Umbau der Icon-Font-Generierung war dringend notwendig. Die Verbesserungen sind vielfältig und kommen allen discoverize-Portalen zu Gute.
Hinterlasse eine Antwort