Hyvä: Das neue Frontend für Magento

Hyvä? Hat uns der Name anfangs noch Kopfzerbrechen bereitet, wissen wir mittlerweile: Der Name ist bei dem leistungsstarken Theme für Magento Programm, bedeutet Hyvä auf Finnisch doch schlicht und einfach ‘gut’. Und gut ist das Theme allemal. Noch mehr als das: Es bietet eine ganze Reihe großer Vorteile gegenüber Luma, dem Standard-Magento-Theme. Wir haben zuletzt in einem Kundenprojekt einen Magento-Shop mit Hyvä umgesetzt und berichten gerne von unseren Erfahrungen.

Hyvä-Theme ist ein alternatives Frontend-Theme für die E-Commerce-Plattform Magento. Performance und einfache Anpassbarkeit stehen bei Hyvä klar im Vordergrund.

Im Standardfall basiert das Magento-Frontend auf dem Magento-eigenen Luma-Theme. Das Entwicklerteam von Hyvä hat das Magento-Frontend jedoch von Grund neu aufgebaut und setzt dabei auf die Technologien Tailwind CSS und Alpine JS. Zusätzlich stellt Hyvä-UI als UI-Bibliothek ganze Komponenten zur Verfügung, die mühelos ins Theme integriert werden können. Hyvä ist zugleich ein komplettes modernes Ökosystem für Magento: Neben Hyvä-Themes stehen auch der Hyvä-Checkout sowie Hyvä-Enterprise zur Verfügung. All das bringt eine Reihe entscheidender Vorteile mit sich, die wir genauer beleuchten möchten.

 Auf unnötigen Ballast wird verzichtet – Hyvä lädt im Frontend lediglich 2 Ressourcen, Luma dagegen mehr als 200. Weniger Code spiegelt sich wider in weniger Komplexität, geringerem Aufwand und schnellere Ladezeiten.

Dank Tailwind CSS und Alpine JS lassen sich Online-Shops mit einem attraktiven Frontend erstellen, die eine flüssige Nutzererfahrung bieten.

Zahlreiche Features ermöglichen den Aufbau eines erfolgreichen Online-Shops, wie etwa Newsletter- oder Upselling-Funktionen. Redaktionelle Inhalte lassen sich durch Komponenten aus der Hyvä-UI ansprechend präsentieren. Nicht zuletzt stellt der Hyvä-Checkout eine intuitive und reibungslose Checkouterfahrung sicher. 

„Mit Hyvä das Magento-Frontend zu entwickeln, ist eine wahre Freude“, sagt Lisa aus unserem Frontend-Team. „Das Magento-eigene Luma-Theme ist komplex und erfordert den Einsatz verschiedener Libraries und Tools. Das hat eine längere Entwicklungszeit zur Folge, ganz abgesehen vom Einfluss auf die Performance. Hyvä dagegen überzeugt mit klarem Code und modularer Architektur. Anpassungen am Theme können wir unkompliziert vornehmen, ohne unerwünschte Nebeneffekte berücksichtigen zu müssen. Ein echtes Plus ist auch die Hyvä-UI: Sie stellt vorgefertigte Komponenten bereit, die die schnelle Integration verschiedenster Features erlauben.“

Und weiter: „Der Einsatz von Tailwind CSS und seinen Utility-Klassen erfordert ein gewisses Umdenken, wenn man vom klassischen CSS bzw. Less und SCSS kommt. Für uns hat die Arbeit damit jedoch gut funktioniert und wir haben die kürzere Entwicklungszeit und Flexibilität zu schätzen gelernt.“

Hyvä macht aber nicht nur Entwickler:innen Freude. Auch alle, die im E-Commerce-Bereich tätig sind, profitieren von dem schlanken Theme – und zwar nicht nur durch die effizientere Entwicklung. Auch bei den Themen Performance, Barrierefreiheit und Produktsicherheit kann Hyvä punkten.

Ein brandaktuelles Thema und die große Herausforderung für viele Online-Shops ist 2025 das Inkrafttreten des Barrierefreiheitsstärkungsgesetzes. Das Gesetz mit dem sperrigen Namen verpflichtet viele Shop-Betreiber, ihren Online-Shop digital barrierefrei zu gestalten.

Der entscheidende Vorteil von Hyvä-Themes ist, dass das Entwicklerteam viele Aspekte der digitalen Barrierefreiheit von Anfang an berücksichtigt hat. Beim prüfenden Blick auf den HTML-Code war unsere Frontend-Entwicklerin Lisa begeistert, dass dieser bereits weitgehend semantisch korrekt ist. „Das verkürzt einen Teil der Grundarbeit beim Herstellen der Barrierefreiheit deutlich. Die gewonnenen Ressourcen können dann in Feinarbeiten fließen, um die formellen Anforderungen gemäß BITV / WCAG zu erfüllen.“

Auch in puncto Produktsicherheitsgesetz macht Hyvä allen Beteiligten das Leben leicht. Die Produktsicherheitsverordnung verpflichtet viele Händler, bestimmte Informationen an verschiedenen Stellen zugänglich zu machen. „Das Hyvä-Theme bietet uns dank seiner Flexibilität und Erweiterbarkeit in der Entwicklung einfache Wege, die geforderten Angaben an den richtigen Stellen auszugeben“, betont Lisa.

Nicht zu unterschätzen ist der beträchtliche Vorsprung von Hyvä beim Thema Performance.

Schnelle Ladezeiten sind entscheidend für eine gute Nutzererfahrung und letztlich auch für die Conversion Rate: Nutzer:innen erwarten ein flüssiges Anwendungserlebnis und schnell-ladende Seiten, anderenfalls springen sie genervt ab und kommen erst gar nicht zum Kauf. Darauf weist u.a. schon eine Studie von Deloitte von 2020 hin. Auch Google misst der Ladegeschwindigkeit größte Bedeutung bei – so ist sie ein wichtiger Ranking-Faktor für die Position einer Seite in den Suchergebnissen; sie fließt aber auch als Wertungsfaktor in den Quality-Score in Google Ads ein. Schnelle Ladezeiten sind also entscheidend für die Sichtbarkeit eines Online-Shops, sowohl in den organischen Suchergebnissen als auch in bezahlten Suchanzeigen.

Das Entwicklerteam von Hyvä hat Geschwindigkeit und Performance konsequent in den Mittelpunkt gestellt. Und das spiegelt sich auch in den Messwerten wider: In unserem Projekt haben wir die Core Web Vitals für mehrere Seiten vor und nach der Umstellung auf das Hyvä-Frontend erfasst. „Wir waren begeistert, als wir die Werte gesehen haben“, berichtet Lisa.

Folgende Grafiken zeigen die Ergebnisse der Lighthouse-Tests, die wir in unserem Kundenprojekt vor und nach der Umstellung auf das neue Frontend erfasst haben. Exemplarisch sind die Startseite, eine Kategorieseite und eine Produktseite dargestellt. Ganz deutlich wird, dass die Werte sowohl auf dem Desktop als auch Mobil aus dem vorher orangen oder gar roten Bereich durchgängig in den grünen Bereich gebracht wurden – häufig nahe an die 100%-Marke.

Nach einzelnen gezielten Optimierungen konnten die Werte sowohl auf dem Desktop als auch Mobil durchgängig in den grünen Bereich, häufig nahe an die 100%-Marke gebracht werden.