Case Study - Rejs UK Ltd

Otrzymaliśmy zgłoszenie od firmy Rejs Ltd - specjalistów zajmujących się sprzedażą akcesoriów meblowych już od 1993 roku. Zapytanie od przedstawicieli dotyczyło konkretnej kwestii – w grę wchodziło przyspieszenie działania sklepu oraz zmiana designu na bardziej "aktualny", zgodny z nowoczesnymi trendami.

Właścicielom zależało na unowocześnieniu wyglądu oraz poprawieniu kwestii intuicyjności - klienci mieli nie tylko łatwiej ale i przyjemniej poruszać się po sklepie. Jedną z najważniejszych kwestii było wpłynięcie na prędkość działania strony. 

Sklep REJS UK Ltd - najważniejsze problemy 

Analiza sklepu pozwoliła na wyłonienie następujących problemów:

• zbyt wolne działanie sklepu,
• nieatrakcyjny wygląd,
• niska funkcjonalność,
• brak intuicyjności.

Pierwszy problem, a więc zbyt wolne działanie sklepu odczuwali nie tylko klienci, którzy chcieli zamówić produkt, ale także pracownicy, dla których obsługa stała się po prostu uciążliwa. Kolejne niekorzystne aspekty, czyli brak atrakcyjnego, nowoczesnego wyglądu, kiepska funkcjonalność i brak intuicyjności, również nie były bez znaczenia. Klientom trudno było znaleźć to, czego szukali, a sama oprawa graficzna zniechęcała do dłuższego pozostania na stronie.

Powolne działanie sklepu przyczyniło się również do jego niskiej widoczności w wyszukiwarce Google, co z pewnością przyniosłoby negatywne skutki po aktualizacji Google Core Web Vitals. Więcej na ten temat możesz przeczytać naszym Blogu w [tym artykule]. 

Istniejący sklep opierał się o CMS Wordpress z wtyczką Woocommerce, który stał się silnikiem całego systemu sprzedaży. Jako specjaliści z wieloletnim doświadczeniem bardzo dobrze wiemy, że takie rozwiązanie to tylko półśrodek, jeśli chodzi o sklep internetowy. Nasza firma nie zajmuje się produktami opartymi o Wordpress, dlatego zaproponowaliśmy Klientowi stworzenie całkiem nowego sklepu internetowego, zgodnego z najnowszymi trendami i wytycznymi.

Sklep REJS UK przed podjęciem prac.

Poprzedni design sklepu:



Prezentacja poprzedniej prędkości i optymalizacji:




Tryb mobilny - Google PageSpeed



Analiza funkcjonalności sklepu REJS UK - podsumowanie

Działanie sklepu na komputerze i w telefonie
Ogólne działanie sklepu określone zostało jako bardzo wolne - załadowanie jakiejkolwiek z podstron, w tym strony głównej wymagało aż 4 sekund. Wszystko to potwierdza analiza prędkości na GTMetrix - 4,2s. 

Jeszcze mniej pozytywnie prezentowała się wersja mobilna - Google PageSpeed nie pozostawił złudzeń. Do załadowania strona potrzebowała nawet 6 sekund!

Design
Design strony już dawno miał za sobą lata świetności, a interfejs użytkownika był mało intuicyjny. Już na pierwszy rzut oka dało się zauważyć, że wiele elementów na stronie było powielonych. Powodowało to chaos i zwiększało szansę klienta na "zgubienie się" na stronie - szczególnie na telefonie. Optymalizacji wymagała również cała struktura sklepu.

SEO i optymalizacja
Optymalizacja SEO prezentowała się jeszcze mniej korzystnie - brakowało podstawowych elementów w kodzie sklepu, a Woocommerce generował także różne, nic nie znaczące linki, co potwierdziła wyszukiwarka Google. Oto przykład: https://www.rejsltd.co.uk/?attachment_id=12885 stanowiący potwierdzenie.

Tworzenie nowej wersji sklepu REJS UK
Praca nad zmianami REJS UK rozpoczęła się od zadania klientowi konkretnych pytań na temat nowego sklepu - dotyczyły one przede wszystkim jego potrzeb oraz wizji. Istotny był też cel, jaki chciał osiągnąć. Na tej podstawie opracowaliśmy nowy design sklepu. Po akceptacji projektu przez klienta, nadszedł czas na kodowanie.

Jako, że zarówno cała strona, jak i kodowanie sklepu rozpoczęły się na nowo, od podstaw, mogliśmy zdecydować się na najlepsze rozwiązania.

Praca nad nową wersją sklepu trwała około 4 miesięcy. Tyle czasu potrzebne było między innymi na:

• stworzenie nowego wyglądu sklepu,
• dodanie kilku animacji (niestety nie można zobaczyć ich na projekcie statycznym), co miało nieco wygładzić niektóre jego elementy i uatrakcyjnić prezentację.

Nowy sklep internetowy REJS UK prezentuje się doskonale, a efekty można zobaczyć "na żywo" pod adresem https://www.rejsltd.co.uk.

Oto aktualny wygląd sklepu:



Tak wygląda jego prędkość i optymalizacja:




By zobrazować efektywność wszystkich działań, dokonane zostało porównanie z innymi sklepami. Nie posłużyliśmy się tutaj jednak bezpośrednią konkurencją - są to sklepy "z górnej półki".

Porównanie prędkości przykładowych, efektywnie działających sklepów i najważniejszych elementów w ich obrębie.

1. Sklep - IKEA.



Sklep REJS UK charakteryzuje wiele więcej elementów na stronie głównej, niż ma to miejsce w przypadku sklepu IKEA. Mimo to, prędkość ogólna wypada na korzyść sklepu REJS.

Tryb mobilny - Google PageSpeed



2. Sklep ScrewFIX
Dokonaliśmy porównania podobnej ilości elementów na stronie głównej.



Tryb mobilny - Google PageSpeed



3. Sklep B&Q (DIY) – o podobnym asortymencie, co REJS UK. 
To sklep wiele większy, z bardziej obszernym asortymentem, ale nie obfituje on w wiele elementów na stronie głównej (oprócz kilkunastu obrazków). Niestety, stwierdziliśmy tutaj dużo braków. 



Tryb mobilny - Google PageSpeed



4. Ostatni sklep to nieco "mniejszy kaliber" - dla porównania. Nie sztuką jest bowiem brać pod uwagę tylko "grube ryby".



Tryb mobilny - Google PageSpeed




Wniosek jest jeden – sklep REJS pobija wszystkich. To prawdziwy demon prędkości.

Podsumowanie:
Dokonane zmiany w obrębie designu strony oraz prędkości działania satysfakcjonują klienta. Właściciel sklepu REJS jest bardzo zadowolony z nowej szaty graficznej oraz sposobu działania sklepu. Najlepszym dowodem na to jest wypowiedź klienta, podsumowująca cały proces.

[cytat] "Ten sklep chodzi tak szybko, że aż to jest nienormalne."


Działania podjęte w obrębie sklepu REJS UK

Prezentacja i szata graficzna sklepu

• Ponieważ sklep Rejs.co.uk ma już swoją identyfikację, logo oraz paletę kolorów, naszym zadaniem było odświeżenie stylu i prezentacja wizerunku zgodnie z charakterystyką produktów, które są nowoczesne, praktyczne i funkcjonalne. 
• Jedne z głównych wytycznych przy projektowaniu nowej szaty dla Rejs.co.uk obejmowały aspekty takie jak: prezentacja produktów i udoskonalenie nawigacji oraz ułatwienie odwiedzającym poruszanie się po sklepie. Istotne było również szybkie wyszukanie konkretnych produktów oraz ich grup. 
• Intuicyjna nawigacja w obrębie opcji produktu, zarówno w wersji desktop, jak i mobile, łatwy dostęp do koszyka, oraz szybki podgląd produktów z możliwością wyboru opcji i dodania do koszyka sprawia, że zakupy w Rejs.co.uk są sprawne i przyjemne. 

Optymalizacja sklepu
Optymalizacja została podzielona na dwa typy frontend oraz backend. Przedstawiamy każdy z nich.

Frontend:
Po stronie użytkownika (frontend) wdrażane są następujące rozwiązania:

• Wyświetlanie zdjęć w formatach nowej generacji - webp – backend, co dostarcza różne formaty + webp, a przeglądarka sama wybiera, który format wybrać. Dodatkowo, specjalnie dla wersji mobile zdjęcia są jeszcze pomniejszane. Na przykład, zamiast wyświetlać 1920px szerokości, są wyświetlane zdjęcia 960px.
• Lazy loading – ważne elementy (np. zdjęcia) są pobierane z serwera i wyświetlane dopiero wtedy, kiedy mają pojawić się na ekranie. Często na stronach można zobaczyć najpierw animację ładującego się zdjęcia, a dopiero po chwili właściwe zdjęcie.
• Aktywność głównego wątku – najpierw wykonywane są kluczowe dla strony skrypty.
• Minimalizacja ikonek – przygotowywana jest jedna paczka tylko z ikonami wykorzystywanymi na stronie.
• Wykorzystanie local-cache (cache w przeglądarce) – przechowuje się tam ilość produktów w koszyku, domyślny język, walutę.
• Dedykowany kod CSS – kod odpowiedzialny za układ, kolory i tym podobne elementy na stronie produktu nie jest ładowany na stronie głównej, tylko dopiero wtedy, kiedy ma być użyty. Ograniczana jest w ten sposób wielkość plików css.
• Optymalizacja kodu JS dzięki budowie modułowej - tylko wymagane komponenty są ładowane na konkretnej podstronie. Na przykład moduł odpowiedzialny za wyświetlanie zdjęć jest ładowany tylko na stronie z produktem.

Backend:
Po stronie serwera (backend) wdrażane są następujące rozwiązania:

• Wspomniane wyżej generowanie zdjęć w formacie webp.
• Pełny cache strony głównej (kodu HTML) - podczas zmiany w produkcie lub kategorii, które są na stronie głównej, aktualizowany jest jeden moduł, a nie cała strona.
• Wykorzystanie cache REDIS – tutaj przechowywana jest cała strona główna, dzięki czemu z każdym wejściem użytkownika nie trzeba generować tego samego kodu. Dodatkowo cache wykorzystany jest dla kategorii (lista oraz ilość produktów), czy poszczególnych produktów (kod HTML).

Bezpieczeństwo

• Google recaptcha v3 dla rejestracji oraz formularza kontaktowego,
• bezpieczny i skonfigurowany przez nas VPS server z gwarantowaną wydajnością, do obsługi sklepu i poczty,
• cotygodniowa kopia bezpieczeństwa sklepu, poczty, bazy danych na zewnętrzny serwer.

To tylko najważniejsze kwestie, o których można wspomnieć. Ze względów bezpieczeństwa, nie możemy podzielić się pełnymi informacjami w tym zakresie. 

Plany rozwoju sklepu
Tworząc nowy sklep, tym samym stworzona została baza do rozwoju sklepu, nad którą obecnie prowadzone są prace. Jest to reklama sklepu w wyszukiwarce Google, która ma na celu zwiększenie liczby klientów oraz wprowadzanie usprawnień i modyfikacji, zarówno dla klientów, jak i jego obsługi od strony administracyjnej. 

Przekonaliśmy Cię? Chciałbyś stworzyć z nami profesjonalny sklep internetowy dla Twojej firmy? Nie zwlekaj i skontaktuj się z nami!