skip to Main Content

Heute möchte ich euch zeigen wie ihr einen schnellen, performance optimierten, WooCommerce Shop aufbaut. In meinem Beispiel habe ich die Ladezeiten eines Shops auf unter 500ms gebracht.

Hierzu unterteile ich die verschiedenen Punkte wie folgt:

  1. WooCommerce Theme & Einstellungen
  2. Caching & Performance Plugins
  3. Testing & Bilder
  4. Server, CDN & Weiteres
WooCommerce Shop unter 500ms Ladezeit
WooCommerce Shop unter 500ms Ladezeit

Das WooCommerce Theme & Einstellungen

Ich weiß ihr werdet jetzt bestimmt denken, der will doch nur Werbung machen. Nein das möchte ich nicht – ich kenne weder die Entwickler noch erhalte ich Affiliate Punkte oder sonstiges. Ich möchte einfach nur sagen, dass das Flatsome Theme eines der performantesten und ausgereiftesten WooCommerce-Themes am Markt ist. Mit über 69,545 Verkäufen und einer durchschnittlichen Bewertung von 4.8 kann man damit einfach nichts falsch machen. Zudem besitzt das Theme einen eigenen UX Builder (kein Visual Composer) und hat zahlreiche Einstellungsmöglichkeiten, von denen andere Themes nur träumen würden.

Flatsome WooCommerce Theme
Flatsome WooCommerce Theme

Aber gut hier geht es um Performance und Flatsome bietet einige sehr interessante Möglichkeiten:

  1. Lazy Loading
  2. Infinite Scroll
  3. Clean Code
  4. Wenige JS / CSS Requests

Lazy Loading ermöglicht es euch bzw. euren Nutzern Bilder erst dann zu laden, wenn sie auch im Viewport sind – also wenn der Nutzer z.B. zu einem Bild herunter scrollt. Infinite Scroll lädt Produkte dynamisch nach, d.h. es werden nicht gleich all 30 Produkte in einer Kategorie angezeigt sondern nachgeladen. Warum ist das wichtig für die Performance? Wie ihr bestimmt wisst, frisst jeder Request an euren Server Ressourcen und verringert die Ladegeschwindigkeit – deshalb sollten Serveranfragen so weit es geht auf ein Minimum heruntergeschraubt werden. Eine gute Orientierungsanzahl an Request ist unter 30 zu bleiben. Natürlich ist um so weniger immer besser 🙂

Mehr über das Flatsome WooCommerce Theme

Lazy Loading in Flatsome
Lazy Loading in Flatsome
Infinte Scroll in Flatsome
Infinte Scroll in Flatsome

Caching & Performance Plugins

Zu aller erst: umso mehr Plugins ihr installiert, umso langsamer wird eure Webseite. Deshalb bleibt bei der geringsten Anzahl von Plugins, die auch wirklich nötig sind! Essentielle Plugins sind natürlich WooCommerce, ein SEO Plugin und diverse Caching / Performance Plugins, über die euch hier informieren möchte.

1. WP Fastest Cache

WP Fastest Cache erlaub es euch statische HTML Dateien eurer Seiten zu erstellen. Desweiteren könnt ihr HTML code optimieren, GZIP und Browser Caching aktiveren und WP Emojis entfernen. Hackt hier nicht die JS / CSS Funktionen an, es sei denn ihr habt die Pro Version. Falls nämlich nicht werden nur head skripte optimiert, aber die Footer-Skripte außen vorgelassen. Dafür nutzen wir unserer 2tes Plugin.

Mehr über WP Fastest Cache

WP Fastest Cache funktioniert nicht in einer Multisite – hierfür solltet ihr WP Super Cache oder Total Cache benutzen.

WP Fastest Cache Einstellungen
WP Fastest Cache Einstellungen

2. Autoptimize

Autoptimize kann JS und CSS-Dateien zusammenführen, verkleinern und zwischenspeichern. Zudem können diese in den footer verschoben werden und HTML verkleinert werden. Im Grunde kümmert es sich um die Reduzierung mehrer JS / CSS Requests indem es eine Datei, und damit auch nur einen Request, erstellt.

Mehr über Autoptimize

Autoptimize Einstellungen
Autoptimize Einstellungen

Testing & Bilder

Als nächstes könnten wir unsere Webseite testen. Bei den meisten wird auffallen, dass die Webseite an sich der sehr große ist. Dies liegt meist an nicht optimierten / passend zugeschnittenen Bildern. WooCommerce, oder auch Flatsome, bieten euch die Möglichkeit Bilder direkt einer exakten Pixelgröße zuzuschneiden. Dies verringert die Größe des Requests, der an euren Server gestellt wird und auch die Gesamtgröße eurer Webseite. Das ist natürlich wegen der geringeren Größe auch gut für Mobile Phones, wo Google sehr großen Wert drauflegt.

Wie also vorgehen? Als erstes solltet ihr prüfen, was denn wirklich die kleinste, benötigte Größe ist. Schaut euch am Besten eure Seite im Mobile Modus an, dort wird meist die größte Größe eurer Bilder klar, denn diese werden in 100% Weite dargestellt.

Gefunden? Gut, dann tragt diese Werte im Customizer > WooCommerce > Produktbilder ein. Danach werden automatisch all eurer Bilder auf die richtige Größe zugeschnitten. Dies müsst ihr für die Kategorie & Produktseiten-Bilder machen.

Größte benötigste Bildgröße Finden
Größte benötigste Bildgröße Finden
WooCommerce Bildgröße Ändern
WooCommerce Bildgröße Ändern

Was könnt ihr noch tun? Manchmal sind eure Bilder auch nicht richtig komprimiert. Hierfür gibt es Plugins wie WP Smush oder Ähnliches, aber ich versuche diese zu umgehen: richtig aus Photoshop Exportieren (jpg /png mit Qualität 9) oder auch die optimierten Versionen von Google Pagespeed herunterladen.

Optimierte Bilder von PageSpeed herunterladen
Optimierte Bilder von PageSpeed herunterladen

Testen könnt ihr eure Seite mit den folgenden Tools:

Achtet bitte immer darauf, dass ihr den richtigen Testserver auswählt (er sollte in der Nähe von eurem Servern stehen).

Server, CDN & Weiteres

Server

Der gute alte Server … natürlich bringt es nichts, wenn ihr einen 1GB Ram / 1CPU Server nehmt für 9999 Benutzer pro Minute. Das sollte euch klar sein – der, oder auch die Server (falls über Load Balancer) sollten der Performance stand halten. Dafür könnt ihr Apaches ab testing benutzen etc. Aber wirklich wichtig bei der Server-Optimierung sind die folgenden Punkte:

CDN (Content Delivery Network)

Danach stellt sich die Frage nach einem CDN.

  • Steht eurer Server in DE, ihr habt aber Kunden aus USA? Benutzt ein CDN!
  • Habt ihr viele Bilder, Skripte etc. die sich nicht ständig ändern? Benutzt ein CDN!
  • Habe ihr wenig Kunden z.B. alle aus DE und eurer Server steht in DE? Benutzt kein CDN!

Welches CDN? Ich bevorzuge Cloudflare, ist umsonst und sehr einfach einzurichten. Es verringert die Anfragen an euren Server durch die Auslagerung von Bildern und sonstigen Dateien deutlich.

Weiteres

Was gibt es sonst noch zur Performance-Steigerung?

  1. Load Balancing über HAProxy indem ihr Anfragen an mehrere Server verteilt.
  2. Videos auf Youtube laden
  3. Statt internen Kommentaren z.B. Disqus benutzen
  4. WordPress Heartbeat AJAX calls ausstellen
  5. Kein Shared Hosting – ein richtiger WP-Hoster / Server / VServer
  6. WP-Sweep (zum aufräumen eurer DB)

Im Grunde genommen: weniger ist mehr! Alles, was nicht unbedingt ein eigenes Plugin braucht -> in eurer Child Theme.

Daniel Barenkamp

Founder and Creator of WeLaunch (formerly DB-Dzine).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

×Close search
Suche