Onlineshop-Shop-Optimierung-und-Benutzerfreundlichkeit-SliderOnlineshop-Shop-Optimierung-und-Benutzerfreundlichkeit-Slider
Onlineshop Optimierung und Benutzerfreundlichkeit

SCROLL

Lass uns einfach darüber reden!

Shop – Optimierung und Benutzerfreundlichkeit

Für den Kunden:

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

Für den Shopbetreiber:

Das Shopsystem muss einfach zu administrieren und zu konfigurieren sein.  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.

Onlineshop - Optimierung und Benutzerfreundlichkeit
Onlineshop-Pagespeed-Optimierung

Ladezeiten Optimierung

Dein Onlineshop und seine Seiten laden nur 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.

Das Ziel ist also:

Erhöhung der Conversion durch Ladezeiten Optimierung

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 darzustellen.

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

Serverseitige Komprimierung

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 an sich logisch: Je größer die einzelnen Bilddateien sind, umso länger benötigt der Browser des Kunden die Bilder vom Server des Shopbetreibers 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 nicht skaliert und angepasst, so sollten die Bilder optimiert werden. 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 geeignete Shopmodule verwendet werden.

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

Onlineshop - Optimierung von Bildmaterial
Onlineshop - Browser Cache

Caching System zur Ladezeitenoptimierung

Caching ermöglicht das Ablegen statischer Dateien auf einem Server, so dass ein Kunde beim erneuten Besuchen des Shops bzw. beim Weiterklicken auf andere Shopseiten, bestimmte Inhalte nicht erneut laden müssen. 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 legen Sie individuelle Ablaufdaten 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 legt die Gültigkeitsdauer fest.

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

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 häufig 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.

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.

Darstellun der Optimierung von CSS und Java Resourcen

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.

Onlineshop -Server-Kompremierung

Serverseitige Komprimierung

Die Webserver und Hostingpakete 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. Viele Shopsysteme enthalten außerdem im Adminpanel die Möglichkeit, GZIP oder Datenkomprimierung zu aktivieren. Ist diese Möglichkeit nicht gegeben, so lässt sich dies einfach ü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

Conversiontracker.

Je mehr externer 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 recht große Datenquellen (z.B. Cavalry), die wenn sie nicht entsprechend optimiert wurden, den Ladeaufbau der Seite um mehr 80 Prozent verlangsamen kann.

Onlineshop -externe Ressourcen- Social Media Widgets

Hinweis:

Es sollten nur die 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

Strukturoptimierung

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

Was muss unbedingt bei der Seitenstruktur beachtet werden?

Die H1 enthält das Main Keyword.

Die Kategorienseiten 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 die Suchmaschinen braucht es unbedingt einen kurzen Teaser, welcher das Main Keyword enthält, ist vorhanden.

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

Ü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 Einstieg in die Selbstständigkeit 2003, in den Bereich Webdesign, lebt und arbeitet er im Rhein-Main Gebiet. Anfänglich neben Webdesign auch noch mit IT Service. Seit 2010 ausschliesslich 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.