Back to blog home

Case Study: 50% schnellere Ladezeit von Magento-Seiten mit Cloudinary

Welchen Einfluss hat die Seitenladezeit auf Ihr Geschäft? Die wahrgenommene Dauer, bis eine Shop-Seite vollständig geladen ist, hat entscheidenden Einfluss auf den Verkaufserfolg Ihres Shops.

Es existieren Untersuchungen und Studien zum Thema „Vom Nutzer erwartete Ladezeit einer Webseite“.

Zwei Sekunden ist die Dauer, die als ausreichend empfunden wird. Die Seitenladezeit lässt sich sehr einfach online messen: Zwei der prominentesten Werkzeuge zum Messen der Seitenladezeit sind Googles PageSpeed Insights und Pingdom Tools.

Für Shop-Betreiber ist die Seitenladezeit  sehr wichtig, da sie sich meist im direkten Wettbewerb zu konkurrierenden Anbietern befinden. Ist der Nutzer nicht zufrieden, ist der Mitbewerber nur ein Klick entfernt. Zudem ist die Aufmerksamkeitsspanne des Kunden generell eher kurz: Eine langsam ladende Shop-Seite kann dazu führen, dass der Kunde das Browser-Fenster schließt, oder sich dem Angebot eines Mitbewerbers zuwendet.

Verfolgt der Shop-Betreiber keine Preisführungs-Strategie oder bietet er Produkte an, die auch in anderen Shops erhältlich sind, sollte er die Verbesserung seiner Shop-Nutzbarkeit zu einem seiner wichtigsten Ziele erklären.

Bilder haben einen großen Einfluss auf die Seiten-Ladezeit:

Bilder machen ca. 2/3 der übermittelten Daten einer Webseite aus. Während die Anzahl der Bilder auf Webseiten in den letzten Jahren mehr oder weniger konstant geblieben ist, hat die Größe der Bilder und damit das Datenvolumen dramatisch zugenommen.

Bilder machen den Großteil der zu übermittelnden Daten aus und haben einen entsprechend großen Einfluss auf die Ladezeit einer Webseite. In den letzten fünf Jahren haben sich die Bildgrößen nahezu verdreifacht. Gute Produktbilder sind eines der wichtigsten Werkzeuge, um den Kunden bei seiner Auswahl zu unterstützen.

Wie verarbeitet Magento Ihre Bilder?

Beim Upload werden für jedes Bild gewöhnlich drei Bildgrößen von Magento generiert, die für verschiedene Bildschirmauflösungen vorgehalten werden.

Sofern notwendig, reduziert Magento die Farbtiefe der Bilder, um die Dateigröße zu vermindern. Diese Reduktion der Bildgröße wirkt sich jedoch auf die Qualität der Bilder aus. Im Vergleich zu dem Originalbild sieht das neue Bild oft ausgewaschen aus. Ihr Shop verliert sofort an sichtbarer „Wertigkeit“ und Attraktivität für den Nutzer. Nachfolgend stellen wir als Alternative die Bildverarbeitung mit Hilfe der Cloudinary Extension vor. Sie dient als Ersatz der Onboard-Mittel, die Magento mitbringt.

Magento Bildverarbeitung mit Cloudinary

Installation der Cloudinary Extension

Die Extension kann auf Magento Connect kostenlos geladen werden. Die Installation dauert nur einige Minuten. Im Video werden notwendige Schritte erklärt.

Für den Administrator von Magento ändert sich nichts. Bilder werden weiterhin mit der bestehenden Methode in Magento importiert. Sie werden allerdings eine sehr viel kürzere Ladezeit der Seiten feststellen, da Ihre Bilder nun von Cloudinary.com ausgeliefert werden.

Wie arbeitet Cloudinary?

Jeder Browser kann JPEG-Bilder verarbeiten, doch es existieren Browser-spezifische Bildformate, die eine höhere Darstellungqualität bei geringeren Datenmengen ermöglichen.

Cloudinary rechnet automatisch beim Upload die Bilder in die verschiedenen Bildformate um, senkt deren Größe und legt diese im Datenspeicher ab. Sobald der Seitenaufruf des Nutzers erfolgt, übermittelt das System dasjenige Bildformat, das für den Browser am besten geeignet ist. Zudem entfernt Cloudinary ungenutzte Meta-Daten von den Bildern und verringert so zusätzlich die Datenmenge.

Für die Browser Chrome oder an Android Endgeräten wird anstatt des JPEG-Formats ein „lossless“ konvertiertes Bild im Format WebP von Google übermittelt. Mit dieser Konvertierung senkt sich die übermittelte Datenmenge um ca. 60% ohne Minderung der Bildqualität. Für den Internet Explorer wird das Bildformat JPEGXR, anstatt des JPEG-Formats ausgeliefert. Dieses für den Internet Exporer spezialisierte Format ermöglicht die Senkung der Dateigröße um ca. 40%.

Datenübermittlung durch Akamai:

Für die Übermittlung der Bilddaten arbeitet Cloudinary mit dem marktführenden CDN-Provide Akamai zusammen.

Akamai cached die Bilder auf Servern in unmittelbarer Nähe der Nutzer und übermittelt sie von dort. Dies macht sich besonders bei internationalen Shops bemerkbar, da die Bilddaten oft über weite Strecken übermittelt werden müssen.

Die Bilder werden über verschiedene Server verteilt und beim Abruf simultan an den Browser übermittelt. Das Backup der Bilddaten wird ebenfalls von Akamai geleistet. Wird ein Bild versehentlich gelöscht, kann es innerhalb von Sekunden wieder hergestellt werden.

Test: Kleinere Bilder bei gleicher Qualität 

(Alle Tests und Benchmarks wurden auf MageCloud.net ausgeführt)

Beispiel Produktbilder: 80% weniger Bilddaten bei gleicher Qualität Ohne Cloudinary: 38 Kb - mit Cloudinary:  7.91 Kb

Beispiel Teaser: 79% Reduktion der Bilddaten Ohne Cloudinary: 150.11KB - mit Cloudinary: 51KB

Test: Auswirkung auf die Seitenladezeit

Ohne Cloudinary: 1.78s.

Mit Cloudinary:  1.01s.

Zusammenfassung

Online-Käufer warten nicht gerne. Langsame Seitenladezeiten haben einen negativen Einfluss auf die Conversion und damit auf den Shop-Umsatz. Einer der wichtigsten Faktoren ist die Ladezeit sind die Bilddaten von Produktbildern und Teasern, da diese den größten Anteil an der zu übermittelnden Datenmenge einer Webseite haben. Die Optimierung der Bildgrößen stellt eine wirkungsvolle Maßnahme zur Verminderung der Seitenladezeit dar.

Die Cloudinary’s Extension für Magento senkt die Seitenladezeit um mehr als 50% durch

  • Nutzung von Bildformaten, die für die verschiedenen Browser optimiert sind
  • Einsatz eines CDN (Content Delivery Networks) - Bilder werden auf Servern weltweit nahe dem Standort des Users gehostet
  • Einsatz von modernsten Verfahren zur Bildkompression ohne auf Qualität zu verzichten

Useful Links

Das Cloudinary-Modul kann im Magento Connect Store kostenlos herunter geladen werden. Cloudinary.com: Hier finden Sie weitere Informationen über Cloudinary sowie zur Preisgestaltung.

Über den Autor: Diese Case Study wurde von MageCloud und Grant Kemp bereit gestellt. Als Omni-Channel Manager bei Session Digital verfügt Grant über langjährige Experise in Mobile Apps, Mobile Web und Analytics. Er ist zudem als technischer Autor und Blogger für ConnectedWindow.com tätig. Grant auf  LinkedIn.