Nibi Sport - Jak GrandNode przyspieszył ładowanie sklepu o 64%?
Ogólne
Nibi Sport to jeden z naszych użytkowników. Pod koniec ubiegłego roku zdecydowali się na migrację z WooCommerce. Jaki był główny powód takiej decyzji? Przede wszystkim system nie spełnił oczekiwań pod kątem działania samego narzędzia - firma borykała się z bardzo długim czasem ładowania sklepu. Problemem okazała się również struktura sklepu, która utrudniała nawigację w sklepie dla klientów.
Case study zostało napisane przez jednego z użytkowników GrandNode'a, który jest jednocześnie autorem migracji. Poniżej znajdują się główne cele migracji, problemy, które pojawiły się w trakcie migracji, a także rozwiązania wcześniej wymienionych problemów. Przedstawiamy również czas ładowania się poszczególnych stron. Niesamowite jest, jak wybór platformy e-commerce może wpłynąć na działanie sklepu internetowego.
Wyzwania
Pierwszym krokiem w migracji było stworzenie całkowicie nowego szablonu. W trakcie analizy przedwrożeniowej okazało się, że jednym z powodów tak wolnego działania sklepu były usterki techniczne w kodzie szablonu, a także w kodzie samego WooCommerce. Przeniesienie szablonu z WooCommerce do GrandNode okazało się niemożliwe.
Sklep oparty o WooCommerce miał bardzo długi czas ładowania się witryny. Poniżej znajdują się porównania czasu ładowania 3 krytycznych stron - strony głównej sklepu, strony kategorii, a także strony produktowej. Jak się okazuje najmniejsze rozbieżności i przybliżony czas działania był na stronie produktowej. Strona główna, która powinna przyciągać klientów, odstraszała czasem ładowania wynoszącym nawet 5 sekund. Różnica jest kolosalna.
Największe różnice można zauważyć na stronie głównej.
Rozwiązania
Rezultatem prac jest całkowicie nowy, odświeżony szablon sklepu w pełni wykorzystujący możliwości biblioteki Bootstrap 4.0, kolorystycznie dopasowany do logo firmy. Wykorzystanie Bootstrapa pozwoliło zmniejszyć kod, co pozytywnie wpłynęło na szybkość ładowania sklepu.
Pewne elementy w sklepie internetowym są niezmienne, bardzo pomocne okazało się zastosowanie wskazówki programistów GrandNode pochodzących z oficjalnego bloga, mowa tu o cache'owaniu poszczególnych elementów sklepu na dłuższy interwał czasowy. Możliwości ASP.NET Core sięgają jednak dalej i możliwe jest wykorzystywanie tej metody do przechowania większej ilości danych w inny sposób niż tylko interwał czasowy.
Warto pamiętać, że niektóre wdrożone zmiany mają zastosowanie w każdym narzędziu e-commerce. Jeśli Twoje pliki CSS, JavaScript i HTML są duże, zawierają dużo linii warto pomyśleć o minifikacji. Opcja ta w GrandNode możliwa jest poprzez uruchomienie odpowiedniego ustawienia w panelu administratora.
Sklep internetowy obfituje we wszelkiego rodzaju zdjęcia i grafiki, zazwyczaj są to grafiki duże, a co za tym idzie "ciężkie". W sklepie internetowym istotne jest posiadanie grafik idealnych jakościowo, by uatrakcyjnić produkt, ale warto dbać o to, by ich rozmiar był jak najmniejszy, bo każde 100kb za dużo, skutkuje coraz wolniejszym ładowaniem sklepu.
W Nibi.pl wykorzystany został również system rekomendacji i sugerowania produktów oparty o role i tagi klientów. Dzięki temu, każdy odwiedzający może zobaczyć zindywidualizowaną ofertę opartą o jego preferencje i wcześniejsze działania.
Następne cele
Przedstawiamy także plany na rozwój sklepu Nibi Sport, które przekazał nam deweloper tworzący ten sklep. Lista punktów poniżej:
- Aktualizacja sklepu do najnowszej wersji GrandNode 4.20 - Kluczowym jest dostosowania sklepu do wymagań RODO. Dzięki aktualizacji, właściciele Nibi Sport umożliwią klientom pobieranie personalnych danych, które przechowywane są w sklepie, a także usuwanie ich, gdy zajdzie taka potrzeba. Dodatkowym atutem jest możliwość tworzenia checkboxów na zgody marketingowe, które również są wymagane przez nowe prawo.
- Automatyzacja niektórych procesów w sklepie - Obecny kontakt z klientem prowadzony jest przez właścicieli sklepu. Wymaga to jednak sporych nakładów czasowych. Kolejnym zadaniem jest wykorzystanie powiadomień klienta "Customer reminders" i akcji klienta - "Customer actions", dostępnych jako standardowe funkcjonalności sklepu, by procesy takie jak porzucone koszyki, nieopłacone zamówienia czy przejścia na sklep z konkretnych witryn obsługiwać automatycznie.
- Aktualizacja szablonu - W najnowszej wersji GrandNode zauważyć możemy sporo zmian graficznych, między innymi pojawienie się popup'ów po dodaniu produktu do koszyka czy też po kliknięciu w przycisk "Pokaż". Są to elementy, które z całą pewnością poprawią konwersję w sklepie, a wdrożenie ich nie powoduje zwiększenia czasu ładowania sklepu.