Hyvä Themes: Performance Frontend für Magento 2

Hyvä Themes Magento 2 basecom

Seit seiner Vorstellung auf der Reacticon Conference 2020, spätestens aber seit dem Release Anfang Februar 2021 sorgt das neue Magento-2-Theme Hyvä des Entwicklers Willem Wigman und der E-Commerce-Agentur integer_net für Aufsehen in der Magento-Community. Wir erklären, was es mit Hyvä auf sich hat und warum das neue Magento-Theme für Nutzer von Magento 2 so interessant ist.

Was ist Hyvä?

Hyvä wurde als Alternative zu PWAs und Headless Frontends entwickelt und funktioniert als klassisches Shopfrontend für Magento-2-Shops. Dazu wurde das Magento-Standard-Theme Luma komplett zerlegt und neu aufgebaut. Das Ziel des Entwicklers Willem Wigman war es dabei, die Komplexität des Themes so gering wie möglich zu halten und so die Datenmenge zu reduzieren, die an den Browser gesendet werden muss, um die Website aufrufen und nutzen zu können. Magento-2-Shops werden so mit Hyvä enorm schnell, während sich gleichzeitig der Entwicklungsaufwand verringert.

Mehr Speed für Magento-2-Shops

Wigman adressiert mit Hyvä ein Problem, dass insbesondere bei der Community Edition von Magento 2 sowohl bei Shopbetreibern als auch bei Entwicklern immer wieder für Frustration sorgt: Die Ladezeiten des Onlineshops sind zu lang und die Optimierung ist mit verhältnismäßig großem Aufwand verbunden. Ein Weg die Ladezeiten zu reduzieren, ist der Einsatz einer PWA als Frontend für den Magento-Shop. Die Entwicklung eines PWA-Frontends ist aber oft aufwändig und kann dadurch schnell zeit- und kostenintensiv werden. Insbesondere für viele kleine und mittlere Unternehmen kommt diese Lösung deshalb nicht in Frage.

Wigman verfolgt mit Hyvä Themes einen anderen Ansatz: Statt ein Headless Frontend an den Shop anzubinden, bleibt er in der Magento-Umgebung und setzt auf eine schlanke Version des Magento-Frontends, indem er eine radikale Reduzierung des JavaScripts-Codes vornimmt, der von dem Theme verwendet wird. Im Interview mit maxcluster erklärt er sein Vorgehen:

“Grund für diesen auf den ersten Blick radikalen Ansatz, waren die Unmengen an Code, die bei einem Luma-Theme an den Browser gesendet wurden. Das sind Megabytes an JavaScript und Hunderte von Dateien, die erst heruntergeladen werden müssen, bevor der Nutzer die Website tatsächlich besucht. Ich bin daher den umgekehrten Weg gegangen und habe alles auf nur eine Handvoll Anfragen reduziert. Also die geringstmögliche Datenmenge, die gesendet werden muss, um sich auf der Seite zu bewegen und so viel wie möglich von den Funktionalitäten zu nutzen, die der Browser bereits bietet. Denn im Endeffekt braucht JavaScript eine Menge Code, um Dinge zu tun, die der Browser eigentlich schon kann, wie beispielsweise die Validierung von Formularen aus Daten. JavaScript würde hierfür traditionell eine Bibliothek laden, der Browser ist aber bereits in der Lage, die Validierung auszuführen. Und das Gute daran ist, dass nichts heruntergeladen werden muss, damit diese Funktionalität des Browsers genutzt werden kann.”

Ein Ergebnis dieser Verschlankung des Themes ist für Shopbetreiber besonders interessant: Mit dem Hyvä Theme lassen sich deutliche Verbesserungen des Page Speed erreichen. Wigman berichtet von durchschnittlich 95 von 100 Punkten im Google Lighthouse Score und hervorragenden Ergebnissen für die Core Site Metrics von Google, die ab 2021 eine noch wichtigere Rolle für das Suchmaschinenergebnis spielen werden.

Ein ebenfalls sehr spannendes Ergebnis ist die deutliche Reduktion des Entwicklungsaufwandes durch Hyvä. Eine der wichtigsten Motivationen bei der Entwicklung von Hyvä war es, laut Wigman, die Arbeit der Softwareentwickler zu erleichtern. Für Shopbetreiber hat das den Vorteil einer schnelleren Time-to-Market und einer Reduktion der Kosten für die Entwicklung. Das beeindruckte nicht nur Adobe’s Magento Evangelist Ben Marks, der als Keynote Speaker bei der Online Release Party von Hyvä dabei war, sondern auch zahlreiche Magento-Entwickler, die sich von dem neuen Theme begeistert zeigen.

Was sagen unsere Experten zu Hyvä?

Um uns ein besseres Bild machen zu können, haben wir unsere Experten Jordan Kniest und Torben Höhn gefragt, wie sie das neue Theme aus technologischer Perspektive und in Bezug auf seine Einsatzmöglichkeiten für unsere Kunden bewerten:

Jordan Kniest
Jordan Kniest, Technical Lead Frontend

„Sowohl Alpine.js, als auch tailwind.css sind moderne, flexible Frameworks zur Entwicklung von Frontends. Dabei sind die Bibliotheken nicht nur extrem schlank, sondern haben auch viele Funktionen. Alpine.js ist von dem Javascript-Framework Vue.js inspiriert, welches wir bereits aktiv in mehreren Teams nutzen. Auch Tailwind wird bei basecom bereits aktiv genutzt. Das diese beiden Frameworks auch bei Hyvä eingesetzt werden, bedeutet für uns, dass wir Magento näher an unseren aktuellen Tech-Stack heran holen können. Dadurch können wir einerseits unsere Entwickler schneller projektübergreifend arbeiten lassen und andererseits auch besser neue Ideen und Konzepte unternehmensweit diskutieren und umsetzen.“

Torben Höhn
Torben Höhn, Technical Lead Magento

„Grundsätzlich eignet sich Hyvä meiner Ansicht nach für kleine, sowie auch für große Shops, da der neue Technologiestack keine Einschränkungen mit sich bringt. Neukunden würde ich absolut empfehlen, direkt mit dem modernen Frontend zu starten. Bestandskunden würde ich raten im Zuge eines Relaunches des Frontends auf Hyvä zu wechseln. Gerade für Bestandskunden hat sich Magento als Backend bewährt, sodass kein komplett neues Shopprojekt umgesetzt werden muss und somit bereits implementierte Funktionalitäten erhalten bleiben können.“

Über den Autor

Über den Autor

Jan Gebhardt ist seit 2019 für basecom im Content-Marketing tätig. Wenn er nicht über basecom-Themen wie E-Commerce-Systeme, PIM-Lösungen und Webportale schreibt, fährt er gerne Ski oder liest ein gutes Buch.

Jan Gebhardt