Thomann io v2

thomann.io v2

Julian Kern, Fullstack Developer - Dec 9, 2019

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.

Das Konzept

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.

Picture Beispiel

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%)

Messung mit Google PageSpeed Insights

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!

Our offices

Remote. Distributed. Together.

Work from home or any of our offices. Our team is 100% remote and will stay this way. You need a stable internet connection and your laptop.

Treppendorf

Our Thomann headquarters. Just a few minutes drive outside of Bamberg. Come by to visit our shop or meet with colleagues apart from tech & data.

Berlin

Our thomann.io office in the heart of Berlin. Easily reachable at Rosenthaler Platz. Perfect for workshops and team building.

Erlangen

Our thomann.io office in Nuremberg's metropolitan area. Just a few minutes by foot from Erlangen station. Nice, quiet location to do some deep work.

Our thomann.io Blog

May 13, 2022 - Ralph Cibis

Thomann.io goes Cyberpunk

We went fully cyberpunk! Our branding community's last side and heart project.

Jan 3, 2022 - David Beuchert

DIY software: Why it's the one and only way to do it and everyone else is wrong

My provoking approach wooing for more in-house development.

Dec 8, 2021 - Nadine

Going fully responsive

Why we redesigned our shop - and why purple's the new blue.

Oct 18, 2021 - Julia Manger

Open Space 2021

Summer 2021 - Home office, lockdown, a fourth wave and: huh?! An Open Space!

Aug 6, 2021 - Stefan Stammler

Bits, Beats, Ops-Team

Someone needs to bring our shop online. This is our mission.

Jul 7, 2021 - Ralph Cibis

Hello, Webteam

We are the Thomann Web Team. We create thomann.de and the Thomann App.

Jan 27, 2021 - Nadine

What Kan Kanban do

The idea behind moving cards - with a crispy epilogue.

Oct 11, 2020 - Julian Kern

ThomannUI: Der Beginn einer Component Library

Ein Einblick in die Component Library auf Basis von React von Julian Kern

Sep 7, 2020 - Francesco

Guitars to Oslo or: The Art of Offering the Right Shipping Methods

Our developer Francesco provides you with behind the scenes insights

Jul 14, 2020 - Thomas Tischner

How Thomann is mastering the move to Kubernetes

Our Sysadmin Thomas tells you from his day-to-day work

Dec 9, 2019 - Julian Kern

thomann.io v2

Frisch aus dem Kühlregal: Hier ist das neue Frontend!

Nov 4, 2019 - Domi

Thomann Dev Camp 2k19

This year under the Slogan "ready for our collective take-off".

Aug 24, 2018 - Julia Manger

Das Thomann Dev Camp

Wir wissen, was das Dev Team letzten Sommer gemacht hat. Ein Einblick.

Severe case of I-wanna-work-with-you?

...or any questions to us? Give Anni a call!

Welcome to Treppendorf, welcome to Thomann Music

We're inspiring and enabling people to speak music, everywhere. 24/7.