Jak można przyspieszyć działanie sklepu bez drastycznych zmian w jego wyglądzie? Case study Mosquito.pl
Co jest kluczowym elementem sklepów z ubraniami? Doskonałe zdjęcia. To one przyciągają uwagę, pobudzają wyobraźnię i najmocniej zachęcają do zakupu. Niestety bardzo często to właśnie one są winne temu, że sklep działa wolniej niż powinien. Na co można zwrócić uwagę przy optymalizacji działania strony i jak nie stracić na jakości zdjęć? O tym opowiemy na przykładzie zmian, które wprowadziliśmy w sklepie Mosquito.pl.
Dlaczego opowiadamy tylko o wycinku współpracy?
Stałe wsparcie sklepu opiera się na częstych rozmowach z klientem, mnóstwie małych projektów i ciągłym wdrażaniu potrzebnych rozwiązań. Opisanie takiej codziennej współpracy nie dawałoby odbiorcy dużej wartości. Dlatego w każdym case study wybieramy jeden z dziesiątek tematów dotyczących danego klienta, żeby nie tylko pokazać, jak pracujemy, ale także zainspirować Cię do konkretnych zmian w Twoim sklepie.
Efekty naszej pracy
Dzięki współpracy z nami klient zyskał:
- Uzyskał poprawę wskaźników page speed – jednak głównym celem była poprawa szybkości odczuwalnej przez użytkownika (i ona jest wyraźniejsza niż ta pokazywana przez testy Google).
- Nie musiał rezygnować z ładnych i ostrych zdjęć – postaraliśmy się o to, by dobrze wyglądały na różnych urządzeniach.
- Może cieszyć się sklepem, którego kod jest uporządkowany, a przez to wspiera jego szybki wzrost.
- Zyskał stronę o optymalnej szybkości działania dla użytkownika końcowego.
Dlaczego klient jest zadowolony ze współpracy?
Oprócz oczekiwanych (albo przekraczających oczekiwania) efektów, ważne są też inne elementy.
- Niektóre zmiany były testowana na żywo na części ruchu, by uniknąć poważnych konsekwencji. Uchrania to Klienta przed poważnymi konsekwencjami finansowymi.
- Dopasowujemy harmonogram działań do biznesu klienta. Najpierw pokazujemy zmiany na serwerze testowym i wspólnie ustalamy z klientem, które wrzucamy na produkcję. Termin zmian w sklepie uwzględnia zaplanowane promocje. Dzięki temu zmniejszamy ryzyko ewentualnej awarii w trakcie ważnego sprzedażowo momentu.
- Bardzo szybko znaleźliśmy z klientem wspólny język. Wiedział, że będzie zrozumiany przez zespół, co znacznie skracało czas potrzebny na komunikację.
- W naszym zespole pracują specjaliści z różnych dziedzin. Dzięki temu patrzymy na każde wyzwanie z kilku perspektyw, co zwiększa skuteczność proponowanych rozwiązań.
- Zaufanie klienta pozwala nam podejmować część decyzji samodzielnie. Szybko udowadniamy, że zasługujemy na wolną rękę w wielu aspektach współpracy, więc nie musimy pytać go o akcept w każdej drobnej sprawie. Nie zaprzątamy mu głowy szczegółami i przez to oszczędzamy jego czas.
- Dobrze układa nam się współpraca z etatowym programistą klienta. Bonusem dla niego jest możliwość dyskutowania rozwiązań z bardziej doświadczonym zespołem, poznawanie sprawdzonych procedur. Wspólnie możemy też szybciej reagować na bieżące potrzeby.
Poprawa UX oraz przyspieszenie ładowania strony – Mosquito
Mosquito to sklep z odzieżą damską projektowaną i szytą w Polsce. Wszystkie dostępne modele są unikalne i zaprojektowane przez Alicję Komar. Dzięki zaplanowaniu całego procesu produkcyjnego w Polsce i przy współpracy z lokalnymi dostawcami, jakiekolwiek niedociągnięcia są błyskawicznie wychwytywane, a marka jest w stanie zapewnić klientom doskonałą jakość. A to przekłada się na szybki rozwój. W ostatnim czasie marka niemal trzykrotnie zwiększyła obroty – z kilkunastu do 40 milionów rocznie. Większy ruch to spore obciążenie dla sklepu i trzeba go do niego odpowiednio przygotować.
Główne wyzwania
Klient zwrócił się do nas w celu poprawienia parametru page speed. Zależało mu na możliwie szybkim ładowaniu strony dla klienta końcowego. Przeszkodą były duże wymagania dotyczące grafik i zdjęć – było ich mnóstwo, a musiały być ładne i ostre (a przez to sporo ważyć). Dodatkowym wyzwaniem było uporządkowanie kodu. Wcześniej nad sklepem pracowali przez kilka lat różni programiści. W takiej sytuacji warto raz na jakiś czas przejrzeć kod i zoptymalizować go pod kątem szybkości ładowania strony. Zwłaszcza jeśli ruch na niej wzrasta bardzo szybko.
Główne cele współpracy
- Uporządkowanie kodu – sklep miał być oparty na modułach, nic w kodzie nie miało być zaszyte na sztywno.
- Optymalizacja sklepu, by możliwy był szybki wzrost – obroty firmy w krótkim czasie wzrosły kilkukrotnie.
- Optymalizacja szybkości działania sklepu.
- Poprawa UX na podstawie wytycznych od agencji.
Co zoptymalizowaliśmy?
-
Potrzeba
Marka Mosquito istnieje na rynku od 2008 roku. Przez ten czas nad sklepem pracowało wielu programistów-freelancerów. Rozwiązania przez nich proponowane, choć skuteczne, nie zawsze ze sobą współgrały. Dodatkowo przez lata zmieniała się technologia.
Naszym celem nie była zmiana szablonu, a zoptymalizowanie działania tego już istniejącego. Do tego wyzwania zostaliśmy poleceni klientowi przez Mateusza Sobieraja z agencji Adcookie. Zlecone nam testowe zadanie wykonaliśmy bardzo dobrze, więc rozszerzyliśmy współpracę i zaczęliśmy wspierać ich w trybie ciągłym. I między innymi powierzono nam optymalizację szybkości działania sklepu. -
Badanie stanu wyjściowego
Pracę zaczęliśmy od analizy i inwentaryzacji tego, co już było. Zrobiliśmy audyt kodu, sklepu i środowiska. Oceniliśmy działanie serwera, a przy okazji wyszło kilka ważnych elementów, które miały wpływ na wydajność. Używano m.in. starej wersji PHP – trzeba było ją zaktualizować. Nie używano Smart Cache, który jest głównym narzędziem wydajnościowym PrestaShop. Trzeba było go uruchomić, sprawdzić, co gorzej funkcjonuje w związku z tym i to naprawić. Dodatkowo znaleźliśmy kilkadziesiąt zainstalowanych, ale nieużywanych modułów. Prawdopodobnie nie zdały one w którymś momencie egzaminu, dlatego były wyłączone… Choć powinny być od razu usuwane, bo to też ma wpływ na szybkość działania sklepu. Także OPcache miał za mało pamięci, by działać wydajnie.
-
Wyzwanie fotograficzne
Strona sklepu – od strony użytkownika końcowego – składa się głównie ze zdjęć. Wizualne elementy generowały ponad 200 requestów przy jej uruchomieniu. Zarówno małe i duże obrazki ładowały się na telefonie bardzo wolno. 4-krotnie zmniejszyliśmy liczbę requestów, a tam, gdzie było to możliwe, także obrazki. Zastosowaliśmy także tzw. lazy loading obrazów – nie ładują się one od razu wszystkie jednocześnie przy uruchomieniu strony, ale dopiero po zescrollowaniu.
-
2 warianty zdjęć
Ze względu na to, że telefony z wyświetlaczem retina wymagają podwójnej rozdzielczości zdjęć, także na desktopach wyświetlały się fotografie przynajmniej 2 razy większe niż to konieczne. Rozwiązanie? Dopasowywanie wyświetlanych zdjęć do rodzaju urządzenia. Powstały 2 warianty – dla urządzeń z wyświetlaczem Retina i dla reszty świata. Było to możliwe dzięki użyciu nowych tagów w HTML-u. Wykorzystanie różnych obrazków nie tylko powodowało, że wyświetlały się one użytkownikowi szybciej, ale efektem było też mniejsze zużycie serwera. A to z kolei oznacza mniejsze koszty dla klienta.
-
Logotyp, ikony i tła
Wydawałoby się, że tak mały element jak logotyp nie ma dużego wpływu na szybkość ładowania strony. A jednak! Logo było w .jpg i w bardzo dużym rozmiarze, choć było czarno-białe. Zmieniliśmy jego format na .svg. Teraz jest małe, ale fantastycznie się skaluje. Jest w pełni zoptymalizowane, a przede wszystkim ostrzejsze, bo wektorowe. Zmiany zaszły także w ikonach. Wcześniej pochodziły z różnych modułów i były osobnych plikach i różnych formatach. Teraz są wszystkie w skalowalnym formacie svg i w jednym pliku i dzięki temu szybciej się ładują. Ostatnia drobna, ale bardzo skuteczna modyfikacja dotyczyła teł obrazków przed załadowaniem. Duże, szare tło w formacie .jpg zamieniliśmy na ważący kilka bajtów plik w .png.
-
Zewnętrzne skrypty
Dużym obciążeniem dla strony były zewnętrzne skrypty, takie jak Google Analytics, Pixel Facebooka, Typekit itp. Ładowały się wszystkie na starcie co wpływało na czas załadowania strony i sprawiało, że odbiorca musiał długo czekać na wyświetlenie strony. Rozwiązanie? Aktualnie część zewnętrznych skryptów ładuje się z opóźnieniem, dopiero po wyświetleniu się strony. Zastosowano także nowe techniki wczesnego nawiązywania połączeń i negocjacji https. Nie wpływa to na ich działanie, ale odbiorca szybciej widzi zawartość sklepu… i szybciej może zacząć kupować.
-
Poprawa UX
Regularnie wdrażaliśmy również UX-owe rekomendacje od Adcookies – stworzone na bazie wyników testów A/B. Umieściliśmy na przykład skrócone opinie zaraz obok zdjęcia produktu. Wzrost konwersji spowodowało również oznaczenie towarów plakietkami Blik i PayU – jasna informacja o tych sposobach płatności już na stronie produktu była bardzo skuteczna sprzedażowo. Ciekawym zabiegiem było również dodanie informacji, że prawie 100% klientek poleca zakupy w Mosquito tuż przed przejściem do płatności. To brzmi jak jeszcze jeden powód do sfinalizowania transakcji, prawda?
-
CSS
CSS może być problematyczny, jeśli PrestaShop jest używany przez dłuższy czas. Szablon sklepu został zakupiony lata temu, a następnie modyfikowany przez dodawanie kolejnych modułów. CSS-y wzajemnie się nadpisywały, a dużo fontów które były ładowane w ogóle się nie wyświetlało. Trzeba było je uporządkować i zoptymalizować. Ten proces ciągle trwa, ale CSS jest mniejszy objętościowo. Zostały wyrzucone wszystkie zbędne elementy, które kumulowały się przed dłuższy czas. Wprowadzono też nowe techniki css które jeszcze kilka lat temu nie były dostępne np. flexbox. Znacząco wpłynęło to na szybkość renderowania.
-
Uspójnienie stylistyki sklepu
Nasz frontendowiec Łukasz zajął się także grafiką na stronie. Drobne zmiany dotyczyły na przykład zaokrąglenia krawędzi przycisków i pól adresów czy uspójnienia ikon. Bardzo mocno dopieściliśmy stronę logowania oraz konto klienta tak, by odpowiadała lekkiej stylistyce marki Mosquito. Cały sklep został też mocno ulepszony pod kątem wyświetlania na urządzeniach mobilnych.
-
Proaktywne podejście do usprawnień
Dzięki naszym szczegółowym testom udało się wyłapać wiele drobnych błędów. Jeśli nie wymagały dużej ilości czasu na naprawę – od razu do niej przystępowaliśmy, a zmiany raportowaliśmy na końcu. W locie naprawiamy tylko proste rzeczy. Nie wprowadzamy dużych zmian bez akceptu klienta. Jeśli po drodze pojawiają się pomysły na usprawnienia – zapisujemy je do wdrożenia w przyszłości. Zawsze bierzemy przy tym pod uwagę bieżące potrzeby klienta, one mają największy wpływ na kolejkę zadań.
A co mówi sam klient o wspólnie wypracowanych wynikach?
Convertis dla nas to bardzo istotny partner, który miał realny wpływ na tak dynamiczny rozwój marki Mosquito w ostatnim czasie. Profesjonalne i szybkie wsparcie całego teamu Convertis wielokrotnie przyniosło bezpośrednie korzyści w postaci zwiększenia współczynnika konwersji e-commerce
Jakub Roskosz, Mosquito.pl
3 rady dla Ciebie
- Dbaj o to, by w Twoim sklepie panował porządek. I nie mówimy tu o półkach, ale o kodzie strony. Aktualizuj go na bieżąco, wyrzucaj niedziałające moduły i pilnuj tego, by skrypty się nie nadpisywały.
- Stawiaj na proaktywnych współpracowników. Takich, którzy nie będą czekać wyłącznie na Twoje polecenia, ale sami z siebie będą szukać możliwości usprawnienia działania sklepu i je wdrażać.
- Zwracaj uwagę nie tylko na liczby na licznikach, ale i na rzeczywiste odczucia użytkownika. Celem ostatecznym nie powinna być zmiana wyników na Google Page Speed, ale to, by odbiorca odczuwał większą szybkość działania strony.
Chcesz być zadowolony
z efektów, jak ten Klient?
Pogadajmy o tym, czego potrzebujesz w swoim sklepie.
Wysyłając wiadomość zgadzam się z polityką prywatności.
Porozmawiajmy o Twoim sklepie Grzegorz Frątczak, CEO Convertis