Headless zwiększył szybkość ładowania strony do 1,8 sekundy

Historia marki

Castorama Polska jest liderem w kategorii Home Improvement. Firma uruchomiła pierwszy sklep w 1997 roku. Obecnie prowadzi sprzedaż w 80 lokalizacjach w całej Polsce. Zapewnia również klientom w całym kraju dostęp do oferty on-line. Spółka zatrudnia blisko 12 tys. pracowników. Castorama Polska jest częścią Kingfisher plc, międzynarodowej spółki posiadającej prawie 1200 sklepów w 10 krajach Europy.

Pierwszy headless dla DIY

Castorama to jeden z największych sklepów internetowych w Polsce, obsługujący bardzo duży ruch (nawet 7 mln sesji w skali miesiąca, kwiecień 2019). Z tego powodu klient potrzebował rozwiązania, które mimo takiego obciążenia w sklepie, zapewni odpowiednią szybkość ładowania się strony i sprosta oczekiwaniom współczesnych konsumentów. Projekt headless, który zrealizowaliśmy dla Castoramy to pierwsze wdrożenie tego rozwiązania w branży DIY w Polsce.

Zmieniający się świat zakupów

Aby rozwiązać problem naszego klienta, zaproponowaliśmy mu zastosowanie modelu headless. Headless to technologia przyszłości, która jest odpowiedzią na zmieniający się świat e-commerce i potrzeby konsumentów. Kiedy sprzedaż internetowa pojawiła się na rynku, klienci mieli do wyboru kupowanie tylko z poziomu ekranu komputera (desktop). Z tego powodu platformy sprzedażowe oferowały rozwiązania „all inclusive”, które łączyły backend i frontend. Dzisiaj się to zmieniło - rosną wymagania odbiorców, jak również zwiększa się liczba miejsc, w których dokonują oni zakupów (omnichannel). Technologia musi nadążać za tymi zmianami, dbając o wydajność serwisu.

E-commerce jest dziedziną konkurencyjną. Naszym celem zawsze było dostarczanie najlepszego doświadczenia dla klienta, by jak najszybciej mógł dotrzeć do produktów i dokonać zakupów. Ze względu na duży ruch w sklepie oraz bardzo skomplikowaną architekturę serwisu, z uwagą przyglądaliśmy się i analizowaliśmy możliwości zaimplementowania frameworka Vue.js W końcu zdecydowaliśmy się na headless, który niebawem będzie już standardem dla największych graczy e-commerce - Tomasz Stefanowski, Service WWW Development Manager, Castorama Polska.

Headless w e-commerce

Decydując się na to rozwiązanie, mieliśmy na uwadze to, że headless pozwala na „podłączenie” dowolnego beckendu, bez zmian po stronie frontu. Headless daje również więcej możliwości eksperymentowania i umożliwia lepszą personalizację (UX). Możemy prowadzić testy A/B, lepiej dostosować treści do użytkownika i rozbudowywać funkcjonalność serwisu, nie angażując do tego backendu.

Headless rozdziela frontend (część, która jest prezentowana użytkownikowi) i backend (technologia za warstwą prezentacji, która sprawia, że ​​wszystko działa) platformy sprzedażowej na osobne elementy. Innymi słowy, to co widzimy, wchodząc na stronę (warstwa wizualna), jest niezależne od platformy e-commerce, czyli od systemów zarządzania zamówieniami, płatności czy zarządzania informacją produktową (np. Magento w przypadku Castoramy).

W tradycyjnym modelu budowania platformy sprzedażowej mamy do czynienia z 3 warstwami sklepu. Oznacza to, że baza danych, backend i frontend działają razem. W podejściu headless e-commerce warstwa frontendowa działa oddzielnie i komunikuje się z resztą za pomocą API.

Zalety headless

Szybkość

headless umożliwia stworzenie szybszego sklepu internetowego oraz dokonywanie aktualizacji i zmian bez wpływu na backend.

Elastyczność

jest łatwiejszy do modyfikacji bez konieczności martwienia się o to, jak drobne zmiany mogą wpłynąć na pozostałe elementy.

Personalizacja

możliwość dostosowania wyglądu sklepu do różnych urządzeń.Dzięki API, które łączy backend z frontem, możemy stworzyć zupełnie odrębny wygląd dla sklepu, systemu POS czy aplikacji mobilnej.

Wygodniejsze zakupy

Zastosowanie rozwiązania headless przede wszystkim poprawia szybkość ładowania się serwisu. Użytkownik znacznie szybciej dostaje wyniki np. w momencie, gdy zmienia filtry wyszukiwania w poszczególnych kategoriach produktów (dawniej strona za każdym razem się przeładowywała, wydłużając czas oczekiwania). Dzięki temu modelowi Castorama może zaoferować użytkownikom znakomite doświadczenie zakupowe.

Jesteśmy bardzo zadowoleni z efektów pracy nad headless’em. To dopiero początek wdrażania tego rozwiązania w naszym sklepie, a już widać pozytywne rezultaty. Strona ładuje się szybciej, dzięki czemu możemy wyprzedzać konkurencję i zapewniać klientom doświadczenia zakupowe na światowym poziomie - Tomasz Stefanowski, Service WWW Development Manager, Castorama Polska.