Wie haben wir unseren Leuchtenshop optimiert

Der erste Teil unserer Optimierung des Lampenshops ist abgeschlossen: Die Produktdetailseite. Es fehlt nur noch das Hinzufügen in den Warenkorb und Wunschliste sowie die responsive Styles für die mobile Ansicht.

Lassen auch Sie Ihren Onlineshop von uns optimieren

Normal loben wir uns selten selbst, aber wir glauben hier haben wir uns selbst übertroffen 😉 Die Seite ist ultra krass schnell geworden. In der Optimierung steckt unser gesamtes Know-How der letzten Jahre und etliche Code-Schnipsel verschiedener Techniken, die wir für andere Projekte bereits entwickelt hatten. Wir haben die Seite von 0 komplett neu programmiert, damit wirklich nur genau jene Elemente enthalten sind, die auch relevant sind und nicht, wie in WordPress/WooCommerce, noch 1000 andere Codezeilen und Dateien enthalten sind, die alles unnötig verlangsamen.

Hier der direkte Vergleich

(ausgeloggt getestet, damit das alte WordPress Caching greift für einen vergleichbaren Test)

Vorher

  • Zeit bis zum Laden der Seite: ~305 ms
  • Zeit bis zum Laden der kompletten Seite inkl. aller Recourcen: 9001 ms
  • Größe der Seite (inkl. Dateien und Bilder): 1300 KB
  • Anzahl von Request/Dateien/Grafiken: 85
Onlineshop Geschwindigkeitsoptimierung für mehr Speed WooCommerce

Nachher

  • Zeit bis zum Laden der Seite: ~95 ms
  • Zeit bis zum Laden der kompletten Seite inkl. aller Recourcen: 1005 ms
  • Größe der Seite (inkl. Dateien und Bilder): 837 KB
  • Anzahl von Request/Dateien/Grafiken: 59
Onlineshop Geschwindigkeitsoptimierung für mehr Speed WooCommerce erfolgreich

Ausserdem hat sich der Google Page Speed Index drastisch verbessert

Grösste Neuerung der neuen Optimierung ist der Einsatz des WebP Bildformats. Wir haben einen automatischen Konverter programmiert, der die Produktbilder und die EEF-Labels in das WebP Format von Google konvertiert. Das bringt auf Chrome und Opera nochmal einen weiteren Geschwindigkeitboost. Firefox, IE und Safari unterstützen aktuell leider noch kein WebP. Für diese Browser gibt es allerdings einen Fallback für optimierte JPG Bilder. Dennoch ist die Seite auch in diesen Browsern extrem schnell. Der IE hat in unserem Test am schlechtesten abgeschnitten, aber ist immer noch sehr viel schneller als zuvor.

Caching

Die Optimierung ist ausserdem so angelegt, dass das lästige Servercachen in Zukunft entfällt, da keinen Servercache mehr gibt. Es wird nur noch clientseitig im Browser und in die Datenbank gegacht. Zudem verändert sich in Zukunft der Google Page Speed Index nicht mehr zum Schlechteren bei Änderungen, da wir nun ohne WordPress und WooCommerce 100% Kontrolle über den Code haben.

Die neue Seite beinhaltet natürlich alle SEO relavanten Sachen,

die auch vorher schon eingebaut waren:

  • eingepflegte SEO-Metabeschreibungen und SEO-Titel
  • Open Graph Daten
  • Rich Snippet, Rich Cards, Strukturierte Daten
  • PWA (derzeit aber noch inaktiv auf der neuen Produktdetailseite)

AMP

Die aktuelle AMP-Version ist noch WordPress, die vorerst so bleiben wird, da diese schon sehr gut optimiert ist. Verbesserungen können hier aktuell noch aus Usability-Sicht angesetzt werden. Aus

SEO-Sicht können wir hier nichts mehr weiter herausholen, da die AMP-Version schon voll optimiert ist. Die Such-Vorschau wenn man einen Suchbegriff oben in der Menüleiste eingibt, ist jetzt auch um den Faktor 10 schneller, da die Vorschaubilder nun exakt für die Vorschaugrösse optimiert sind

Optimieren auch Sie Ihren Onlineshop

Google Pagespeed für Onlineshop Lampen-LED-Shop.de
Google Pagespeed für Onlineshop Lampen-LED-Shop.de vorher

Der zweite Teile ist abgeschlossen und nun ist auch die Optimierung der Produktseiten und Loslösung von WordPress/WooCommerce fertig und Live geschaltet. Die Seite der Wunschliste ist ebenfalls von WordPress gelöst und selbst programmiert.

Zum Vergleich die Tests von Google Lighthouse der alten und der neuen Version. Die Seiten sind jetzt ausserdem auch zu 100% barrierefrei, das heisst, wenn sehbhinderte Seitenbesucher einen Screenreader verwenden, gibt es keine Probleme mehr: siehe in Lighthouse den Punkt “Accessibility”, vorher 52%, jetzt 100%. Desweiteren sind generell nochmal alle responsiven Ansichten optimiert. Vorallem die Tablet-Ansicht war vorher sehr schlecht, was wir nun behoben haben.

Vorher

Pagespeedoptimierung für WooCommerce Onlineshop Vorher

Nachher

Pagespeedoptimierung für WooCommerce Onlineshop Nachher
Profilbild von Dominique Jean Midedji

Dominique Jean Midedji

Corporate Strategy & Business Development
Kontakt
Bewerbung
Bitte ausfüllen
Bitte ausfüllen
Bitte ausfüllen
Bitte ausfüllen
Bitte ausfüllen
Büroklammer Icon
Dokumente anhängen (maximal 3 Anhänge à 2 MB)
Klicken Sie in das Kästchen
Absenden
Ladekreisel
Daten wurden erfolgreich gesendet!