WooCommerce schneller machen – der Leitfaden für einen konvertierenden Online Shop

Du fragst dich wie du deinen Webshop beschleunigen und WooCommerce schneller machen kannst?

Die Frage beschäftigt nicht nur dich, sondern so ziemlich jedes Unternehmen, ob klein oder groß. Eine optimierte Ladezeit ist erstrebenswert für jedes Unternehmen, besonders aber für Online Shops.

Es ist kein Geheimnis mehr, dass die langsamen WooCommerce-Shops dich in vielerlei Hinsicht etwas kosten können: schlechte Conversion Rates, Zunahme der Warenkorbabbrüche und ein sehr deutlicher Rückgang der Kundentreue, des Markenimages, der Besucher und sogar der SERP-Sichtbarkeit. Dies führt letztendlich zu weniger Umsatz für dich und dein Business.

Niemand wartet gerne – ob off- oder online. Diese sehr wichtige Tatsache ist der Grund, warum fast alle E-Commerce-Shops mittlerweile die Web-Performance-Optimierung (WPO) bevorzugen.

In dem heutigen Artikel erfährst du alles, was du wissen musst, um eure WooCommerce-Shops maximal zu beschleunigen und sicherzustellen, dass der Shop ein wichtiger Bestandteil eures Umsatzes bleibt.

Was ist die optimale Ladezeit?

Es gibt keine vorgeschriebene optimale Ladezeit. Der beliebte Rat eines Experten lautet jedoch, sie unter 2 Sekunden zu halten. Wie du dir denken kannst, ist die Seitenladezeit eine wichtige Leistungskennzahl in WPO. Wenn dein WooCommerce-Shop in mehr als zwei Sekunden lädt, hast du eine Menge Arbeit vor dir.

Laut Google’s Benchmark für die mobile Geschwindigkeit ist die Wahrscheinlichkeit, dass ein Besucher eine Website verlässt, wie folgt:

BILD

Sicherlich wirst du dich an diesem Punkt fragen, „wie kann man die Ladezeit der Seite verbessern und keine Kunden verlieren?

Wie misst man die Web-Performance?

Es gibt verschiedene Tools online, um die Ladezeit einer Website zu messen. Ich empfehle drei Tools, mit denen du mehrere Performance-Metriken deiner Website erhalten kannst.

1. WebSeitenTest
   WebPageTest ist wahrscheinlich ein kompletter Service, der auf dem Markt erhältlich ist. Anfänger scheuen dieses Tool oft, weil es schwer zugänglich ist. Es ist jedoch das bevorzugte Tool, um die tatsächliche Leistung einer Website zu testen. Du kannst deinen Shop auf verschiedenen Servern mit unterschiedlichen Verbindungsgeschwindigkeiten testen.

Zusätzlich zu den herkömmlichen Daten testet WebPageTest auch den Geschwindigkeitsindex einer Website. Der Geschwindigkeitsindex misst die Zeit (in Millisekunden), in der die meisten Seiten eines Shops für die Nutzer sichtbar werden.

2. PageSpeed Insights
   PageSpeed Insights bietet technische Beratung zur Webleistungsoptimierung (WPO) nach Priorität. Ich empfehle dir dringend, Probleme von hoher und mittlerer Wichtigkeit zuerst zu lösen, um sicherzustellen, dass es keine kritischen Performance-Probleme gibt.

Beachte, dass eine schlechte Bewertung nicht notwendigerweise einen langsamen Speicher bedeutet. Das Lösen dieser Probleme kann jedoch ernsthafte Auswirkungen auf die Leistung eines WooCommerce-Shops haben.

3. Pingdom-Tools
   Mit Pingdom Tools kannst du die Geschwindigkeit eines WooCommerce-Shops innerhalb von Sekunden testen. Die Standardversion von Pingdom Tools hat den Vorteil, kostenlos zu sein, aber es ist auch eine kostenpflichtige Version erhältlich, die zusätzliche Funktionen für Profis bietet.

10 Tipps zur Beschleunigung des WooCommerce

Damit das klar ist, werfen wir einen Blick auf die 10 Tipps, die dir helfen werden, die Leistung deines WooCommerce-Shops zu verbessern.
schau dir die Geschwindigkeitstipps für deinen WordPress-Blog an

Beginne mit dem Aufräumen

Irgendwann werden die WooCommerce-Läden nur noch langsam, weil die Datenbanken häufig überfüllt werden. Hier sind einige wichtige Bereiche des „Frühjahrsputzes“, die dir helfen, die WooCommerce-Shops zu beschleunigen.

1.1. Begrenze die Anzahl der Erweiterungen

Tatsächlich kommt es nicht auf die Anzahl, sondern auf die Qualität der verwendeten Nebenstellen an. Auf der anderen Seite, je mehr aktive Erweiterungen du hast, desto schwieriger wird es, die Qualität zu kontrollieren. Es ist daher eine gute Praxis, regelmäßig eine Bestandsaufnahme eurer Erweiterungen zu machen und sicherzustellen, dass die aktiven Erweiterungen relevant sind. Wenn du die Möglichkeit hast, ersetze einige Erweiterungen durch einen gleichwertigen Code.

1.2. Revisionen begrenzen/deaktivieren

WooCommerce bietet eine standardmäßige Revisionskontrolle auf den Produktseiten an, mit der du zurückgehen und Änderungen auf den Produktseiten ansehen kannst. Das scheint zwar eine gute Sache zu sein, aber Überarbeitungen können auch zu Performanceproblemen führen

Nehmen wir zum Beispiel an, du erstellst eine Produktseite und bearbeitest sie fünf Mal, wobei du jedes Mal ein oder zwei Wörter änderst. Obwohl die Änderung nur geringfügig ist, hast du sechs Kopien deiner ursprünglichen Produktseite. Das kann schnell degenerieren und am Ende die Leistung von WooCommerce verlangsamen.

Um die Überarbeitungen zu begrenzen/deaktivieren, füge eine der folgenden Zeilen in die wp-config.php-Datei ein, die sich im Stammverzeichnis deiner Webseite befindet.

Revisionen deaktivieren
define (‚WP_POST_REVISIONS‘, false);

Limit the Number of Revisions
define (‚WP_POST_REVISIONS‘, 3); // limit to 3 revisions

Note: 3 indicates the number of revisions. You can change it as per your requirement.

1.3. Die Datenbank aufräumen

Du weißt bereits, wie du die Überarbeitungen der WooCommerce-Produktseiten begrenzen kannst. Allerdings musst du auch die bereits in der Datenbank vorhandenen Revisionen entfernen. Dafür gibt es nichts besseres als das WP-Optimierungs-Plugin.

WP-Optimize entfernt nicht nur problematische Revisionen, sondern bereinigt auch die gesamte Datenbank des WooCommerce-Shops. Es ist auch möglich, den Bereinigungsprozess zu automatisieren, so dass du ohne Pausen daran arbeiten kannst.

1.4. Externe Ressourcen begrenzen

Eine externe Ressource ist einfach ein Skript, ein Stylesheet, eine Schriftart, die nicht auf deinem WooCommerce-Server ist. Sogar Google Analytics ist eine externe Ressource!

Es ist wichtig, die Anzahl der externen Ressourcen auf ein Minimum zu beschränken, da man nicht jede Ressource optimieren kann. In fast allen Fällen verlangsamen diese externen Ressourcen deinen Shop. Eine gute Möglichkeit, die Abhängigkeit zu minimieren, ist die Verwendung von glaubwürdigen Quellen, wie z.B. Google Fonts, die sich um alle font-bezogenen Fragen kümmern.

1.5. Widget und Tools zur gemeinsamen Nutzung

Social-Sharing-Widgets wie Facebook und Twitter können deinen WooCommerce-Shop erheblich verlangsamen. In deinem Shop werden diese Widgets immer langsamer:

Herunterladen von externen Ressourcen
Interne Abhängigkeit von DNS-Abfragen
Hinzufügen von zusätzlichen HTTP-Anfragen
Vergrößern der Seite
Besitzer von WooCommerce-Shops sollten diese Widgets entfernen und einfache Share-Buttons verwenden.

1.6. Angegliederte Anzeigen und Produkte

Affiliate-Anzeigen und Produkte sind keine Ausnahmen.

Wenn du Werbung in deinem WooCommerce-Shop betreibst, dann benutze ein einziges Netzwerk und lass dich nicht mit der Schaltung von Werbung verrückt machen. Wenn du Google AdSense oder einen anderen Anzeigenservice nutzt, warum nicht die Birne halbieren und nur eine der beiden auslassen?

Affiliate-Anzeigen werden oft in Form von Bildern auf externen Servern gehostet. Eine bessere Alternative ist es, die Bilder selbst zu hosten und dadurch die Bilder zu optimieren und DNS-Anfragen zu reduzieren.

1.7. Installierte Plugins beschränken

Als Faustregel gilt, dass du nur die wichtigsten Plugins auf deiner Seite installieren solltest. In jedem Fall solltest du die Plugins mit dem Ruf von Geschwindigkeit und Leistung auswählen. Um die Geschwindigkeit der Plugins einzuschätzen, empfehle ich Query Monitor, ein großartiges Tool, das eine gute Vorstellung davon gibt, wie lange es dauert, jedes Plugin zu laden und ob es sich lohnt, es auf deiner Webseite zu behalten.

2. Bilder für das Web optimieren

Die Bildoptimierung ist essentiell für die allgemeine Geschwindigkeitsoptimierung der WooCommerce-Shops.

Tatsächlich stellen Bilder oft den Großteil der Bytes dar, die für eine Seite heruntergeladen werden. Daher führt die Bildoptimierung oft zu einer Verringerung der Seitengröße und hilft dir so, die WooCommerce-Shops zu beschleunigen. Dies hat auch den Vorteil, dass der Verbrauch der Client-Bandbreite reduziert wird.

Verstehe, dass die Optimierung der Shop-Performance keine „Einheitsgröße für alle“ ist. Das bedeutet, dass ich dir keine spezifischen Plugins geben werde, sondern allgemeine Strategien zur Bildoptimierung beschreibe.

2.1. Eliminieren und Ersetzen von Bildern

Die allererste Frage, die du dir stellen musst: „Ist dieses Bild notwendig? Gutes Design sollte einfach sein, ohne Bildüberladung. Wie wir wissen, überträgt ein gut platziertes Bild mehr Informationen als tausend Worte. Es liegt an dir, die richtige Balance zu finden.

Die folgenden drei Taktiken werden häufig zur Bildoptimierung in WooCommerce-Shops eingesetzt.

Basis64: Diese Technik ist so alt wie das Web. Sie erlaubt es dir, die Anzahl der Anfragen an den Server zu reduzieren und Bilder sofort anzuzeigen. Achte darauf, Base64 nicht zu missbrauchen und es auf kleine Bilder anzuwenden, da dies die Größe deiner Produktseiten beeinflussen kann.
Inline-SVG: Das Inline-SVG bietet alle Vorteile der Base64-Kodierung, aber keinen der Nachteile. Vorsicht, Inline-SVGs werden auf älteren Versionen von gängigen Browsern nicht unterstützt.
Sprites: Das Sprite CSS ist auch eine sehr alte Technik zur Optimierung der Darstellung. Wenn du dein WooCommerce-Theme entwickelst, kann es vorteilhaft sein, die meisten deiner kleinen Bilder zu einem zusammenzufassen.
Beachte, dass die drei oben genannten Taktiken kontraproduktiv sind, wenn dein Shop über HTTP/2 läuft.

2.2. Bild-Formate

Das richtige Bildformat kann einen erheblichen Unterschied in der Ladegeschwindigkeit deines Shops ausmachen.

JPG: Verwende JPG für Fotos, hochauflösende Bilder, bei denen du viele Details zeigen musst.
PNG: Benutze PNGs für Icons, Logos, Illustrationen, transparente Bilder usw.
GIF: GIFs sind nicht so schlecht für kleine Bilder, aber sie sind PNG sehr selten überlegen. Benutze GIF also nur, wenn du eine Animation willst.
2.3. Bild Dimensionen
Achte darauf, dass du keine unnötig großen Bilder hochlädst, die unnötig groß sind. Ändere die Größe der Bilder manuell oder benutze ein Plugin wie Imsanity, um die Bilder automatisch auf eine akzeptable Größe zu bringen.

2.4. Bild-Komprimierung

Du kannst Bilder manuell (mit Photoshop) komprimieren, aber es ist, gelinde gesagt, mühsam. Ich habe viele Erweiterungen ausprobiert, um die Bilder zu optimieren und bin zum selben Schluss gekommen wie Matt Cromwell.

Das JPEG & PNG Bilder komprimieren Plugin bietet die beste Leistung, abgesehen davon, dass es einfach zu konfigurieren ist. Du brauchst nur einen API-Schlüssel und das Plugin ist für deinen Shop verfügbar. Die Erweiterung ist bis zu 100 Bilder pro Monat kostenlos. Dies sollte sich für viele WooCommerce Shops als ausreichend erweisen.

2.5. Reaktionsfähige Bilder

Was ist, wenn ein mobiler Besucher deinen Laden besucht? Ein 1200px Bild ist für ihn unpassend. Aus diesem Grund haben einige Entwickler wie Cris Croyer von CSS-Tricks das RICG responsive images plugin erstellt, das die richtige Bildgröße basierend auf der Bildschirmbreite anzeigt.

3. Website-Code optimieren

Die Anzahl der Dateien in einem WooCommerce-Shop kann für viele Benutzer schwindelerregend sein und die Anzahl wächst mit der Zeit immer weiter. Die Folge sind langsame WooCommerce-Shops, da die Browser der Besucher für jede Seite große Dateien hochladen müssen.

3.1. Datei-Komprimierung

Die bekannteste Kompression ist zweifellos die Gzip-Kompression, die die Größe der statischen Ressourcen reduziert. Du kannst zum Beispiel JavaScript-Dateien auf die Hälfte der Originalgröße komprimieren, ohne die Leistung zu beeinträchtigen. Um den Komprimierungsstatus deines Stores herauszufinden, probiere den Gzip-Komprimierungstest aus.

3.2. CSS-Ressourcen

Es gibt verschiedene Techniken zur Optimierung der CSS-Ressourcen. Eine davon ist, die Anzahl der Stylesheets einfach auf ein Minimum zu beschränken.

Der Browser muss eine volle Ladung aller Stylesheets abwarten, bevor er dem Besucher etwas anzeigt. Indem du die Anzahl der Stylesheets reduzierst, beschleunigst du den WooCommerce-Shop für die Besucher erheblich.

Es ist gut, die Anzahl der Stylesheets zu reduzieren, aber mit WooCommerce ist das fast unmöglich. Die Themen sind sehr oft auf „Features“ fokussiert und es gibt natürlich für jedes Feature ein Style Sheet.

Mit einem Plugin wie Breeze ist es möglich, diese Dateien einfach zu verknüpfen. Beachte, dass die Verkettung ein heikler Vorgang ist und es kommt häufig vor, dass diese Operation deinen WooCommerce Shop zerstört. Ich empfehle es zuerst auf einer Staging-Seite zu testen.

3.3. JavaScript-Dateien

Wie CSS-Ressourcen wirken sich große JavaScript-Dateien negativ auf die Ladegeschwindigkeit der Seite aus. Entwickler können die gleichen Minimierungs- und Komprimierungstaktiken anwenden, die sie auch für CSS-Dateien verwenden.

Im Gegensatz zu Stylesheets ist es möglich, „ASYNC“-Skripte so zu rendern, dass sie die Anzeige nicht mehr blockieren und so die WooCommerce-Shops beschleunigen. Manchmal können Verkettung und Änderung des Ladetyps auch WooCommerce-Shops unterbrechen. Je mehr Scripts du hast, desto schwieriger wird es, sie zu optimieren.

4. HTML-Code optimieren

Dein HTML-Code ist der Fahrplan, den die Server lesen müssen.

Anhand dieser Karte kann der Server die von den Besuchern angeforderten Seiten zusammenstellen und ausliefern. Beachte jedoch, dass es in deiner Verantwortung liegt, deinen Code so sauber wie möglich zu halten.

Dinge wie zusätzliche Leerzeichen und versteckte Texte (für Black Hat SEO) in deinem Code können einen großen Einfluss auf die Ladezeit der Seite haben. Experten empfehlen dir, deinen Code mit einem feinen Kamm zu durchforsten, um deinen WooCommerce-Shop drastisch zu beschleunigen.

5. Weiterleitungen minimieren

Stell dir deinen WooCommerce-Shop als eine Karte vor.

Jedes Mal, wenn jemand auf einen Link zu einer Seite deines Shops klickt, zählt der Server dies als Weiterleitung. Im Wesentlichen muss der Server die Besucher an den richtigen Ort umleiten. Obwohl dies nur ein paar Sekunden dauert, mag es den Benutzern wie eine Ewigkeit vorkommen und trägt direkt zur Absprungrate deines Shops bei.

Wenn du tonnenweise Weiterleitungen auf deiner Webseite hast, verschlingst du die Serverressourcen und erhöhst die Ladezeit der letzten Seite für die Besucher. Wenn du also die Anzahl der Weiterleitungen reduzieren kannst, wirst du einen deutlichen Sprung in der Ladegeschwindigkeit der Seite sehen.

6. Server- und Browser-Cache verwenden

Das Breeze WordPress Cache-Plugin ist ehrlich gesagt nicht leicht zu übertreffen, wenn es um Leistung und einfache Konfiguration geht.

Die Entwickler testeten die verschiedenen Cache-Plugins und stellten fest, dass Breeze deutlich besser abschneidet. Dies ist besonders wichtig, denn je komplizierter ein Plugin zu konfigurieren ist, desto wahrscheinlicher ist es, dass Benutzer Konfigurationsfehler machen.

6.1. Server-Cache

Ein WooCommerce-Shop ist dynamisch und du musst ihn statisch machen, um ihn zu beschleunigen. Ansonsten muss jeder deiner Server alle Assets aus der Datenbank holen und verschwendet wertvolle Zeit. Wenn dein Server eine Caching-Lösung unterstützt, würde er einfach das HTML zurückgeben.

6.2. Browser-Cache

Ein Browser-Cache kann die WooCommerce-Shops für Besucher, die mehrere Seiten deines Shops besuchen, erheblich beschleunigen. Tatsächlich kann der Browser alle statischen Dateien wie Stylesheets und JavaScript-Dateien zwischenspeichern. Dadurch können die Seiten viel schneller wiederholt angesehen werden.

7. Webdesign verbessern

Gute Leistung beginnt immer mit gutem Design. Das ist es, was Brad Frost in einem Artikel predigt, der zu einer Entschuldigung für Leistung geworden ist. Er sagt:

Letztendlich geht es bei Leistung um Respekt. Respektiere die Zeit deiner User und sie werden eher mit einer positiven Erfahrung davonkommen. Gute Leistung ist [ein] gutes Design. Es ist an der Zeit, dass wir sie als solche behandeln.

Beginnt dein WooCommerce Schaufenster mit einem riesigen Karussell? Ist dir bewusst, dass Karussells praktisch nutzlos sind? Lädt dein WooCommerce-Shop ein Video oder ein HD-Bild im Hintergrund? Zeigt dein Shop alle sozialen Widgets an?

Wenn ja, vergiss nicht, dass all diese Designelemente einen direkten Einfluss auf die Geschwindigkeit deines WooCommerce-Shops haben. Niemand hindert dich daran, diese Elemente zu integrieren. Ich möchte nur erwähnen, dass du eine Wahl treffen musst, wenn die Leistung eine Priorität ist!

8. Wähle Lightweight Theme

In vielen Fällen liegt die ästhetische Entscheidung für eine Website bei den Designern, die die Ladegeschwindigkeit der Seite nicht berücksichtigen. Infolgedessen hat die Ästhetik des Frontends oft Vorrang vor der Ladegeschwindigkeit der Seite.

Wenn du das Thema deiner Webseite fertig stellst, empfehle ich dir dringend, ein Thema zu wählen, das leichtgewichtig und leistungsoptimiert ist. Das Theme sollte nicht nur ansprechend sein, sondern auch eine saubere Codebasis haben, die der Geschwindigkeit den Vorrang vor der Ästhetik gibt.

9. Verlässliches Hosting

In vielerlei Hinsicht ist das Hosting der WICHTIGSTE Faktor, der die Leistung des WooCommerce-Shops beeinflusst. In der Tat ist die zugrunde liegende Hardware-Architektur für die Abwicklung des Datenverkehrs und die Bereitstellung der relevanten Daten an die Nutzer verantwortlich. Daher sollte das beste WordPress Hosting deine erste Priorität sein.

Es ist am besten, einen Hosting-Provider zu wählen, der:

Datenzentren auf der ganzen Welt zur Verfügung stellt
Bietet CDN- und SSD-basierte Speicherung
Integriert leistungssteigernde Technologien
Hinweis: Es ist wichtig, den Server zu wählen, der deinem Publikum am nächsten ist, da dies die Antwortzeit des Servers verkürzt.

Ohne viel über die traditionellen (Shared, Dedicated und VPS) Hosting-Lösungen zu sprechen, werde ich nur über Cloud Hosting sprechen.

9.1. Cloud-Hosting

Cloud Hosting bietet die beste Mischung aus Leistung und Kosten für WooCommerce-Shops. Das Gute daran ist, dass die meisten Anbieter von Cloud Hosting einem Pay-as-you-go-Modell folgen, das sicherstellt, dass du nur für die Ressourcen bezahlst, die der Shop tatsächlich verbraucht.

Während der Urlaubszeit nehmen der Traffic und die Nutzeranfragen exponentiell zu und traditionelle Hosting-Lösungen könnten in solchen Szenarien versagen. Dank der Skalierbarkeit von Cloud-Hosting-Lösungen können Unternehmen trotz der Belastung ihres WooCommerce-Shops weiter wachsen.