Thomann io v2

Autor-Facts

NameJulian Kern
PositionFullstack Developer
Twitter@juliankern
GitHub/juliankern
8. Dezember 2019

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!

Stylesheets und Stylesheet Präprozessoren am Beispiel LESS

Stylesheets und Stylesheet Präprozessoren am Beispiel LESS

Das WWW ohne Stylesheets! Das wäre eine triste Ansammlung von HTML.
Thomann Dev Camp 2k19

Thomann Dev Camp 2k19

Dieses Jahr meldet sich das Dev Camp unter dem Motto “gemeinsam abgehoben sein”
Das Thomann Dev Camp

Das Thomann Dev Camp

Wir wissen, was das Dev Team letzten Sommer gemacht hat. Ein Einblick.
Conditional compilation, tree shaking and dead code elimination with webpack

Conditional compilation, tree shaking and dead code elimination with webpack

Webpack is a tool with strategies for code optimization and minification
Introducing: The Woodpicker

Introducing: The Woodpicker

Developing a Highly Specialized Tool for a 'Special' kind of Musician
Das Slack-Battle

Das Slack-Battle

Der Umzug des Thomann-Teams von Skype auf Slack hat einige Neuerungen mit sich gebracht. Für alle,...