Mosquito

Wie kann man den Betrieb des Onlineshops beschleunigen, ohne sein Aussehen drastisch zu ändern? Case study Mosquito.pl

Was ist ein Schlüsselelement von Onlineshops für Kleidung? Perfekte Fotos. Sie ziehen die Aufmerksamkeit auf sich, regen die Fantasie an und ermutern die Kunden zum Kauf. Leider sind sie sehr oft der Grund dafür, dass der Onlineshop langsamer läuft als es sollte. Worauf sollte man bei der Optimierung der Website achten und wie können die Fotos die Qualität nicht verlieren? Wir werden Ihnen dies am Beispiel der Änderungen, die wir im Onlineshop mosquito.pl eingeführt haben, erläutern.

Warum sprechen wir nur über einen kleinen Teil der Zusammenarbeit?

Die ständige Betreuung des Onlineshops basiert auf häufigen Gesprächen mit dem Kunden, vielen kleinen Projekten und der ständigen Einführung der benötigten Lösungen. Die Beschreibung einer solchen täglichen Zusammenarbeit würde dem Empfänger nicht viel Wert geben. Deshalb wählen wir in jeder Fallstudie eines von vielen Themen aus, die sich auf einen bestimmten Kunden beziehen, um nicht nur zu zeigen, wie wir arbeiten, sondern auch, um Sie zu konkreten Veränderungen in Ihrem Onlineshop zu inspirieren.

Ergebnisse unserer Arbeit

Dank der Zusammenarbeit mit uns hat der Kunde gewonnen:

  • Es erzielte bessere Indikatoren der Seitengeschwindigkeit (page speed) – aber das Hauptziel war es, die vom Benutzer wahrgenommene Geschwindigkeit zu verbessern (sie ist deutlicher als die von Google-Tests gezeigte).
  • Er musste nicht auf schöne und scharfe Bilder verzichten – wir sorgten dafür, dass sie auf verschiedenen Geräten gut aussehen.
  • Er kann sich über einen Onlineshop freuen, dessen Code strukturiert ist und kann so sein schnelles Wachstum unterstützen.
  • Er erhielt eine Website mit optimaler Geschwindigkeit für den Endbenutzer.

Warum ist der Kunde mit der Zusammenarbeit zufrieden?

Neben den erwarteten (oder die Erwartungen übertreffenden) Ergebnissen sind auch andere Elemente wichtig.

  • Einige Änderungen wurden live getestet, um schwerwiegende Folgen zu vermeiden und den Kunden vor schwerwiegenden finanziellen Folgen zu schützen.
  • Wir passen den Zeitplan der Aktivitäten an den Onlineshop des Kunden an. Zunächst zeigen wir die Änderungen auf einem Testserver und legen gemeinsam mit dem Kunden fest, welche wir auswählen. Der Termin der Änderungen im Onlineshop berücksichtigt die geplanten Sonderangebote. Auf diese Weise verringern wir das Risiko eines möglichen Ausfalls in einem wichtigen Verkaufsmoment.
  • Wir fanden sehr schnell eine gemeinsame Sprache mit dem Kunden. Er wusste, dass er vom Team verstanden werden würde, was die für die Kommunikation benötigte Zeit erheblich verkürzte.
  • Unser Team besteht aus Spezialisten aus verschiedenen Bereichen. So können wir jede Herausforderung aus mehreren Perspektiven betrachten, was die Effektivität der vorgeschlagenen Lösungen erhöht.
  • Das Vertrauen des Kunden erlaubt es uns, einige Entscheidungen selbst zu treffen. Wir beweisen schnell, dass wir in vielen Aspekten der Zusammenarbeit freie Hand haben möchten, um den Kunden nicht in jeder Kleinigkeit um Zustimmung bitten zu müssen. Wir belästigen ihn nicht mit Details und sparen so seine Zeit.
  • Unsere Zusammenarbeit mit dem Programmierer des Kunden verläuft gut. Der Vorteil ist die Möglichkeit, Lösungen mit einem erfahreneren Team zu besprechen und bewährte Verfahren zu erlernen. Gemeinsam können wir auch schneller auf aktuelle Bedürfnisse reagieren.

 

Mosquito

Über Mosquito

Mosquito ist ein Shop mit in Polen entworfener und genähter Damenbekleidung. Alle verfügbaren Modelle sind einzigartig und wurden von Alicja Komar entworfen. Dank der Planung des gesamten Produktionsprozesses in Polen und der Zusammenarbeit mit lokalen Lieferanten werden etwaige Mängel schnell erkannt und die Marke ist in der Lage, ihren Kunden eine ausgezeichnete Qualität zu bieten. Und das führt zu einer raschen Entwicklung. In letzter Zeit hat die Marke ihren Umsatz fast verdreifacht – von mehreren Millionen auf 40 Millionen pro Jahr. Ein größerer Website Traffic ist eine große Belastung für den Onlineshop, auf die er vorbereitet sein muss.

Mosquito

Wichtige Herausforderungen

Der Kunde wandte sich an uns, um den Parameter der Seitengeschwindigkeit (Page Speed) zu korrigieren. Er wollte, dass die Website für den Endkunden jederzeit so schnell wie möglich geladen wird. Das Hindernis waren die hohen Anforderungen an Grafiken und Fotos – es gab viele von ihnen und sie mussten schön und scharf sein (und daher viel wiegen). Eine weitere Herausforderung war die Code-Strukturierung. Zuvor hatten verschiedene Programmierer mehrere Jahre lang an dem Shop gearbeitet. In einer solchen Situation lohnt es sich, den Code von Zeit zu Zeit zu überprüfen und ihn auf die Ladegeschwindigkeit der Website zu optimieren, vor allem, wenn der Website Traffic sehr schnell steigert.

Hauptziele der Zusammenarbeit

  • Code-Strukturierung – der Shop sollte auf Modulen basieren, nichts im Code sollte starr fixiert werden.
  • Optimierung des Shops, um eine schnelle Entwicklung zu ermöglichen – der Umsatz des Unternehmens ist in kurzer Zeit angestiegen.
  • Optimierung der Betriebsgeschwindigkeit des Onlineshop.
  • UX-Verbesserung auf der Grundlage der Leitlinien der Agentur.

Was haben wir optimiert?

  • Bedürfnis

    Die Marke Mosquito ist seit 2008 auf dem Markt tätig. In dieser Zeit arbeiteten viele Programmierer und Freiberufler an dem Shop. Die von ihnen vorgeschlagenen Lösungen waren zwar wirksam, passten aber nicht immer zueinander. Außerdem hat sich die Technologie im Laufe der Jahre verändert. Unser Ziel war es nicht, das Template zu ändern, sondern das bestehende zu optimieren. Mateusz Sobieraj von der Agentur Adcookie hat uns für diese Herausforderung empfohlen. Wir erledigten die Testaufgabe sehr gut, so dass wir unsere Zusammenarbeit ausweiteten. Wir wurden auch mit der Aufgabe betraut, die Geschwindigkeit des Shops zu optimieren.

  • Audit des Onlineshops

    Wir begannen unsere Arbeit mit einer Analyse und Bestandsaufnahme des Shops. Wir führten ein Code-, Shop- und Umwelt-Audit durch. Wir bewerteten den Betrieb des Servers, und stellten dabei einige wichtige Elemente fest, die seinen Betrieb beeinflussen. Unter anderem wurde eine alte Version von PHP verwendet, die aktualisiert werden musste. Smart Cache, das wichtigste Leistungstool von PrestaShop, wurde nicht verwendet. Wir mussten das Tool ausführen, überprüfen und reparieren, wenn etwas nicht richtig funktionierte. Außerdem fanden wir einige Dutzend installierte, aber nicht verwendete Module. Wahrscheinlich bestanden sie den Test irgendwann nicht und wurden deshalb deaktiviert… Sie sollten sofort entfernt werden, denn sie wirken sich auch auf die Geschwindigkeit des Onlineshops aus. Überdies hatte der OPcache zu wenig Speicher, um effizient zu arbeiten.

  • Foto-Herausforderung

    Die Website des Onlineshops besteht – aus Sicht des Endkunden – hauptsächlich aus Fotos. Nach dem Start der Website lösten die visuellen Elemente mehr als 200 Anfragen aus. Sowohl kleine als auch große Bilder wurden auf mobilen Geräten sehr langsam geladen. Wir haben die Anzahl der Anfragen viermal reduziert, und wenn möglich, auch die Bilder. Wir verwendete auch „Lazy Loading” (faules Laden) von Bildern – sie werden nicht auf einmal geladen, wenn die Website gestartet wird, sondern erst nach dem Scrollen.

  • 2 Foto-Varianten

    Smartphones mit Retina-Displays erfordern eine doppelte Auflösung von Fotos, auch Desktops zeigten Fotos mindestens 2-mal größer als nötig an. Die Lösung? Durch Anpassung der angezeigten Fotos an den Gerätetyp. Wir erstellten 2 Varianten von Fotos – eine Variante für Geräte mit Retina-Display und eine Variante für andere Geräte. Es war möglich, dies durch die Verwendung neuer Tags im HTML-Code zu machen. Die Verwendung verschiedener Bilder führte nicht nur zu einer schnelleren Darstellung, sondern auch zu einer geringeren Serverbelastung. Und dies wiederum bedeutet geringe Kosten für den Kunden.

  • Logotype, Icons und Hintergründe

    Es scheint, dass ein so kleines Element wie ein Logo keinen großen Einfluss auf die Ladegeschwindigkeit einer Website hat. Und doch! Das Logo war im einem sehr großen .jpg-Format, obwohl es schwarz-weiß war. Wir konvertierten es in das .svg-Format. Es ist jetzt klein, aber fantastisch skalierbar. Es ist vollständig optimiert und vor allem schärfer, weil es vektoriell ist. Auch die Icons änderten sich. Zuvor waren sie in separaten Dateien und unterschiedlichen Formaten gespeichert. Jetzt sind sie alle im skalierbaren svg-Format und in einer Datei, sodass sie schneller geladen werden. Die letzte kleine, aber sehr wirksame Änderung betrifft den Hintergrund der Bilder vor dem Laden. Wir ersetzten den großen, grauen Hintergrund im .jpg-Format durch eine .png-Datei, die nur wenige Bytes groß ist.

  • Externe Skripte

    Externe Skripte wie Google Analytics, Facebook Pixel, Typekit usw. belasteten die Website stark. Sie wurden alle am Anfang geladen, was sich auf die Ladezeit der Website auswirkte und dazu führte, dass der Kunde lange warten musste, bis die Website angezeigt wurde. Die Lösung? Derzeit werden einige externe Skripte mit einer Verzögerung geladen, erst nachdem die Website angezeigt wurde. Es wurden auch neue Techniken für eine frühzeitige Verbindung eingesetzt. Der Betrieb wird dadurch nicht beeinträchtigt, aber der Endkunde sieht den Inhalt des Shops schneller… und kann schneller mit dem Kauf beginnen.

  • UX-Verbesserung

    Regelmäßig setzten wir UX-Empfehlungen von Adcookies auf der Grundlage der Ergebnisse von A/B-Tests um. Wir fügten zum Beispiel verkürzte Bewertungen direkt neben dem Produktfoto hinzu. Die Kennzeichnung von Waren mit Blik- und PayU-Badges trug ebenfalls zur Steigerung der Konversion bei – klare Informationen über diese Zahlungsmethoden bereits auf der Produktseite waren sehr verkaufswirksam. Interessant war auch die Information, dass fast 100% der Kundinnen den Einkauf bei Mosquito kurz vor der Bezahlung empfehlen. Ein Grund mehr, die Transaktion abzuschließen, oder?

  • CSS

    CSS kann problematisch sein, wenn PrestaShop lange Zeit verwendet wird. Das Shop-Template wurde vor vielen Jahren gekauft und dann durch Hinzufügen weiterer Module verändert. CSS überschrieben sich gegenseitig und viele der geladenen Schriftarten wurden überhaupt nicht angezeigt. Sie mussten organisiert und optimiert werden. Der Prozess ist noch nicht abgeschlossen, aber der Umfang des CSS ist kleiner geworden.Alle überflüssigen Elemente, die sich über lange Zeit angesammelt haben, wurden entfernt. Außerdem wurden auch neue CSS-Techniken eingeführt, die es vor einigen Jahren noch nicht gab, wie z. B. das Modul Flexbox., das sich erheblich auf die Rendering-Geschwindigkeit auswirkte.

  • Konsequenter Stil des Onlineshops

    Unser Frontend-Entwickler beschäftigte sich auch mit den Grafiken der Website. Kleinere Änderungen betrafen die Abrundung der Ränder von Schaltflächen und Adressfeldern sowie die Verbesserung von Icons. Wir arbeiteten die Anmeldeseite und das Kundenkonto aus, um sie an den hellen Stil der Marke Mosquito anzupassen. Der gesamte Onlineshop wurde auch in Bezug auf die Darstellung auf mobilen Geräten stark verbessert.

  • Proaktiver Ansatz zur Optimierung

    Dank unserer ausführlichen Tests konnten wir viele kleine Fehler entdecken. Wenn die Behebung keinen großen Zeitaufwand erforderte, begannen wir sofort damit und meldeten die Änderungen am Ende. Wir reparieren nur einfache Dinge im Handumdrehen. Ohne Zustimmung des Kunden nehmen wir keine großen Änderungen vor. Wenn uns während des Projekts Ideen für Verbesserungen einfallen, schreiben wir sie auf, um sie später einzuführen. Wir berücksichtigen immer die aktuellen Bedürfnisse des Kunden, sie haben den größten Einfluss auf die Aufgabenliste.

Und was sagt der Kunde selbst über die gemeinsam erzielten Ergebnisse?

 

Convertis ist für uns ein sehr wichtiger Partner, der eine so dynamische Entwicklung der Marke Mosquito in letzter Zeit maßgeblich beeinflusst hat. Die professionelle und schnelle Unterstützung des gesamten Convertis-Teams hat in vielen Fällen direkte Vorteile in Form einer erhöhten E-Commerce-Konversionsrate gebracht.

Jakub Roskosz, Mosquito.pl

3 Tipps für Sie

  • Halten Sie Ihren Onlineshop in Ordnung. Und wir reden hier nicht über Regale, sondern über den Code Ihrer Website. Aktualisieren Sie es regelmäßig, werfen Sie nicht funktionierende Module weg und stellen Sie sicher, dass sich die Skripte nicht selbst überschreiben.
  • Setzen Sie auf proaktive Mitarbeiter, die nicht nur auf Ihre Anweisungen warten, sondern selbst nach Verbesserungsmöglichkeiten des Betriebs suchen und diese in die Tat umsetzen.
  • Achten Sie nicht nur auf die Zahlen auf den Zählern, sondern auch auf das tatsächliche Nutzererlebnis (UX). Das Endziel sollte nicht sein, die Ergebnisse von Google Page Speed zu verändern, sondern dass der Nutzer bemerken kann, dass Ihre Website schneller läuft.