Home » Magento Howto » 6 Wege, die Performance im E-Commerce zu steigern
Teaserbild Listicle Performance

6 Wege, die Performance im E-Commerce zu steigern

Glückliche Kunden, eine höhere Conversion-Rate und weniger Warenkorbabbrüche: All das kann das Ergebnis einer guten Webshop-Performance sein. Unser Listicle zeigt 6 Möglichkeiten auf, um die Performance Ihres Webshops zu verbessern.

 

Performance-Probleme haben unterschiedliche Ursachen

Die Performance eines Webshops ist enorm wichtig. Schnellere Webseiten wirken sich nachweislich positiv auf das Kaufverhalten sowie auf das Suchmaschinen-Ranking und die Auffindbarkeit des Onlineshops aus. Hat eine Website Probleme mit Seitenladezeiten, sind diese in der Regel kundenindividuell und lassen sich nur mit einem speziellen Monitoring und Tests identifizieren. Jedoch sollten unabhängig davon ein paar allgemeine Maßnahmen getroffen werden. Wir listen die wichtigsten auf.

 

1. Bilder und Mediendaten komprimieren

Grundsätzlich empfiehlt es sich, Bilder und andere Mediendaten so komprimiert wie möglich in den Webshop einzubinden. Beim Komprimieren werden zum Beispiel die Daten von Bildern verkleinert. Dadurch können Farbabstufungen verloren gehen, dies verringert aber die Dateigröße. Kleinere Dateien können vom Browser schneller geladen werden, wodurch sich die Seitenladezeit in der Regel deutlich reduziert. Damit durch das Komprimieren die Qualität der Bilder nicht leidet, gilt es bei jedem Projekt zu prüfen, wie stark komprimiert werden kann. Im Bestfall wird so ein gesundes Mittelmaß aus gutaussehenden Bildern und kleineren Dateigrößen erreicht.

WebP

Eine Möglichkeit, Bilder zu verkleinern und so die Performance zu steigern ist WebP. Dabei handelt es sich um ein alternatives Bildformat. Im Vergleich zum typischen JPEG-Format kann mithilfe einer anderen Komprimierungslogik bis zu 34 Prozent der Dateigröße eingespart werden. Unterstützt wird das Bildformat derzeit allerdings nur von Chrome, Firefox und neueren Edge Browsern. Damit der Webshop und dessen Bilder von allen Browsern richtig angezeigt werden, müssen die Bilder zusätzlich noch als JPEG zur Verfügung gestellt werden. Durch das Implementieren beider Bildformate im HTML Element Picture können Browser, die WebP unterstützen, die komprimierten Bilder nutzen und die bis zu 34 Prozent kleineren Dateien schneller anzeigen. Die anderen Browser nutzen wie gewohnt die JPEG-Dateien.

AVIF

Eine weitere Möglichkeit, Bilder zu komprimieren, bietet das AVIF-Format. Es gilt als Nachfolger von WebP, ist jedoch noch nicht stark verbreitet. Der Streaming-Anbieter Netflix nutzt bereits für einen Großteil seiner Bilder das neue Bildformat und spart damit deutlich an Bandbreite. Die gute Qualität der komprimierten Bilder zeigt das folgende Beispiel. Im direkten Vergleich schneidet das Bild im AVIF-Format trotz weniger benötigter Bytes deutlich besser ab, als das JPEG-Bild.

Vergleich Bildformate
Vergleich Qualität von Bildformat JPEG (links) und AVIF (rechts)

 

Responsive Images

Gerade beim Surfen im mobilen Netz ist die Internetverbindung oftmals nicht konstant und es kommt zu langen Seitenladezeiten. Deshalb gilt es Bilder auch für mobile Endgeräte zusätzlich zur Verfügung zu stellen. Mit Responsive Images kann das Bild in verschiedenen Größen im HTML Element Picture angelegt werden. Dadurch hat der Browser die Möglichkeit, Bilder abhängig von der Displaygröße zu laden und die passende Größe für jedes Endgerät zu wählen.

 

Lazyloading

Mittels Lazyloading wird dem Browser mitgeteilt, dass lediglich die Bilder der Website geladen werden, die sich im sichtbaren Bereich des Website-Besuchers befinden. Beispielsweise wird der Footer und dessen Bilder erst dann geladen, wenn der Nutzer in dessen Nähe scrollt. Da sich bei den meisten Content-Seiten lediglich ein Drittel der Bilder im sichtbaren Bereich befinden, kann mit Lazyloading ca. 66 % an Bandbreite eingespart und so die Seitenladezeiten der Website nahezu verdoppelt werden. Der Nutzer merkt davon nichts, da die Bilder nachgeladen werden, sobald er anfängt zu scrollen.

2. Optimierung von Icons und Webfonts

Nicht nur Bilder beeinflussen die Ladegeschwindigkeit von Webseiten, sondern auch Icons und die Verwendung verschiedener Webfonts.

Webfonts

Das individuelle Design spielt bei Webseiten eine große Rolle, um sich von der Konkurrenz abzuheben. Neben einzigartigen Bildern können auch unverkennbare Schriftarten die CI des Unternehmens unterstreichen. Handelt es sich bei der gewünschten Schriftart nicht um Systemschriften wie z.B. „Arial“ oder „Helvetica“ kommen sogenannte Webfonts zum Einsatz. Diese müssen vom Browser zusätzlich geladen werden, was zur Verlangsamung der Seitenladezeiten und somit zu Einbußen bei der Performance führen kann. Deshalb empfiehlt es sich, möglichst wenige und kleine Webfonts in einem Webshop einzubinden und diese, wenn möglich, vorab zu laden. Komprimierte Webfonts bieten z.B. die „variable fonts“. Diese verknüpfen den Basisschriftschnitt mit den Extremwerten einer Schrifteigenschaft. So ist es möglich, verschiedene Schriftstile einer Schrift (Schriftstärke, Schriftbreite, Schriftlage) in einer einzigen Datei zusammenzufassen.

Beispiel Schriftstile
Beispiel verschiedener Schriftstile

Icons

Auch Icons werden oft als Webfonts eingebunden. Das macht jedoch nur dann Sinn, wenn wirklich viele Icons verwendet werden. In durchschnittlichen Projekten sind bis zu 20 Icons im Einsatz. Um die Performance nicht zu verschlechtern und für eine verbesserte Barrierefreiheit empfiehlt es sich Icons als SVG (Scalable Vector Graphics) direkt im Quelltext einzubinden.

 

3. Critical CSS

Um die Performance einer Website zu erhöhen, kann auch Critical CSS den nötigen Boost geben. Darunter versteht man, dass die nötigen bzw. „kritischen“ Styles für den ersten Seitenaufbau direkt zusammen mit dem HTML und nicht wie üblich als externe Ressource geladen werden. Dadurch kann der extrahierte CSS-Teil schneller vom Browser geladen werden. Anschließend wird der Rest des CSS vom Browser nachgeladen und erst dann ausgespielt, sobald der Nutzer den Teil der Website sieht.

 

4. Cache (Varnish) Optimierung

Auch die Verwendung von Varnish kann sich positiv auf die Performance des Webshops auswirken. Varnish ist ein Web Cache der zwischen User-Anfragen und dem Webshop läuft. Dieser speichert nach dem ersten Aufruf den Inhalt der Website und legt eine Kopie davon im Arbeitsspeicher ab. In der Regel betrifft das mindestens alle statischen Inhalte wie CSS/JavaScripts und Layout-Grafiken, aber auch Produkt- und Mediendaten können gespeichert werden. Ein für Varnish optimierter Shop kann zudem auch weitere wichtige Seiten wie die Homepage, Landingpages, Kategorie- aber auch Produktseiten vorhalten. Wird die Seite nun erneut aufgerufen, wird der Inhalt nicht mehr vom Web- und Datenbankserver generiert, sondern die Anfrage wird direkt von Varnish beantwortet und an den Besucher ausgeliefert. Kann ein Varnish optimierter Shop alle wichtigen Seiten aus dem Cache liefern, sind extrem schnelle Antwortzeiten und somit eine bessere Performance garantiert. Damit Kunden auch beim ersten Besuch des Webshops keinen langen Wartezeiten ausgesetzt sind, empfiehlt sich zudem die Verwendung von Cache-Prewarming – ein systemgestütztes Füllen des Cache mit allen wichtigen Inhalten nach Ereignissen wie Deployments oder Wartungsarbeiten.

 

5. Content Delivery Networks

Eine weitere Möglichkeit, die die Performance des Webshops verbessern kann, ist die Verwendung eines Content Delivery Networks (CDN). Darunter versteht man ein Netzwerk von Servern in verschiedenen Rechenzentren auf der ganzen Welt. Mithilfe eines Verteilungssystems werden statische Inhalte wie HTML-Seiten, Bilder, Stylesheets oder Dokumente auf die sogenannten Replica-Server übertragen und im Cache gespeichert. So müssen die Daten nicht mehr über den eigentlichen Webserver abgerufen und an den Nutzer ausgeliefert werden, sondern über den nächstgelegenen. Das hat gerade bei Webseiten, welche weltweit Inhalte ausliefern, eine besonders große Auswirkung auf die Performance.

 

6. AWS Autoscaling

Mit dem AWS Autoscaling kann die Last eines Webshops automatisch angepasst werden. Wird der Onlineshop zu Spitzenzeiten (z.B. zur Weihnachtszeit oder nach einer erfolgreichen Werbemaßnahme) öfters aufgerufen als normal, startet der Autoscaling-Dienst automatisch die zusätzlichen Ressourcen und verteilt die Last auf zusätzliche, bereits fertig konfigurierte und bespielte Server. Diese fangen die möglichen Ausfälle bei Lastspitzen ab und sorgen dafür, dass die Performance stabil bleibt. Wird die Leistung nicht mehr benötigt, schalten sich die zusätzlichen Server automatisch wieder ab. Der Kunde zahlt dabei nur die Serverleistung, die wirklich genutzt wurde.

Bilder: Netflix, freepik

 

Ihr Kontakt

Hartwig Göttlicher
Hartwig Göttlicher
Head of Business Development
Webshops mit voller Performance und Sicherheit dank eines hochverfügbaren Varnish
Varnish-Teasebild mit Cloud- und Servernetz

Dank eines Workarounds von netz98 ist es möglich, die Performance von cloud-gehosteten Webshops mit Varnish-Servern dauerhaft zu sichern. Wir erklären Read more

Wieso eine gute Performance des Webshops so wichtig ist
Webshop Performance

Shopbetreiber stehen unter Druck, ihren Kunden das perfekte Einkaufserlebnis zu bieten. Eine gute Performance des Webshops ist dabei Pflicht.

Lagerverwaltung: Effiziente Prozesse auch bei weltweiten Standorten mit dem Magento Feature Multi Source Inventory
Collage aus Bildern, die Beschäftigte unterschiedlicher Branchen bei der Arbeit zeigen.

Auch weltweite Standorte effizient verwalten. Erfahren Sie hier mehr über Lagerverwaltung mit Magento Multi Source Inventory!

E-Commerce Optimierung mit Adobe: Prozesse und Tipps für mittelständische Unternehmen
aufgeklappter Laptop mit Aufschrift "E-Commerce" auf dem Screen, steigenden Kurven und Mitarbeiter drumherum

Erfahren Sie, wie eine effiziente E-Commerce Optimierung für mittelständische Unternehmen mit Magento und der Adobe Experience Cloud gelingt.

Magento Features mit Hyvä effizient nutzen 
Team von Entwicklern, die an einem Tisch mit PC-Bildschirm stehen

Erfahren Sie, wie Hyvä die Effizienz und Performance der Features von Magento bzw. Adobe Commerce maximiert. Jetzt lesen und Booster Read more

Effiziente Datenmigration mit Magento und Adobe Commerce 
Laptop mit schematischer Darstellung von Datenströmen

Erfahren Sie, wie valantic mit MIGRON® eine reibungslose Datenmigration zu Magento garantiert. Jetzt informieren und Replatforming meistern!

7 Tipps zur Umsatzsteigerung im E-Commerce mit Adobe Commerce bzw. Magento
Laptop mit ansteigendem Balkendiagramm und Schrift "E-Commerce" auf dem Screen

Entdecken Sie 7 bewährte Tipps zur Umsatzsteigerung im E-Commerce mit Adobe Commerce bzw. Magento. Jetzt lesen und mehr Umsatz erzielen!

Intelligente Personalisierung mit Adobe Sensei
Hände malen einen Schuh individuell an, daneben Hinweis auf Blogreihe Teil "2/3" und Schriftzug "Personalisierung mit Adobe Sensei"

Entdecken Sie, wie Adobe Sensei die Personalisierung im E-Commerce optimiert und zu individuellen Kundenerlebnissen in Magento beiträgt.

Über den Autor