thomann.io v2
Das bisherige thomann.io war schon etwas in die Jahre gekommen - vor allem visuell. Und wenn man schon mal das Design anfasst, dann sollte auch die Technik moderner werden, oder?
Part 1: Das Design
Ganz klar, der Look muss nach 2019 - oder noch besser: 2020 - aussehen, und nicht mehr nach 2010. Dafür wurde viel Weißraum geschaffen und verspielte Muster und Grafiken entfernt. Das Grunddesign ist clean und übersichtlich. Verspielt wird die ganze Sache dann durch Details. Der Bubble-Look der Headergrafiken, die Grafiken unten im Footer, hier ein Pacman, da eine kleine unscheinbare Animation im Menübereich.
Das Farbschema wurde auch deutlich abgespeckt - die meisten Grautöne wurden entfernt, das Design besteht vor allem aus Schwarz/Weiss und Blau - grau wird nur noch als Akzent bei Buttons/Tags oder hier im Blog für die Autor-Facts benutzt. Aus 62 Hintergrundfarben wurden so vier, aus 63 Textfarben wurden 29.
Insgesamt wirkt das neue Design jetzt wieder wie aus einem Guss, und nicht mehr wie über die Jahre zusammengepuzzelt. Top! Einen großen Dank an Fabian Truxius und Andreas Schüßler aus dem Design-Team für die tolle Arbeit!
Part 2: Die Technik
Code
Auf der technischen Seite hat sich natürlich auch einiges getan. Wo wir gerade beim Thema abspecken waren: Das CSS wurde von 34Kbyte auf 10KByte verkleinert. Das JavaScript sogar von 598KByte auf nur noch 38,1Kbyte - es sind also rund 94% weggefallen. Das konnte dadurch erreicht werden, dass Frameworks und Bibliotheken wie jQuery, D3.js und der Slick-Slider ausgebaut, und durch leichtgewichtige, moderne Alternativen ersetzt wurden.
Auch kann Code jetzt nachgeladen werden. Mithilfe von Webpack4 haben wir Code-Splitting integriert, um nicht benötigten JavaScript-Code auch gar nicht erst zu laden. Einige Komponenten, wie die Karte auf der Hauptseite, werden auf kleinen Bildschirmgrößen auch gar nicht erst initialisiert, wir haben hier eine Möglichkeit für "Responsives JavaScript" geschaffen.
Bilder
Aber nicht nur Codeseitig wurde die Dateigröße verringert: Bilder werden jetzt über die ganze Seite hinweg optimiert geladen. Mittels des <picture>-Elements kann der Browser nun exakt die Bildgröße laden, die er benötigt. Mehrere Megabyte große Fotos die den Smartphone Datentarif belasten, sind damit Geschichte. Außerdem werden Bilder jetzt auch "lazy", also nur dann wenn sie tatsächlich benötigt werden, geladen. Wer nicht bis zum Seitenende scrollt, lädt auch nicht die dort unten plazierten Bilder und Grafiken.
Hier ein Beispiel für das <picture>-Element: Darin haben wir mehrere <source>-Elemente. Der Browser wertet immer das von oben erste Element aus, das passt, anhand der Kriterien type und media. Media legt hier fest, welche Mindestgröße das Browserfenster haben muss, Type welches Dateiformat der Browser unterstützen muss. WebP ist im Gegensatz zu dem Standard für Fotos JPEG, nochmals mehr für das Web optimiert. Wenn das Browserfenster also beispielsweise 600 Pixel breit ist, und der Browser WebP unterstützt, dann wählt der Browser das dritte Source-Element von oben aus. In dessen srcset-Attribut steht nun das Bild selbst, und das Bild in doppelter Größe (erkennbar an "2x"), und der Browser nimmt dort das Bild, das zur Bildschirmauflösung passt. Aktuelle Smartphones haben doppelt so viele Pixel pro Fläche (oder sogar noch mehr), wie ein Dektop PC, hier würde also das große Bild genommen.
Part 3: Ladezeiten
Das klingt ja alles ganz nett, aber wie sieht es mit den harten Fakten aus?
- Die Gesamtgröße der Homepage
- Desktop von 1,66MB auf 540KB verringert (-69%)
- Mobile von 1,65MB auf 432KB (-75%)
- Gesamtladezeit ohne Caching
- Desktop von 3,8s auf 1,7s (-56%)
- Mobile von 12,4s auf 5,7s (-55%)
- Gesamtladezeit mit Caching
- Desktop von 2,7s auf 0,9s (-66%)
- Mobile von 2,4s auf 0,89s (-63%)
- Zeit bis die Seite das erste Mal bedienbar wird ("Time to Interactive")
- Desktop von 1,6s auf 0,8s (-50%)
- Mobile von 11,2s auf 3,8s (-67%)
Diese Metriken sind natürlich nur Durchschnittswerte und können beim Einzelnen teils auch je nach Tageszeit abweichen. Unsere Messungen wurden allerdings alle zur gleichen Tageszeit und vom gleichen System aus durchgeführt, wir können also eine eindeutige Verbesserung messen.
Fazit
Das Resultat des Umbaus kann sich sehen lassen. Nicht nur optisch, sondern auch unter der Haube ist viel passiert. Dazu kommen viele kleine Detailverbesserungen, wie die Gist-Codebeispiele weiter oben, die vorher nicht möglich waren, kleine Spielereien und sogenannte "Eastereggs", die die Seite insgesamt ansprechender machen, und zeigen was wir hier bei Thomann so drauf haben. Ein gutes Aushängeschild für unsere Tech- und Dev-Abteilungen!
