• 25. März 2020

Bessere Performance bei Icon Fonts – discoverize Update 8.12.0

Bessere Performance bei Icon Fonts – discoverize Update 8.12.0

Bessere Performance bei Icon Fonts – discoverize Update 8.12.0 962 901 Andrej

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

Screenshot mit Vergleich der Icon-Font-Größen vorher und nachher
Icon-Font-Datei-Größen vorher und nachher

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

    Unverbindlichen Beratung anfragen

    Gerne besprechen wir in einem Vorgespräch in ca. 15 Minuten Ihre Portalidee und ob und wie sich diese mit discoverize umsetzen ließe. Entweder per Telefon oder gerne auch in Person bei uns im Büro.



    9-12 Uhr12-15 Uhr15-18 Uhr

      Kontakt zum discoverize Team

      Bei allen Fragen rund Branchenportale, Beratung, Strategie helfen wir gerne weiter.