30 Minuten Mehrwert erhalten

Onlineshop Optimierung und Benutzerfreundlichkeit

Shop – Optimierung und Benutzerfreundlichkeit

Beitrag von Frank Hamm - Der-Onlineshop-Experte-letzte Aktualsierung: 11. August 2023

Benutzerfreundlichkeit für den Kunden:

Deine Kunden erwarten einen benutzerfreundlichen Shop. Das heißt, dass sie nicht aufwändig nach Produkten suchen müssen. Sondern oder alle Informationen innerhalb kurzer Zeit finden. Was für deine Kunden gilt, gilt aber auch für dich.

Auch die Ladezeit des Onlineshops gehört zur Benutzerfreundlichkeit. Lange Ladezeiten sind für viele Kunden unzumutbar und ein Grund, den Shop wieder zu verlassen.

Benutzerfreundlichkeit für den Shopbetreiber:

Auch für dich als Betreiber des Shops muss das System einfach zu administrieren und zu konfigurieren sein. Der Aufbau der Menüs muss logisch sein. Auch in der Administration verderben einem lange Ladezeiten, schnell den Spaß bei der Arbeit.

Ladezeiten Optimierung

Dein Onlineshop und seine Seiten laden nur sehr langsam? Dann verschenkst du beträchtlichen Umsatz.

Der Grund ist trivial:

Besucher sind schlicht zu bequem und haben keine Lust längere Zeit zu warten.

Ein Konkurrent mit schnelleren Ladezeiten profitiert also zweimal. Einmal beim Google Ranking und einmal beim Kunden,

Das Ziel ist also:

Erhöhung der Konversion durch Optimierung der Ladezeiten

Für Betreiber von Onlineshops, die nur über wenig technischen Background verfügen, gestaltet sich die Optimierung der Ladegeschwindigkeit eher schwierig.

Ich versuche in den folgenden Abschnitten einen groben Überblick über die wichtigsten Stellschrauben und die Einflüsse auf Onlineshops zu geben.

Wichtige Bereiche der Ladezeiten Optimierung sind u.a.:

Technische Faktoren:

Optimierung von Bildmaterial

Caching System zur Ladezeitenoptimierung

CSS- und Javascript-Ressourcen

Serverseitige Komprimierung

Externe Ressourcen

Strukturelle Faktoren:

Interne Verlinkung

SEO Optimierung

Kategorieseiten auf der Startseite verlinkt

H1 Formatierung für Main Keyword

und viele andere

Optimierung von Bildmaterial

Ursache für langsame Shopseiten sind vor allem bei unerfahrenen Shopbetreibern die Bilder. Der Grund ist logisch: Je größer die einzelnen Bilddateien sind, desto länger benötigt der Browser des Kunden, die Bilder von deinem Server zu laden.

So professionell wie möglich und so groß wie nötig.

Einige Shopsysteme haben integrierte Module, die die Bildgröße automatisch entsprechend der benötigten Skalierung anpassen.

Zur Shop Optimierung werden Logos, Kategorie- und Produktbilder skaliert und angepasst, und so die Ladezeiten für die Bilder optimiert.

Bei nur wenigen Artikeln kann die Bildoptimierung meist noch per Hand erfolgen, wobei es meist schon viel bringt, die Bildgröße nach der tatsächlichen Anzeigegröße zu reduzieren.

Müssen viele Artikelbilder optimiert werden, so können Softwaretools oder wenn verfügbar geeignete Shopmodule verwendet werden.

Ganz wichtig: Es sollten Bilder verwendet werden, die komprimiert und für Webseiten optimiert sind.

Onlineshop - Optimierung von Bildmaterial

Caching System zur Optimierung der Ladezeiten

Caching ermöglicht das Ablegen statischer Dateien auf einem Server. So müssen Kunden beim erneuten Besuch des Shops bzw. beim Weiterklicken auf andere Shopseiten bestimmte Inhalte nicht erneut laden.

Jedes Mal, wenn für die Darstellung einer Seite die Inhalte zu einer URL benötigt werden, wird zuerst im Cache nachgesehen, ob diese bereits vorhanden sind.

Welche Dateitypen können zwischengespeichert werden?

Damit das Browser-Caching richtig funktioniert, muss der Browser wissen, wie lange die verschiedenen Dateitypen zwischengespeichert werden sollen.

Zu diesen Ressourcen zählen neben den Bildformaten wie .gif, .jpg und .png auch JavaScript- und CSS-Dateien sowie weitere binäre Objektdaten wie PDFs und Mediendateien.

Für die verschiedenen Dateitypen legst du am besten ein individuelles Ablaufdatum fest.

Lebenszeit & Validierung

Für die Aktivierung müssen bestimmte Header-Typen an den Browser gesendet werden, der Erste regelt das Ablaufdatum, der andere bezieht sich auf die Validierung:

Expires- und Cache-Control-Header legen die Gültigkeitsdauer fest.

Last-Modified- und E-Tag-Header dienen der Ressourcen-Validierung.

Jetzt Erfolgsgespräch sichern

30 Minuten Mehrwert erhalten

CSS- und Javascript-Ressourcen

CSS und Javascript sind für moderne Shopsysteme Standardsprachen. Der Trend in den letzten Jahren geht dahin, dass die Anzahl des CSS- und Javascript-Codes stark zunimmt.

Auch zusätzliche Shopmodule können für eine zusätzliche Last an Code sorgen.

Je mehr Code geladen wird und je mehr einzelne CSS- oder Javascript-Dateien geladen werden müssen, umso länger braucht die jeweilige Shopseite für den Aufbau.

Manche Shopsysteme laden für jedes Modul eine einzelne CSS-Datei, was beim Einsatz vieler Module durchaus wie eine Bremse wirken kann.

Minimieren von CSS-Dateien

Möglichkeiten, den Ballast etwas zu verkleinern, gibt es. Für einige Javascript- und CSS-Ressourcen stehen minified Versionen zur Verfügung, die weniger Speicherplatz benötigen als ihre jeweiligen Originalversionen.

Der Gesamteffekt ist zwar im Vergleich zur folgenden Komprimierung eher gering, sollte aber nicht vernachlässigt werden, zumal Javascript für moderne Onlineshops eine hohe Bedeutung hat.

Wenn man die Code-Optimierung in Angriff nimmt, so sollten auch nicht benötigte CSS-Klassen entfernt werden. Oft werden nur wenige der Klassen tatsächlich benötigt.

Serverseitige Komprimierung

Die Webserver und Hosting Pakete bieten die Möglichkeit, die eigenen Daten zu komprimieren. Dies wirkt sich um so mehr aus, je mehr Dateien geladen werden müssen.

Technisch wird diese Komprimierung als gzip-Compression bezeichnet und kann verhältnismäßig einfach eingebunden werden.

GZIP-Datenkomprimierung

Viele Shopsysteme enthalten im Adminpanel die Möglichkeit, GZIP- oder Datenkomprimierung zu aktivieren. Ist diese Möglichkeit nicht gegeben, so lässt sich dies auch über die .htaccess-Datei steuern.

Eine aktivierte GZIP-Komprimierung kann ein regelrechter Boost für die Seite sein.

Technisch werden die Dateien nämlich in kleinere Pakete gepackt und im Browser des Nutzers wieder entpackt. Dadurch wird im Endeffekt die Datenmenge, die vom Server heruntergeladen wird, meist deutlich reduziert.

Externe Ressourcen

Oft nutzen Onlineshops zahlreiche Services. Hierzu gehören u.a.

Tracker zur Erfassung des Traffics

diverse Bibliotheken (u.a. jquery)

Social Media Widgets

Affiliate Netzwerke

Content Delivery Networks (CDN)

externe Statistik- oder Controllingdienste

Conversion Tracker.

Je mehr externe Ressourcen eingebunden werden, umso mehr Datenpakete müssen von externen Servern zunächst heruntergeladen werden. Es ist nicht schwer zu erraten, dass dies die Performance des Seitenaufbaus stark einschränken kann.

Beispielsweise beinhalten einige Facebook-Widgets große Datenquellen, die, wenn sie nicht entsprechend optimiert wurden, den Aufbau der Seite um mehr 80 Prozent verlangsamen können.

Hinweis:

Es sollten nur Ressourcen verwendet werden, die auch tatsächlich gebraucht werden. Bei Verwendung solcher Ressourcen sollte dafür gesorgt werden, dass diese nach Möglichkeit asynchron eingebunden werden.

Beim asynchronen Laden werden diese Datenpakete erst dann geladen, wenn der Seitenaufbau bereits beendet ist. Das heißt, sie werden im Hintergrund geladen, während der Kunde die Seite schon nutzen kann.

Onlineshop Strukturoptimierung

Ziel von E-Commerce-Seiten ist, Kunden vom Kauf eines Produkts zu überzeugen. Einer der wichtigsten Faktoren ist dabei das Nutzererlebnis. Goldene Regel – Die Struktur so nutzerfreundlich wie möglich gestalten.

Was muss unbedingt bei der Seitenstruktur beachtet werden?

Die H1 enthält das Main Keyword.

Die Kategorieseiten sind die wichtigsten Einstiegsseiten eines Online-Shops.

Sidebar inkl. Filter befindet sich auf der linken Seite. Eine zielgruppenorientierte Filterfunktion ist essentiell für die Nutzererfahrung.

Für Suchmaschinen braucht es unbedingt einen kurzen Teaser, welcher das Main Keyword enthält.

Ganz wichtig – Eine gute interne Verlinkung der Seiten und Inhalte.

Jetzt Erfolgsgespräch sichern

30 Minuten Mehrwert erhalten

Über den Autor: Frank Hamm – Der Onlineshop-Experte. Ursprünglich ein Kind des Ruhrgebietes, war er viele Jahre verantwortlich für Planung und Umsetzung von technischen IT Projekten in verschiedenen internationalen Unternehmen. Seit dem Einstieg in die Selbstständigkeit 2003, im Bereich Webdesign, lebt und arbeitet er im Rhein-Main-Gebiet. Anfänglich neben Webdesign auch noch mit IT Service. Seit 2010 ausschließlich im Bereich Webdesign und SEO. Inzwischen als Onlineshop-Experte mit Spezialisierung auf Beratung, Erstellung und Optimierung von Onlineshops. Vom Standort 56459 Mähren aus betreut er KMUs, Händlern und Dienstleistern mit einem Onlineshop und bei ihrem Einstieg ins E-Commerce.