Es leuchtet ein: Schneller ist besser. Wirklich niemand benötigt einen langsamen Webshop. Die 2015 veröffentlichten Studie „Global Consumer Online Shopping Expectations“ bescheinigte Konsumenten ziemliche Ungeduld. Ein Drittel bricht den Einkauf ab, wenn die Seite nach 3 Sekunden nicht geladen hat und nur 32% warten länger als 5 Sekunden. So ein früher Absprung wegen der Geschwindigkeit im Webshop kostet dann nicht nur direkt Umsatz und Reputation sondern schadet auch noch nachhaltig dem Ranking des Webshops in den Suchergebnissen von Google. Grund genug, sich mit diesem Thema zu befassen. Es gilt dabei auch das richtige Augenmaß zwischen Performance und Aufwand zu finden. Dieser Artikel gibt einen Überblick über folgende Themen der Webshop Performance Optimierung:
- Programmierung optimieren
- Bilder optimieren
- Webbeschleuniger nutzen
- Verteilte Server nutzen
- Sichtbare Inhalte priorisieren
1. Programmierung optimieren
Beim Minifizieren werden unnötige Zeichen aus dem Code entfernt. So verkleinert sich die Dateigröße.
Klingt leicht, ist aber ein weites Feld. Performanceprobleme entstehen manchmal schlicht aus schlechter Programmierung. Stimmt die Architektur gar nicht, helfen oberflächliche Reparaturen nicht weiter. Man muss dann erst das zugrunde liegende Skalierungsproblem lösen. Kommen in einem Projekt viele Module unterschiedlicher Hersteller zur Anwendung, kann es auch an der Abstimmung liegen. Wenn jedes Modul eigene Bibliotheken verwendet, wird das nie so effizient werden, wie wenn alles perfekt aufeinander abgestimmt ist. Dies gilt es schon bei der Konzeption zu beachten. Geht es nun an die eigentliche Geschwindigkeitsoptimierung, gibt es eine Reihe von Verbesserungsmöglichkeiten. Nicht-technisch formuliert gilt es den Programmiercode schlank zu und die Anzahl der zu ladenden Dateien gering zu halten. Die Seite muss schon im Browser erscheinen, während unwichtigere Dinge vielleicht noch im Hintergrund geladen werden und die Komprimierungs- und Zwischenspeichermöglichkeiten von Server und Browser sollten voll ausgeschöpft werden.
2. Bilder Optimieren
Je nach Komprimierung und Format nehmen Qualität und Dateigröße in unterschiedlichem Ausmaß ab.
Kein Produkt verkauft sich ohne gute Darstellung. Bilder sorgen für Emotion und für Sicherheit im Kaufprozess. Sie erhöhen damit die Kaufquote und reduzieren die Retouren. Allerdings verlängern sie auch die Ladezeit. Daher sollte der Fokus auf den wichtigen Bildern liegen. Unnötige Darstellungen, die womöglich auf jeder Seite geladen werden, sollte man gnadenlos ausmisten. Bei den wichtigen Bildern gilt es an der Komprimierung zu feilen. Optimal ist jener Punkt, wo die Bildqualität ausreichend gut und die Dateigröße ausreichend klein ist. Je nach Webshop-Thema sind unterschiedliche Detailgrade notwendig. Mit Spezialsoftware können Dateigrößen massiv verkleinert werden. Die verkürzt die Ladezeit, verbessert die User Experience und spart Hosting-Kosten.
3. Webbeschleuniger nutzen
Reduzierung der Seiten-Download-Zeit durch den Einsatz von Varnish. Quelle: Google Search Console.
Ist auf der Seite selbst alles weitgehend optimiert, bringen sogenannte Webbeschleuniger oder Frontend-Caches die Ladezeit signifikant nach unten. Die Idee ist dabei, die Webshop-Software nur dann zu belasten, wenn ein bisher noch nicht geladener Inhalt benötigt wird. Bereits vorhandene Inhalte werden von einer speziellen Software als „statische Seiten“ ausgeliefert. Das bedeutet, dass keine Programmlogik benötigt wird sondern rasend schnell die bereits fertig berechneten Inhalte bereitgestellt werden. Paradebeispiel ist hier der Webbeschleuniger Varnish. Wird alles perfekt konfiguriert und ist die zu beschleunigende Shop-Software darauf ausgelegt, sind hohe Gewinne bei der Serverantwortzeit und der Seiten-Download-Zeit zu erwarten. Die Einführung von Varnish kann aber je nach Projekt einen Aufwand von vielen Tagen oder mehreren Wochen Arbeit bedeuten. Schließlich muss für jede Seite genau geklärt werden, welche Bereiche zwischengespeichert werden dürfen und welche nicht. Lagerstände oder spezielle Kundenpreise müssen schließlich bei jedem Aufruf stimmen. Wer den Aufwand scheut, dem stehen unter Umständen auch applikationsseitige Webbeschleuniger zur Verfügung. Im Fall von Magento wäre dies zum Beispiel der Full-Page-Cache Lesti FPC. Da dies ein Modul im Webshop ist, funktioniert viel Logik schon standardmäßig. Da hier die Zugriffe immer auf die Webshop-Software treffen, kann die Leistung nie ganz an jene von Webbeschleunigern wie Varnish herankommen. Dafür ist der Implementierungsaufwand geringer. Keine gute Strategie ist es in jedem Fall, wenn Webbeschleuniger genutzt werden um grundlegende Performance-Probleme zu verstecken.
4. Verteilte Server nutzen
Schematische Darstellung eines Content Delivery Networks (CDN).
Speziell internationale Webshops stehen vor dem Problem, dass die Zugriffszeit zwar in der Heimatregion schnell ist, User aus entfernteren Ländern aber lange warten müssen. In diesem Fall müssen die statischen Files, also Bilder und Programmdateien, die sich nicht dynamisch verändern, auf möglichst vielen Servern weltweit bereitgestellt werden. Beim Zugriff auf den Webshop werden diese Dateien dann vom jeweils nächstgelegenen Server geladen. So ein „Content Delivery Network„, kurz CDN, wird in der gewünschten Dichte in den Absatzregionen bei spezialisierten Hostern gebucht und kann relativ einfach im Webshop eingebaut werden. Statt die jeweilige Datei vom ursprünglichen Webserver zu laden, wird sie ab sofort vom nächstgelegenen, gebuchten Server geholt. Profi-Tipp: Ein CDN macht nur für Online Shops mit ausreichend vielen Zugriffen Sinn. Nur dann können genügend Anfragen aus dem Zwischenspeicher bedient und so deutliche Geschwindigkeitsvorteile erzielt werden.
5. Sichtbare Inhalte priorisieren
Inhalte „above the fold„, also im sichtbaren Bereich, sollen zuerst geladen werden.
Beim Laden von Inhalten einer Seite kann die Reihenfolge bestimmt werden. Man unterscheidet hier einerseits die sichtbaren Inhalte von jenen, die erst nach dem Scrollen zu sehen sind. Und andererseits wichtige und weniger wichtige Inhalte. Produktbild und weitere Artikelinformationen im sichtbaren Bereich werden also viel früher geladen als ein unwichtiges Bild am Seitenende. Die Priorisierungsreihenfolge lautet:
| Sichtbar | Nicht sichtbar | |
|---|---|---|
| Wichtig | 1 | 3 |
| Nicht wichtig | 2 | 4 |
Wie man sieht ist die Geschwindigkeit im Webshop ein vielschichtiges Thema. Wir beraten Sie gerne! Fehlt Ihnen ein wichtiger Aspekt oder können Sie über Erfahrungen berichten? Bitte posten!