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
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
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
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
Nachher
