Top Magento Frontend für eCommerce: Luma vs. Hyvä

Wenn Sie Händler oder Inhaber eines eCommerce-Unternehmens sind, ist die Verbesserung Ihrer Website Ihre oberste Priorität. Sie wünschen sich eine schnell ladende Website, die ein ausgezeichnetes Benutzererlebnis und eine hervorragende Leistung bietet. Aber die Frage bleibt: Welches Frontend-Framework sollten Sie für die Magento 2-Plattform wählen - Luma oder Hyvä Themes?

Dieser Artikel hilft Ihnen, Luma und Hyvä zu vergleichen, um Ihre Entscheidungsfindung zu vereinfachen.

Hyvä Themes: eine fortschrittlichere, effizientere und aktuellere Alternative zum Luma-Theme

Im Mai 2021 erklärte Google, dass Indikatoren für die Seitenerfahrung in seine Suchranking-Kriterien integriert würden. Wir haben bereits verstanden, dass langsam ladende Seiten die Nutzer frustrieren, und nun scheint es, dass auch die Suchmaschinen ungeduldig mit Verzögerungen sind.

Deshalb binden wir bei Wilma die Hyvä Themes aktiv in unsere Projekte ein. Es ist von Haus aus hochperformant und reduziert die Entwicklungszeit von kundenspezifischen Magento-Frontends. Es wird Sie und Ihre Kunden glücklich machen. Werfen wir einen Blick auf die Testergebnisse und den Vergleich von Luma und Hyvä, wo wir die Vorteile und das überlegene Ergebnis von Hyvä klar erkennen können.

Homepage

Mobil Homepage Mobile
Schreibtisch Homepage Desktop

Produktlistenseiten

Mobil PLP Mobile
Schreibtisch PLP Desktop

Produkt-Detail-Seite

Mobil PDP Mobile
Schreibtisch PDP Desktop

Das Luma-Thema lädt über 200 JS/CSS-Ressourcen,
Hyvä lädt nur 2 JS/CSS-Ressourcen!

Luma verwendet einen alten Ansatz für die Frontend-Entwicklung, der heute völlig überholt ist. Die Architektur des Themas sieht vor, dass eine riesige Menge an Ressourcen geladen wird, auch wenn sie auf einer bestimmten Seite der Website im Moment nicht verwendet werden.

Hyvä bietet einen neuen Technologie-Stack. Es kombiniert die besten Teile der Magento-Frontend-Entwicklung mit modernen Tools, wie AlpineJS und TailwindCSS.

Luma

Luma ist das Standard-Frontend-Theme für Magento 2 und wurde unter Verwendung mehrerer komplexer Technologien entwickelt, die sich auf die Leistung und die Komplexität der Entwicklung auswirken:

  • RequireJS: Dies ist ein JavaScript-Datei- und Modullader, der für die Verwendung im Browser optimiert ist. Er verbessert die Geschwindigkeit und Qualität der Codeentwicklung, indem er das asynchrone Laden von JavaScript-Dateien ermöglicht und so die wahrgenommene Ladezeit reduziert.
  • Knockout JS: Diese JavaScript-Bibliothek wird in Magento 2 ausgiebig für die Erstellung reichhaltiger, reaktionsfähiger Anzeige- und Editor-Benutzeroberflächen mit einem sauberen zugrunde liegenden Datenmodell verwendet. Alle Änderungen an Datenmodellen werden automatisch in der Benutzeroberfläche widergespiegelt und vice versa.
  • Umfangreiche Seitenanfragen: Eine typische Magento 2-Seite mit dem Luma-Theme kann mehr als 200 Anfragen generieren. Dazu gehören Anfragen für verschiedene JavaScript-, CSS-Dateien und Bilder, die die Ladezeit der Seite und die Gesamtleistung erheblich beeinträchtigen.

Luma erzeugt eine hohe Anzahl von Anfragen pro Seite, was sich negativ auf die Leistung und die Ladegeschwindigkeit der Seite auswirken kann. Dies macht es weniger optimal für effizienzorientierte Szenarien.

Anfragen insgesamt - 251
  • JS - 207 Anfragen
  • CSS - 5 Anfragen
  • Ladezeit - 3.27 s
luma-requests

Hyva

Hyvä ist ein relativ neues Theme, das zur Vereinfachung und Optimierung des Frontends von Magento 2 Shops entwickelt wurde. Es nutzt moderne Technologien mit einem Fokus auf Leistung und Entwicklereffizienz:

  • AlpineJS: Ein minimales Framework für die Komposition von JavaScript-Verhalten in Ihrem Markup. Es bietet reaktive und deklarative Natur ähnlich wie Vue oder React, aber mit viel weniger Overhead.
  • Tailwind CSS: Es handelt sich um ein CSS-Framework mit Klassen wie flex, pt-4, text-center und anderen, die so zusammengestellt werden können, dass sie ein beliebiges Design direkt in Ihrem Markup erstellen. Es ist bekannt für seine Geschwindigkeit und Flexibilität.
  • Reduzierte Seitenaufrufe: Hyvä reduziert die Anzahl der Anfragen auf einer Seite erheblich und hat oft weniger als 14 Anfragen. Diese Verringerung wird durch die Straffung der für eine Seite benötigten Elemente und die Verwendung moderner CSS- und JavaScript-Verwaltungstechniken erreicht, was zu kürzeren Ladezeiten und einem besseren Nutzererlebnis führt.

Hyvä reduziert die Anzahl der Anfragen drastisch, was die Leistung erheblich steigert und die Seitengeschwindigkeit erhöht, was es zu einer hervorragenden Wahl für eine schlanke und effiziente Webentwicklung macht.

Anfragen insgesamt - 14
  • JS - 1 Anfrage
  • CSS - 1 Anfrage
  • Ladezeit - 361 ms
hyva-requests

Google ändert seinen Algorithmus regelmäßig und ohne Vorankündigung.

Bei Wilma überwachen wir kontinuierlich die Google PageSpeed-Webvitaldaten sowie alle relevanten Metriken und Leistungsergebnisse. Wir nehmen regelmäßig notwendige Anpassungen vor, um sicherzustellen, dass Ihr Projekt in hervorragendem Zustand bleibt.

Mone Wildenberg, CEO

Warum sind die Ergebnisse nach der Umstellung auf ein Hyvä-Theme nicht immer so gut wie in der Demo?

Bei der Migration eines bereits aktiven und dynamischen Projekts können verschiedene Dienste von Drittanbietern einbezogen werden, die die Gesamtleistung und die Metriken in Google PageSpeed Insights beeinflussen können.

Hier ist ein Beispiel für einige dieser Dienste oder Werkzeuge:
  • Integration von Google Analytics und Google Tag Manager
  • Facebook-Pixel, TikTok-Pixel
  • Hilfsmittel für die Zustimmung wie Usercentrics
  • Andere Tools von Drittanbietern, z. B. trbo, mouseflow, hotjar

Unsere Entwickler bei Wilma sind versiert im Umgang mit solchen Fällen und in der Umsetzung von Best Practices, um hervorragende Ergebnisse zu erzielen.

Unsere Entwickler verfügen über umfangreiche Erfahrungen in einer Vielzahl von Projekten, die sie in die Lage versetzt haben, komplexe technische Probleme effizient anzugehen und zu lösen.

Durch den Einsatz bewährter Verfahren und innovativer Lösungen stellen wir sicher, dass Ihr Projekt unter Berücksichtigung der höchsten Qualitäts- und Leistungsstandards ausgeführt wird. Unsere Fähigkeiten und unsere Liebe zum Detail sorgen dafür, dass Ihr Projekt von den neuesten Techniken und Innovationen profitieren wird.

Steigern Sie die Leistung Ihrer Website mit uns.

Kontaktieren Sie uns, um die Leistung Ihres Projekts mit Hyvä Themes zu steigern.

Sag hallo