Shop Ladezeit von weniger als 1 Sekunde - mit Hyvä Theme
Das neue Magento Hyvä Theme liefert eine neue Basis zur Erstellung für dynamische, responsive und vor allem besonders schnelle Online-Shops mit Magento. Als langjährige Magento Agentur und Adobe Solution Partner, haben wir uns den aktuellen Stand der Umsetzung angesehen und beleuchten nachfolgend, was mit Hyvä geht - und was nicht.
Stand Oktober 2023 sind bereits über 2.100 Shops auf Magento mit Hyvä-Theme umgesetzt worden.
Der im April 2023 veröffentlichte Magento Shop von Klyd hat eine Ladezeit von weniger als einer Sekunde auf der Startseite.
Hochwertige und professionelle Umsetzung
0% Finanzierung oder Leasing möglich
Shop Ladezeit unter 1 Sekunde
Jetzt Beratungstermin vereinbaren
Vereinbaren Sie einen unverbindlichen Beratungstermin für Ladezeit-Optimierungen, Online-Shop-Entwicklung, Betreuung und Support oder Projekt-Übernahmen mit Magento, Adobe Commerce oder Mage-OS.
Fast and Furious: Google's 3 Sekunden Regel
Bereits im September 2016 hat Google im Rahmen des Blog-Post “The need for mobile speed”, auf Basis der Analysen ihrer Google-Ads langsame Website-Ladezeiten als Conversion-Killer und ein Hindernis im Online-Shopping herausgestellt. Die zitierte Studie stellt dabei die folgenden drei Kern-Aussagen als die größten Blocker für Conversions heraus:
- 53 % der Besuche werden wahrscheinlich abgebrochen, wenn das Laden der Seiten länger als 3 Sekunden dauert
- Einer von zwei Menschen erwartet, dass eine Seite in weniger als 2 Sekunden geladen wird
- 46 % der Befragten geben an, dass sie das Warten auf das Laden von Seiten am meisten stört, wenn sie mit mobilen Geräten im Internet surfen
Schneller ist immer besser!
Im Januar 2018 hat Google veröffentlicht, dass die Ladezeiten einer Website bzw. eines Online-Shops als Ranking-Signal für Google genutzt wird. . Kurzum war die bisherige Annahme immer so, dass je schneller eine Seite lädt, diese auch deutlich besser im Ranking auf den Suchergebnisseiten bei Google abgeschnitten hatte (Quelle: Seitengeschwindigkeit als Rankingfaktor für die mobile Suche)
Bis zu diesem Zeitpunkt war dies jedoch nur eine "gefühlte Wahrheit", welche sogar offiziell von Google im Juli 2020 durch das Video "Page Speed: SEO Mythbusting" relativiert wurde. Bis November 2020 galt dann die Wahrheit, dass die Ladezeit einer Website zwar für den User weiterhin ein wichtiges Kriterium ist, jedoch sich nicht besonders stark auf das Ranking bei Google auswirkt.
Im November 2020 hat Google dann einen Zeitplan für die "Web Core Vitals" veröffentlicht. Google räumt damit, ab Mai 2021, der Nutzerfreundlichkeit und besonders auch der Ladezeit einer Website einen hohen Stellenwert beim Ranking ein.
Aber warum ist eine schnellere Ladezeit auch besser?
Google hat durch die ständige Messung der Ladezeiten von Websites folgende Kernaussagen festgestellt:
- "Wenn sich die Seitenladezeit von 1 auf 3 Sekunden erhöht, steigt die Absprungrate um 32 %". D.h. eine Website soll innerhalb von maximal 3 Sekunden laden, anderenfalls brechen bereits ein Drittel aller User den Aufruf der Website ab.
- "Erhöht sich die Seitenladezeit von 1 auf 6 Sekunden, steigt die Absprungrate um 106 %." D.h. lädt eine Website mehr als 6 Sekunden, brechen mehr als doppelt so viele User, wie vorher den Aufruf der Website ab.
Gerade im E-Commerce Umfeld kostet daher eine langsamere Website effektiv Conversions bzw. Käufe.
Hyvä, Hyvä - Der neue Shop Benchmark in Sachen Pagespeed
Galten früher Magento 1 Shops zwar als mächtige Tools, mit deren man nahezu jede Anforderung abbilden konnten, hatte Magento jedoch nie den Nimbus ein System zu sein, welches besonders schnelle Online-Shops produzierte. Mit dem Wechsel auf Magento 2 hatten viele Entwickler und auch Online-Shop Betreiber gerade in diesem Bereich einige Hoffnungen auf Besserungen. Leider wurden diese jedoch durch das Magento Standard "Luma Theme" (Link: Magento 2 Demo mit Luma-Theme) jedoch nicht bestätigt.
Magento 2 wollte erneut möglichst allen Anforderungen gerecht werden und bettete eine Vielzahl von JavaScripten und entsprechenden Libraries ein, was unweigerlich zu langsameren Lade- und Ausführungszeiten bei Aufruf des Online-Shop Frontend, der für User sichtbaren Website, führte. Ohne große Optimierungen und Anstrengungen kam ein Luma Theme Magento 2 Shop üblicherweise auf Google Pagespeed Scores auf Mobil-Devices auf 50 von 100 und bei Desktop-Geräten immerhin auf 95 von 100 maximalen Punkten.
Hyvä - Ein neuer Ansatz
Mit dem Hyvä Theme (Hyvä = das finnische Wort für "gut"), wurde der komplette Frontend-Ansatz von Magento 2 über den Haufen geworden. Alle JavaScripte wurden entfernt und es wurde so viel wie möglich auf moderne Browser und damit den Möglichkeiten von modernem Stylesheets (Tailwind CSS) und sehr schlanken JavaScripten (AlpineJS) gesetzt. Hyvä wurde offiziell am 12.02.2021 im Rahmen einer Release Party veröffentlicht.
Dies zahlt sich umgehend, bereits bei Erst-Installation, ohne große Anpassungen deutlich aus. Ein Demo-Hyva-Shop erreicht damit ohne Aufwand sofort einen Mobile-Score von über 80 Punkten im Google Pagespeed Check. Auf Desktop-Rechnern liegt der Score bereits bei 98 von 100 Punkten.
Durch eine Anpassung auf dem Server konnten wir für unseren Hyva-Demo-Shop, innerhalb weniger Minuten, sogar Mobile-Scores von 98/100 und Desktop-Scores bei 100/100 in den Google Pagespeed Insights erreichen.
Welche Magento Features werden mit dem Hyvä Theme unterstützt?
Das Hyvä Theme ist grundsätzlich einsetzbar bei Magento Shops ab Version 2.4. Auf der sehr übersichtlichen Feature Matrix des Hyvä Theme kann man die aktuelle Roadmap für die Entwicklung tagesaktuell einsehen.
Pauschal kann man sagen, dass Stand 03/2021 nahezu alle Magento Open Source Features bereits unterstützt werden, oder aber für die kommende Version 1.1 bereits in Entwicklung sind. Sämtliche üblichen Produkttypen (Einfache Produkte, konfigurierbare Produkte, Bündelprodukte, Gruppierbare Produkte, Virtuelle Produkte, Downloadprodukte) werden ebenso unterstützt wie alle zugehörigen Arten von Cross- bzw. Up-Selling und verknüpften Produktarten.
Produktdetailsansichten und Kategorienseiten, wahlweise als Liste oder auch Gitteransicht, werden ebenfalls berits out-of-the-box unterstützt, wie auch alles was im entferntestens mit Produkten zu tun hat. So sind beispielsweise die Lagerfähigkeit, Zoom-Bilder, Download-Beispieldateien oder auch Produktrenzensionen bereits unterstützt.
Der vollständige Kundenbereich inklusive Dashboard, Versand- und Rechnugsadresse, Bestellstatus, Nachbestellungen, Wunschliste, Produktreviews und auch Newsleter sind bereits aktuell in Hyvä verfügbar, wie auch ein EU-konformer Cookie-Hinweis.
Magento Shops mit hyvä Theme
Mit pumpe24.de hatte web-vision, als Early Adopter bereits vor 1.0 Release des hyvä Theme im Februar 2021, das erste Kundenprojekt erfolgreich gestartet.
Nachfolgend finden Sie eine Auswahl weiterer Pagespeed-optimierten Magento Shops mit hyvä Theme.
Was funktioniert sonst noch mit Hyvä?
Eines der sicherlich interessantesten Features welches die aktuelle 1.1.2 Version von Hyvä beinhaltet, sind die sogenannten Swatches. Mit diesen Swatches kann man in Magento Shop wahlweise Texte, Farben oder auch Bilder als Schaltfächen umsschaltbar machen kann. Stand 04/2022 sind die Swatches bereits für die Detailseiten komplett implementiert und damit auch für alle bisherigen Lizenznehmer kostenfrei verfügbar.
Des Weiteren ist für Version 1.1 bereits integriert, dass der Sprachwahlschalter, der Währungswechsler, sowie ein Layout Reset Theme mit Bestandteil ist. Besonders interessant dürfte auch die Unterstützung für den PageBuilder sein, der es ermöglicht individuelle Landingpages mit dem Magento eigenem CMS per Drag-and-drop zu erstellen.
Für Version 1.2 des Hyvä Theme wurde eine verbesserte Suche inklusive automatischer Vervollständigung und die kürzlich angesehen oder verglichenen Artikel avisiert.
Aktuell wird darüber noch hinaus, separat als eigenes Open-Source-Projekt, der Hyvä Checkout entwickelt, welcher aktuell kurz vor Fertigstellung ist und die wesentlichen Produktarten und Attribute unterstützt. Wer möchte, muss diesen jedoch nicht zwangsläufig mit Magento nutzen, sondern kann weiterhin einen Kassenprozess des Luma-Themes oder auch beispielsweise Firecheckout nutzen.
Ebenfalls als Open Source Software wird aktuell Hyvä Admin entwickelt, welches im Backend von Magento eine neue Möglichkeit bietete eigene Admin-Grids zu erstellen. Alle bestehenden Standard-Grids und Formulare im Magento Backend werden nicht etwas überschrieben, sondern sind weiterhin verfügbar. Auch hier liegt der Fokus, wie auch schon beim Hyvä Theme, in der schnellen Darstellung und Ausführung im Magento Backend.
Hyvä Theme 1.3 fügt Barrierefreiheits-Features hinzu
Die Version 1.3 des Hyvä Themes für Magento bringt eine Reihe von Neuerungen und Verbesserungen, insbesondere in Bezug auf die Zugänglichkeit und Benutzerfreundlichkeit. Hier sind einige der wichtigsten Änderungen, die helfen, das für Juni 2025 angekündigte Barrierefreiheitsstärkungsgesetz zu erfüllen:
Verbesserungen der Zugänglichkeit (Web-Accessibility):
- Einführung eines "Skip Navigation"-Links, der bei Fokus sichtbar wird.
- Verbesserungen bei der Tastaturnavigation, vornehmlich im Top-Menü und im mobilen Menü.
- Verbesserte Screenreader-Unterstützung, einschließlich Ankündigungen von Fokusänderungen und Flash-Nachrichten.
- Erhöhte Farbkontraste für bessere Sichtbarkeit und Lesbarkeit.
- Zugänglichere Produktbewertungsformulare und -zusammenfassungen.
Änderungen im Design und in der Benutzeroberfläche:
- Anpassungen im Header, wie verbesserte Suchfunktion und Kundenmenü.
- Verbesserungen bei der Darstellung von Produktgalerien und Slidern.
- Anpassungen im Warenkorb und Checkout-Prozess für eine bessere Benutzererfahrung.
Technische Optimierungen:
- Behebung verschiedener Bugs und Probleme, die in früheren Versionen auftraten.
- Verbesserungen in der Handhabung von Konfigurationsoptionen und Templates.
- Aktualisierungen in Bezug auf die Kompatibilität mit Magento-Modulen.
Weitere Anpassungen:
- Verbesserungen bei der Verwendung von Tailwind CSS und Alpine.js.
- Anpassungen in der Dokumentation und den Upgrade-Anleitungen.
web-vision als offizieller Hyvä Supplier
Wir bei web-vision, sind schlichtweg begeistert von der Performance und Flexibilität des Hyvä Theme. Wir gehen davon aus, dass die Umsetzungsgeschwindigkeit und die sonst aufwendige Pagespeed Optimierung damit deutlich verkürzt werden kann.
Stand 10/2023 befinden sich, alleine bei web-vision, zehn Online-Shops auf Basis von Magento 2.4 mit Hyvä Theme in Entwicklung oder wurden bereits gelauncht. Aktuell spricht man von einer Anzahl von weit über 2100 Magento Shops, die bereits auf Hyvä als Theme Grundlage setzen.