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.

Begeistert von Linux und Open-Source-Software wohnt Philipp seit über 20 Jahren im Internet. In den 90ern war er bereits als selbstständiger Dozent auch international tätig und sucht seither immer wieder spannende DevOps-Themen und Software-Projekte. Als Technischer Leiter bei dmf berät und betreut er vor allem unsere Großkunden und Großprojekte. Darüber hinaus entwickelt er unser Produkt PWA hubble commerce.

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.

Ann-Kathrin Hofmann

Unternehmenskommunikation

Mehr aus unserem Blog

Shopware 6.3 Release
7. August 2020

Ab sofort steht die Version Shopware 6.3 mit neuen Funktionen und Verbesserungen zum Download bereit. Wir haben das aktuelle Release …

Mehr erfahren
Eine starke Produktpräsentation
28. Dezember 2020

Stellen Sie sich vor, Sie stehen in einem Ladengeschäft und überall liegen lieblos aufeinandergestapelte Produkte auf Wühltischen herum. Erst einmal …

Mehr erfahren
Wie Sie den Warenkorbwert Ihres Onlineshops steigern
30. März 2021

Sie haben bereits hohen Traffic in Ihrem Onlineshop und auch mit Ihrer Conversion Rate sind sie zufrieden? Hervorragend! Um Ihre …

Mehr erfahren
Shop the Look: Der Onlineshop als Inspirationsquelle
28. April 2021

Bildlastige Social-Media-Plattformen wie Pinterest und Instagram erleben seit einigen Jahren einen massiven Hype, der auch für den E-Commerce eine wichtige …

Mehr erfahren
Barrierefreier E-Commerce: Das sollten Shopbetreiber beachten
1. Oktober 2020

Beim Thema “Barrierefreiheit” denken die meisten von uns als erstes an Aufzüge in öffentlichen Gebäuden, ebenerdige Duschen oder rollstuhlgerechte U-Bahnen. …

Mehr erfahren

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1