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

Von Ann-Kathrin Hofmann
4. Juni 2021
Lesezeit: 4 Minuten

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.

Mehr aus unserem Blog

Barrierefreiheit: Checkliste für Onlineshops
25. April 2022 · Lesezeit: 3 Minuten

Zur kostenlosen Barriefreiheit-Checkliste

Barrierefreiheit wird für Onlineshops bald zur Pflicht. Ab dem 28. Juni 2025 müssen digitale Services für alle …

Weiterlesen
Welcher Checkout-Typ ist der richtige
29. Oktober 2021 · Lesezeit: 4 Minuten

“Die Wahrheit liegt auf dem Platz.” Nun sind wir bei dmf nicht allesamt begeisterte Fußball-Experten. Doch diese Fußball-Weisheit von Otto …

Weiterlesen
Digital Sign: Verträge online abschließen
3. September 2021 · Lesezeit: 2 Minuten

Beim Bäcker brauchen wir sie nicht. Auch herkömmliche Käufe im Online Shop funktionieren ohne sie. Doch schon beim Handy-Vertrag kommen …

Weiterlesen
EDI-Integration im B2B E-Commerce: mehr Effizienz, weniger Kosten
9. Mai 2022 · Lesezeit: 6 Minuten

Der elektronische Datenaustausch zwischen Unternehmen, kurz: EDI, wird im Zuge der Digitalisierung immer wichtiger. Besonders im B2B E-Commerce lassen sich …

Weiterlesen
Wie Sie mit Marketing-Automatisierung Ihren B2B E-Commerce optimieren
23. Mai 2022 · Lesezeit: 4 Minuten

In unserem Beitrag zum Thema Leadgenerierung haben wir uns mit Kundengewinnung im B2B-Vertrieb beschäftigt. Effizienz war dabei das entscheidende Kriterium. …

Weiterlesen