AWS Serverless Image Handler: Ein Bild, unendliche Möglichkeiten

Die steigende Nutzung mobiler Endgeräte stellt den E-Commerce vor neue Herausforderungen. Die Darstellung von Onlineshops muss optimal auf die verschiedenen Devices angepasst werden. Gleichzeitig muss die Seite so schnell wie möglich laden, damit die Nutzer:innen sie nicht nach wenigen Sekunden wieder verlassen. 

Shopsysteme wie Shopware oder Magento bieten einige Basis-Funktionen für die Ausspielung der Website auf unterschiedlichen Endgeräten. Die wachsenden Anforderungen in Sachen User Experience und Performance können sie allerdings nicht optimal bedienen. 

Philipp Herz, Technischer Leiter bei dmf, erklärt im Interview, wie wir mit modernen Tools effiziente und performante Onlineshops für verschiedenste Endgeräte entwickeln. Spoiler: Wir setzen dabei auf den AWS Serverless Image Handler.

Worin liegen in Zukunft die Herausforderungen, um mit einem Onlineshop eine gute Performance zu erreichen? 

Philipp: Schon jetzt nutzen sehr viele Menschen nicht mehr nur den klassischen Desktop fürs Onlineshopping, sondern surfen von unterwegs über ihre mobilen Endgeräte durch die verschiedenen E-Commerce-Plattformen. Neben Tablets und Smartphones kommen nun auch neue Geräte dazu, beispielsweise Wearables wie Smartwatches, Smartglasses oder Wristbands. Mit Blick auf IoT wird sich diese Entwicklung in den nächsten Jahren noch verstärken. Onlinehändler:innen müssen sich dafür wappnen, ihren Shop flexibel auf immer neue Devices anzupassen und dabei stets eine sehr gute Performance zu erzielen.

Wo stoßen die etablierten Shopsysteme dabei an ihre Grenzen?

Philipp: Wichtig für eine gute Performance ist unter anderem, die Web-Assets, also beispielsweise Bilddateien, für verschiedenste Endgeräte zu optimieren und an die jeweilige Bildschirmgröße angepasst auszuspielen. Shopsysteme wie Shopware oder Magento passen Bilder aber in der Regel nur für drei verschiedene Devices an ‒ Desktop, Tablet und Smartphone. Neue Geräte, wie die oben erwähnten Wearables, werden dabei nicht berücksichtigt. Das ist zum einen aus Performance-Sicht nicht optimal. Zum anderen müssen die jeweiligen Bild-Versionen mit den verschiedenen Auflösungen im Shopsystem berechnet und gespeichert werden, was ein Vielfaches an Speichervolumen benötigt.

Wenn der Onlineshop also für immer mehr unterschiedliche Endgeräte optimiert werden muss, wird immer mehr Speicherplatz benötigt?

Philipp: Genau darin liegt das Problem, für das es aber glücklicherweise smarte Lösungen gibt. Die Schlüsselworte lauten hier: Cloud Computing und Content Delivery Network (CDN). Bei dmf greifen wir hierfür auf die Tools von Amazon Web Services (AWS) zurück. Auf dem Objektspeicherservice Amazon S3 können wir für die unterschiedlichsten Anwendungsfälle beliebige Mengen an Daten speichern und mit der Amazon CloudFront jederzeit nahtlos darauf zugreifen. Die einzelnen Bilddateien werden also nicht mehr im Shopsystem gespeichert und darüber auf die Website eingebunden, sondern liegen im ausgelagerten Storage. Die Anbindung erfolgt dann über den Zugriff auf das CDN (hier: AWS CloudFront). Diese Lösung ist nicht nur flexibel skalierbar und kostengünstig, sondern auch sehr zuverlässig und performant.

Inwiefern lässt sich durch die Nutzung des CDN die Performance steigern?

Philipp: Normalerweise liegen die Webinhalte auf einem Ursprungsserver, von dem aus sie weltweit ausgeliefert werden. Das CDN hingegen bietet uns die Möglichkeit, ein globales Netzwerk an sogenannten CDN-Knoten zu nutzen. Es ist also egal, ob eine Kundin in Australien oder in Frankreich auf den Onlineshop zugreift ‒ die Seitenladezeit in Bezug auf die Assets ändert sich nicht, da das CDN die Anfrage immer vom nächstgelegenen Knotenpunkt beantwortet. Die Antwort- und Ladezeiten der Website lässt sich dadurch extrem verkürzen. Zudem werden die Web-Assets nach dem ersten Aufruf aus dem Cache des CDN geliefert, was die Auslieferung an den Browser bzw. Client nochmals beschleunigt. Ein weiterer Vorteil des CDN ist, dass das Quellsystem (Origin) entlastet wird, da der Website-Traffic sich auf verschiedene Knotenpunkte verteilt. Ein moderner Browser kann somit deutlich mehr Ressourcen gleichzeitig laden. Dadurch läuft der Onlineshop performanter.

Du hast anfangs davon gesprochen, dass die Bilder im Onlineshop für immer mehr unterschiedliche Endgeräte optimiert werden müssen, die Shopsysteme dies aber nur eingeschränkt leisten können. Wie habt ihr das gelöst?

Philipp: Hier kommt der AWS Serverless Image Handler zum Einsatz. Dieser optimiert Bilddateien anhand verschiedener Parameter automatisch für jedes beliebige Endgerät und wandelt diese sogar in das hochperformante Format WebP um. Die entsprechenden Konfigurationsparameter für die verschiedenen Devices müssen dafür nur einmalig im Frontend definiert werden, die Bildoptimierung läuft dann vollautomatisch. 

Der besondere Clou besteht nun noch in der Verbindung zwischen dem Serverless Image Handler und dem Simple Storage Service: Man muss nur ein einziges, hochauflösendes Originalbild auf ein Amazon S3 Bucket hochladen. Wenn ein Kunde die Website aufruft, erkennt der Serverless Image Handler dessen Endgerät, optimiert die Bilddateien entsprechend und liefert sie in Höchstgeschwindigkeit aus. 

Kurz und knapp auf den Punkt gebracht: Welche Vorteile bieten die AWS-Lösungen gegenüber dem Bildmanagement direkt im Shopsystem?

Philipp: Der Serverless Image Handler ermöglicht es, schnell und ohne Aufwand optimierte Bilder für alle Arten von Endgeräten bereitzustellen. Sobald neue Devices auf den Markt kommen, kann man also agil darauf reagieren. Bei Shopware, Magento usw. ist man hierbei momentan noch auf Desktop, Tablet und Smartphone beschränkt. Ein Riesen-Vorteil der AWS-Lösungen gegenüber der Bildbearbeitung im Shopsystem ist auch, dass kein zusätzlicher Speicherplatz verbraucht wird, um die verschiedenen Varianten eines Bildes vorzuhalten. Stattdessen benötigt man nur ein einziges Original-Bild, das kostengünstig in Amazon S3 gespeichert wird. Über die Amazon CloudFront werden die optimierten Bilddateien dann hochperformant global ausgeliefert.