Jak przyspieszyć sklep e-commerce w 10-ciu krokach?

Wdrożenie treści dzisiejszego artykułu z pewnością będzie wymagało od Was pomocy programisty. 90% tego, o czym będziemy pisali, nie zrobicie niestety samodzielnie. Jest to jednak bardzo ważne zadanie – być może najważniejsze, które możecie zlecić. Szybkość ładowania Waszego sklepu bezpośrednio przekłada się na konwersję sklepu, liczbę powracających Klientów, a tym samym – na sukces sklepu. Zobacz, co możesz zrobić i jak przyspieszyć sklep e-commerce.

Jeżeli jesteś stałym czytelnikiem naszego bloga, na pewno wiesz o tym, jak bardzo szybkość działania sklepu przekłada się na konwersję. Zostało to wykazane w wielu różnych badaniach. Wg KISSMETRICS:

  1. 40% internautów opuszcza strony, jeżeli ładują się dłużej niż 3 sekundy.
  2. 1 sekunda opóźnienia w ładowaniu strony zmniejsza współczynnik konwersji o 7% (czyli jeżeli Twoja średnia konwersja w sklepie wynosi 2%, to opóźnienie o 1 sekundę zamienia to w 1,86%, jeżeli sklep ładuje się 2 sekundy dłużej, to jest to 1,72%, a jeżeli 3 sekundy – 1,58%. Zobacz, jak 3 sekundowe opóźnienie spowodowało, że straciłeś prawie 25% szans na złożenie zamówienia przez tego Klienta.
  3. Zakładając, że dziennie Twój sklep zarabia 1000 zł, to 1 sekundowe opóźnienie w ładowaniu rocznie oznacza 25 550 PLN straconych pieniędzy. Jeżeli czytasz ten artykuł, to prawdopodobnie Twoim problemem nie jest 1 sekunda, tylko kilka sekund. Ile jesteś więc w stanie stracić rocznie? Zobacz na poniższy wykres:

Co możesz więc zrobić?

Systemy cache

Upewnij się, że Twój sklep jest wyposażony w system cache’ujący. Co to takiego?

Najłatwiej pokazać to na przykładzie. Wyobraźcie sobie, że prowadzicie winiarnię. Przychodzi do Was Klient, który chce kupić wino chateauneuf du pape. Żeby to zrobić, musicie podejść do regału i przynieść je do kasy. Jeżeli taka sytuacja powtarzałaby się kilka razy dziennie, to zapewne trzymalibyście butelkę przy kasie, żeby nie musieć chodzić do regału i jej szukać. Dokładnie tak działa cache. Jest to system, który rejestruje pliki i zdjęcia (w pewnym sensie “zrzut” sklepu) dla pierwszego Klienta, a wszystkim innym pokazuje jego kopię.

Część z systemów e-commerce jest już wyposażona w takie systemy. Często można jednak zainstalować dodatkowe rozwiązania takie jak Full-Page cache, albo Varnish, które pozwalają lepiej decydować o tym, co powinno być przetrzymywane przy kasie. 

 

Systemy CDN (Content Delivery Network)

Wróćmy do przykładu z poprzednich akapitów. Jeżeli dane wino byłoby produkowane we Francji, ale można by je było zamówić też ze sklepu w Polsce – to gdzie byś to zrobił? CDN czyli Content Delivery Network oznacza właśnie sieć serwerów, gdzie przechowywane są dane – w szczególności zdjęcia i inne pliki typu media. Dzięki temu, jeżeli na stronę wchodzi użytkownik A, to dane te pobierane są z jednego miejsca, a dla użytkownika B z innego – w zależności od jego lokalizacji. Dzięki temu upewniamy się, że pliki muszą pokonać możliwie najkrótszą drogę, zanim wyświetlą się użytkownikom.

Minifikacja kodu JS/CSS

Tutaj chcielibyśmy omówić dwa elementy. Zanim to jednak zrobimy, to wprowadźmy dwa pojęcia:

  1. Pliki JS (inaczej javascript) – są to skrypty, które odpowiadają za zachowanie strony po stronie przeglądarki. Przykładowo, jeżeli kliknąłeś w przycisk i wyświetliło się menu, to prawdopodobnie był to kod javascript.
  2. Pliki CSS – te pliki odpowiadają za style Twojego sklepu. Innymi słowami – za jego wygląd. W CSS ustalasz, że przycisk ma być niebieski, a tło szare. W css ustalasz też jakiej wielkości powinien być font oraz to jak wygląda menu.

Na czym polega więc minifikacja tych plików? Łatwiej wytłumaczyć to na plikach stylów.

Informacja o tym, jak ma wyglądać dany przycisk, może być zawarta albo w samym kodzie przycisku, albo na początku strony w zbiorczym pliku. Co więcej, w takim zbiorczym pliku może znajdować się wiele różnych reguł, gdzie jedna będzie nadpisywać drugą (np. ogólnie przyciski mają być niebieskie, ale przycisk na koszyku ma mieć ciemniejszy kolor i mieć ramkę).

Minifikacja polega na oczyszczeniu tego kodu, żeby:


Dzięki temu sam plik jest lżejszy, mniejszy, szybciej się wczytuje i można przyspieszyć sklep e-commerce. Ta sama zasada obowiązuje skrypty javascript – również są one łączone w jeden plik i usuwane są duplikaty. Może się też okazać, że nie wszystkie kody są potrzebne na wszystkich podstronach.

Umiejscowienie skryptów

Skoro już jesteśmy przy skryptach JS, to ważnym elementem jest to, gdzie są dodawane. Żeby to zrozumieć musicie wiedzieć, jak działają przeglądarki. Wyobraźcie sobie, że do wyświetlenia strony musicie pobrać wiele różnych danych, np.:

  1.  skrypty,
  2.  style CSS,
  3.  kod HTML,
  4.  obrazki,
  5.  video,
  6.  informacje o ciasteczkach

Przeglądarka ma ograniczenie w każdym z tych elementów – ile z nich może pobierać jednocześnie. Z tego powodu czasami widzimy, że strona już się pobiera, ale nie doładowują się pozostałe elementy, ponieważ czeka na któryś z elementów. To częsty przypadek przy skryptach JS, które są dodane na początku strony / sklepu. Weźmy jako przykład skrypt funkcji chatu na stronie. Jeżeli zostanie on niewłaściwie umieszczony, to witryna może potrzebować chwili, zanim skomunikuje się z zewnętrznym systemem, pobierze wszystkie pliki, a dopiero później wyświetli treść strony. Dla użytkownika będzie to oznaczało, że strona ładuje się wolniej.

Optymalizacja obrazów

To jeden z elementów, o który przynajmniej częściowo możesz zadbać sam. Każdy obrazek, który jest wrzucany na stronę Twojego sklepu, niezależnie od tego, czy jest to obrazek produktu, czy banner na stronie głównej – powinien zostać zoptymalizowany.

Jak o to zadbać? Po pierwsze upewnij się, że jest we właściwej rozdzielczości. Bez sensu będzie wrzucać zdjęcie o szerokości 4000 pikseli, jeżeli banner ma tylko 800 pikseli szerokości. Wszystko ponadto będzie tylko opóźniało działanie sklepu. W dużym uproszczeniu: większe zdjęcie = większy plik = przeglądarka będzie go dłużej pobierać.

Zanim zaczniesz jednak zmniejszać wszystkie obrazki, upewnij się, że otrzymałeś od programisty właściwe wymiary. Trzeba np. wziąć pod uwagę ekrany retina, które wymagają 2 x większych obrazów. Tutaj jednak znowu w grę wchodzi programista. To on musi w kodzie umieścić odpowiednie skrypty, które powiedzą przeglądarce, czy ma pobrać standardowe zdjęcie, czy 2 x większe. Inaczej zawsze będziesz pobierał za duże zdjęcia, co jak już ustaliliśmy – opóźni ładowanie sklepu.

Wielkość zdjęć to jednak nie wszystko. Zobacz na zdjęcia poniżej. Wydają się takie same? A jednak nie są. Zdjęcie po lewej “waży” 1.5 MB, a to po prawej tylko 379 KB. Prawie czterokrotna różnica. Skoro wyglądają identycznie – po co przepłacać? Nie chcielibyśmy wchodzić tutaj w szczegóły, jak uzyskiwana jest kompresja tych obrazów. Ważne jest to, że są narzędzia, które pozwalają to osiągnąć. Jeżeli wrzucasz do sklepu nowe zdjęcie, to koniecznie najpierw dodaj je do strony optimizilla.com – ona skompresuje to zdjęcie i pozwoli Tobie pobrać zoptymalizowaną wersję.

 

Obrazek posiada pusty atrybut alt; plik o nazwie image-1.png

Co zrobić jednak ze zdjęciami, które już są w sklepie? Jeżeli masz na to czas, to można je ręcznie zoptymalizować w ten sam sposób (przy okazji dodając im alt-tagi i porządne nazwy). Jednak jeżeli chcesz zaoszczędzić trochę czasu, to poproś programistów o integrację z systemem typu tinypng.com. On automatycznie pobierze, skompresuje i wstawi poprawione zdjęcia.

 

Mniejsze obrazki i Sprite

To jednak nie koniec zabawy z obrazkami. Do tej pory mówiliśmy o zdjęciach produktowych i bannerach. Na Twoim sklepie jest jednak jeszcze spora liczba ikon np. koszyka, mojego konta, flaga języka, a także stałe elementy takie jak logo czy metody płatności.

Tak jak wspomnieliśmy powyżej – przeglądarka może pobierać jednocześnie tylko kilka plików. Żebyśmy nie musieli czekać w kolejce na pobranie wszystkich, można stworzyć jeden wspólny plik (tzw. Sprite), w którym znajdą się wszystkie ikony / drobne grafiki strony. Dzięki temu przeglądarka pobiera tylko jeden plik, a my jej wskazujemy, w którym miejscu jest dane zdjęcie – np. pobierz zdjęcie z obszaru w prawym górnym rogu. Tym samym strona ładuje się odrobinę szybciej.

Serwer

Tutaj musisz się zdać na wiedzę swojej agencji internetowej, ew. zatrudnić eksperta do pomocy – każdy sklep będzie wymagał innych serwerów. Od małego sklepu, który spokojnie poradzi sobie na pojedynczym serwerze, do sklepów obsługujących duży ruch, gdzie serwerów jest kilka (albo kilkanaście) i podział ról dzielony jest między nimi. Przykładowo, możliwe jest zastosowanie dwóch serwerów odpowiedzialnych za wyświetlanie sklepu użytkownikowi, a tzw. load-balancer będzie ustalał, z którego serwera mają być pobrane dane dla danego użytkownika. Kiedy jeden nie będzie wyrabiał, to system automatycznie rozdzieli ruch na dwa serwery.

Inną ważną kwestią jest lokalizacja serwerów – zasadniczo dobrze, jeżeli jest on jak najbliżej Klientów – jednak jest to dużo bardziej złożone. Pamiętajmy jednak, że ładowanie się sklepu będzie podzielone na kilka faz. Pierwszą z nich jest odpowiedź serwera – chcemy, żeby była możliwie najkrótsza. Zależy to od lokalizacji, ale też od danej serwerowni.

Ostatnią ważną kwestią jest typ dysków, jaki jest używany. Ogólnie dyski typu SSD są znacznie (kilkukrotnie) szybsze od dysków HDD. Jeżeli chcesz więc przyspieszyć działanie swojego sklepu, warto zainwestować w takie dyski (oczywiście w przenośni – robi to serwerownia). Nie oznacza to jednak, że wszędzie potrzebujemy dysków SSD. Przykładowo, jeżeli mamy serwer, na którym trzymamy backup, to nie jest tam zupełnie potrzebne (są one droższe).

Najlepiej zrobisz, jeśli zapytasz swojego programistę / agencję internetową, czy do przyspieszenia Twojego sklepu konieczna jest zmiana architektury IT, czy może wystarczy optymalizacja kodu.

AMP

Accelerated Mobile Pages to nowatorska metoda, pierwotnie stworzona na potrzeby blogów, ale obecnie znajdująca też zastosowanie w e-commerce. Jest to zbiór rozwiązań stworzonych przez Google, które pozwalają stronom mobilnym ładować się wyjątkowo szybko. W największym uproszczeniu jest to zbiór zasad i bibliotek kodu, których zastosowanie pozwala nam stać się zoptymalizowaną witryną. Takie witryny można zgłosić do Google’a, który stosuje swoje własne mechanizmy cache’ujące, które zapewniają bardzo szybkie ładowanie się stron mobilnych.

Dodatkową wartością dostosowania się do wymagań AMP, jest to, że Google bardzo promuje witryny, które wprowadzają te rozwiązania – dzięki temu możemy liczyć na wyższą pozycję w wyszukiwarkach. Niestety wykorzystanie AMP ma też swoje wady – np. zakłóca zbieranie danych w Google Analytics, ale też tracisz pełną kontrolę nad swoim sklepem – jest on cache’owany na serwerach Google. Zapytaj swojej agencji, czy to dobre rozwiązanie dla Ciebie.

Zapytania do bazy danych

To jest już bardzo techniczna kwestia, będzie ona zależała od systemu, na którym pracujesz, ale też od tego, jak dobrych masz programistów. W dużym uproszczeniu, kiedy jakiś system IT odwołuje się do bazy danych, np. po to, żeby zebrać pliki, które są potrzebne do wyświetlenia danej strony, często zbiera więcej informacji, niż potrzebuje w rzeczywistości. Oczywiście oznacza to, że musi zrobić więcej zapytań i że mogą one zajmować więcej czasu.

Wracając do przykładu winiarni z początku artykułu: łatwiej będzie zebrać wszystkie chateauneuf du pape, a potem wybrać z nich rocznik 2015, niż zebrać wszystkie wina z rocznika 2015, żeby z nich wybrać tylko chateauneuf du pape. Mamy nadzieję, że ten przykład dobrze zobrazuje Wam, na czym polega optymalizacja zapytań do bazy danych.

Google Tag Manager

Można by zapytać co ma Google Tag Manager do szybkości ładowania strony? Okazuje się, że jednak dosyć dużo. Znany jest przypadek, gdzie zmiana wynosiła aż 25% czasu ładowania. Dlaczego tak się dzieje?

Znowu wracamy do pobierania kilku plików jednocześnie i ich kolejkowania – taki sposób działania nazywa się w IT synchronicznym. Google Tag Manager działa jednak w asynchroniczny sposób, dzięki czemu może pobierać wiele skryptów w tym samym czasie. Dodatkowo GTM pozwala na dokładne zarządzanie tym, gdzie mają się wyświetlać które skrypty. Przykładowo – być może nie chcemy, żeby chat pokazywał się na stronie kasy, albo żeby na koszyku pokazywał się popup zatrzymujący użytkownika – wszystko to możemy ustawić w systemie Google Tag Manager.

Pamiętajcie też, że Google Tag Manager to tylko jeden skrypt, który musi zostać pobrany. Pobieramy jeden skrypt, a on pod sobą może ukrywać 40 innych. Jeżeli próbowalibyście dodać 40 skryptów na stronie pojedynczo, to oczywiście drastycznie by ona zwolniła.

 

Końcowe uwagi

Mamy nadzieję, że artykuł okazał się ciekawy. Nawet jeżeli większości z rozwiązań nie możecie wprowadzić sami, może posłuży jako przewodnik “o co pytać programistę“, żeby przyspieszyć sklep e-commerce. Należy pamiętać, że jest to jeden z najważniejszych, jeżeli nie najważniejszy element, który możemy poprawić. Nie tylko wpływa na konwersję, ale Google też bardzo mocno patrzy na czas ładowania strony i poprawienie tej kwestii, może wpłynąć na naszą pozycję SEO.

Zostawiamy Was z kilkoma darmowymi narzędziami, które pomogą sprawdzić, co należy zmienić u Was żeby przyspieszyć sklep e-commerce:

  1. Google Pagespeed insights – to oficjalne narzędzie Google. Wartości powyżej 80 są dobre, powyżej 60 wymagają poprawy, poniżej – czeka Was dużo pracy.
  2. https://tools.pingdom.com/ – proste narzędzie, które też zapewni Wam trochę informacji o tym, co można poprawić w witrynie
  3. https://www.webpagetest.org/ – warte uwagi narzędzie, które zrobi za Was 3 testy. Dzięki temu zobaczycie, jak strona zachowuje się przy pierwszym wejściu, ale też po zapisaniu części danych w przeglądarce. Ma to szczególne znaczenie, jeżeli używacie mechanizmów cache’ujących.

Dziękujemy za przeczytanie całego artykułu. Są oczywiście inne elementy, które można wprowadzić – każdy sklep i platforma e-commerce będzie inna, więc inne metody w niej zadziałają. Jedna rzecz, o której warto jeszcze wspomnieć to to, że liczy się odczucie Klienta. Ludzki umysł łatwo można oszukać – np. stosując loadery albo placeholdery. Wtedy użytkownik po sekundzie widzi, że coś się ładuje i zaczyna podświadomie czas liczyć od nowa. To dobry trick, który pozwoli Ci “zachować twarz”, nawet jeżeli Twój sklep ładuje się dłużej, niż być chciał.

Innowacyjne pomysły w e-commerce. 7 ciekawych sklepów online.

Dzisiejszy artykuł będzie trochę inny niż pozostałe. Nie będzie tu długiego zbioru porad ani sugestii dotyczących sklepów internetowych. Zamiast tego, przedstawimy tutaj kilka przykładów rozwiązań, które wykorzystuje Twoja konkurencja, i które pozwoliły im wyjść na prowadzenie. Poznaj innowacyjne pomysły w e-commerce i wprowadź je w swoim biznesie.

Innowacyjne pomysły w e-commerce – Blue Apron

https://www.blueapron.com/

Idąc za Timem Ferrisem, zgadzamy się z teorią, że żeby zbudować coś, co odniesie sukces, trzeba rozwiązać własne potrzeby (“scratch your own itch”). Potrzebą w przypadku właścicieli Blue Apron była konieczność wybierania się po zakupy za każdym razem, kiedy chcieli coś ugotować. Z tego powodu ich sklep oferuje gotowe zestawy produktów, razem z przepisem, na bazie świeżych produktów. Dzięki temu codziennie możemy doświadczyć wspaniałego, wykwintnego dania, nawet jeżeli nie bardzo umiemy gotować.

Głównym walorem ich biznesu jest uproszczenie życia dla swoich Klientów. Nie tylko zestaw przychodzi nam pod same drzwi, ale też porcje są już odpowiednio wydzielone. Poza wydrukowanym przepisem, na swojej stronie zamieszczają też instrukcje, jak przygotować danie krok po kroku, razem ze zdjęciami.

Blue Apron jest też mistrzem dodawania elementów około ich głównego biznesu.

Znajdziesz u nich:

1.     Możliwość zakupu przyborów kuchennych, które są konieczne do przygotowania dań;

2.     Dobór win do dań;

3.     Przepisy wysyłane do listy mailingowej;

4.     Porady domorosłych kucharzy do każdego z przepisów (innowacyjne podejście do komentarzy).

Innowacyjne pomysły w e-commerce – Andie Swim

https://andieswim.com/

Ten sklep z kostiumami kąpielowymi na pierwszy rzut oka wydaje się bardzo zwyczajny. Jest bardzo ładnie zaprojektowany, z delikatnym efektem paralax, ale nie ma tu większych “wodotrysków”. To gdzie sklep jest jednak innowacyjny to 3 elementy:

1.     Program lojalnościowy;

2.     Rekomendacje produktów;

3.     Blog.

Program afiliacyjny – zaproś znajomego

Program afiliacyjny jest wyeksponowany w menu, na tym samym poziomie co główne kategorie. Powód, dla którego warto zwrócić na to uwagę, to po pierwsze bardzo szybki i wygodny sposób na dzielenie się ze znajomymi linkiem. Moduł pozwala to zrobić poprzez e-mail, Facebooka, Twittera, ale też Messengera. Po drugie nie tylko osoba polecająca otrzymuje zniżkę, ale też osoba, która otrzymała link. Po trzecie zwróćcie uwagę na treści, które są wysyłane do znajomych – są niebywale pozytywne.

Warto zwrócić uwagę, że na stronie użyto zewnętrznego modułu do programu afiliacyjnego: https://www.extole.com/. Możesz go zastosować też w Twoim sklepie.

Rekomendacje produktów

Tutaj Andie Swim stworzyło dedykowany konfigurator, który pozwala na dobranie idealnego kostiumu. Nie są jednak jedyną firmą, która tak postępuje. To, co zasługuje jednak na wyróżnienie, to treści, które się w nim znajdują i sfera wizualna konfiguratora. Jest on naprawdę wspaniale zaprojektowany, a zabawne frazy powodują, że aż chce się przejść przez wszystkie kroki.

Blog

Można byłoby zapytać co w blogu może być innowacyjne? A jednak. W przeciwieństwie do miliona innych sklepów, które skupiają się na poradach i inspiracjach, właścicielka Andie Swim postanowiła wykorzystać proces, który i tak już stosowała. Otóż jako młoda właścicielka firmy postanowiła raz na tydzień pisać do siebie e-maila, podsumowującego co się dzieje w rozwoju firmy. Po jakimś czasie zaczęła je publikować. Jej posty zawierają różnego rodzaju przemyślenia co do natury jej biznesu, problemów, z jakimi się spotykała, ale też plany na przyszłość. Wspaniale odsłania rąbek tajemnicy i powoduje głębokie przywiązanie z tą kilkuosobową firmą.

Innowacyjne pomysły w e-commerce – Brayola

https://global.brayola.com/

To sklep, ale też coś znacznie więcej. Wykorzystuje on to, co jest największą siłą internetu – opinie.

Silnikiem sklepu jest fakt, że poza zakupem produktu, zbierane są dane na temat ulubionych produktów. Dzięki temu system jest w stanie zaproponować Ci jako użytkownikowi dodatkowe biustonosze, które polecają inne osoby o podobnym profilu do Ciebie. Dzięki temu powstał konfigurator, który zwraca bardzo spersonalizowane wyniki.

Drugim elementem, na który warto zwrócić uwagę, jest sekcja Fit or Not, która opiera się na zdjęciach użytkowników oraz społecznej oceny, czy dany biustonosz pasuje, czy nie. Po dodaniu swojego zdjęcia, wyświetla się ono losowo użytkownikom i dzięki temu szybko otrzymujemy informację, czy jest dobrze dopasowany, czy nie.

Trzecim elementem, który przykuwa uwagę, jest sekcja “from him to her”. Jest to wyjątkowo innowacyjne podejście do produktu, który często mężczyznom jest ciężko kupić. Należy zrobić dwie rzeczy: po pierwsze dodać swoje konto Facebook, żeby Brayola miała dostęp do naszej drugiej połówki, po drugie należy sfotografować metkę ulubionego biustonosza naszej dziewczyny / żony. Brayola zajmie się resztą, tj. dobraniem stylu / rozmiaru i typu. Duże ułatwienie dla męskiej części populacji.

Innowacyjne pomysły w e-commerce – Trunk Club

https://www.trunkclub.com/

Kolejny sklep związany z odzieżą. W ramach sklepu nie kupujemy jednak odzieży tylko usługę. Usługę doradztwa. Płacąc 25 dolarów, otrzymujemy dostęp do specjalnego czatu z naszym “dedykowanym” stylistą, który zada nam odpowiednie pytania, pokaże kilka propozycji, pozna nasz styl, a następnie skomponuje dla nas paczkę z ubraniami. Co ciekawe Trunk Club nie ma stałej kwoty za ubrania – płaci się 25 dolarów, a ze stylistą umawiamy się czy chcemy ubrania zamawiać jednorazowo, czy raz na miesiąc / kwartał, oraz ile chcielibyśmy wydać.

Rzeczą, która zasługuje na wzmiankę, jest sposób doboru ubrań. Po konsultacji produkty zostają dodane do naszej specjalnej listy prezakupowej. Mamy w tym momencie 2 dni na ew. odrzucenie całości / części zamówienia. Stylista oczywiście jest cały czas dla nas dostępny, żeby ew. wymienić dany produkt na inny. Jeżeli jednak przegapiliśmy termin to po przyjściu paczki, dalej mamy 5 dni na odesłanie całości lub części zamówienia. Oznacza to tyle, że możemy oddać to, co nam się nie podoba, ale też możemy wymienić rozmiar, jeżeli nie pasuje.

Innowacyjne pomysły w e-commerce – Frank Body

https://www.frankbody.com/

Ten sklep, poza oryginalnym designem, zasługuje na nagrodę za najfajniejszy copywriting w e-commerce. Kilka wspaniałych przykładów, jak można podejść do tematu oryginalnie:

1.     “Scroll if you are sexy…”
2.     “#letsbefrank, it’s my middle name”
3.     “Getting dirty has never felt so good”
4.     “You know who’s a babe? Read the first word”
5.     “Guess what? You’ll be naked in a minute”

Teksty z pomysłem są wszędzie – zarówno na bannerach i na stronach, ale też na samych opakowaniach produktów. Humorystyczne akcenty pojawiają się też w innych miejscach, zwróć uwagę na ikony w sekcji poniżej:

To co jednak wymaga osobnego akapitu oraz powód, dla którego uznaliśmy, że sklep ten powinien znaleźć się w tym zestawieniu, to program lojalnościowy. Znajdziecie go pod mało informacyjną nazwą “Hotel Pink”. Zamiast zwykłego zbierania punktów, przenosicie się w magiczny świat, gdzie możecie dostać się do wirtualnego hotelu i w zależności od waszego zaangażowania trafiacie do lobby, do sekcji z basenem, do pokoju, albo do penthouse’u. W każdym z nich jako Klient VIP otrzymujecie inne bonusy: od zniżek, poprzez dostęp do produktów przed wszystkimi innymi.

Innowacyjne pomysły w e-commerce – Field Notes

https://fieldnotesbrand.com/

Ten typ produktu jest wyjątkowo popularny w internecie. Dzienniki, notatniki i artykuły papiernicze można znaleźć w co drugim sklepie online. To, co jednak odróżnia tę firmę od innych to to, co zrobili ze swoim produktem. To nie jest już notatnik. To nie jest już papier. To artykuł kolekcjonerski.

Firma produkuje małe notesiki, w różnych formatach i raz na kwartał wydaje nową wersję. Różnią się one formatem, papierem, tuszem, grafiką, układem, jednym słowem wszystkim, czym może różnić się notes. Każdy jest jednak projektowany przez designera i powoli produkty te stają się obiektami kultu. Klienci tej firmy żałują, jeżeli nie udało im się kupić danej serii, zanim się wyprzedała.

Każdy z notatników jest obarczony historią, często video, a także bardzo szczegółowym opisem każdego z elementów, który jest jego częścią. Nie tylko wymiar czy materiał, ale też nazwa drukarni, jaki font został użyty, a nawet to, jaka jest nazwa tuszu, który był użyty do wydrukowania logo.

Biorąc pod uwagę fanatyczne wręcz zaangażowanie Klientów tej firmy, zaproponowała ona inne podejście do zakupów swoich produktów. Poza standardowym trybem zakupowym, można też zakupić roczną subskrypcję, gdzie otrzymujemy obecny design notatnika, oraz 3 kolejne (raz na kwartał). W cenie pakietu otrzymujemy też specjalne gadżety związane z designem danego notatnika. Warto przejść przez stronę, żeby zrozumieć ten innowacyjny model biznesowy.

Warto zwrócić też uwagę, na ciekawy zabieg UX sklepu na stronie produktowej – pływający box zakupu. Polecamy też zescrollować na sam dół strony – ostylowanie stopki jest wyjątkowe i wspaniale spójne ze sprzedawanymi produktami.

Innowacyjne pomysły w e-commerce – TrackSmith

https://www.tracksmith.com/

To jest najbardziej standardowy sklep na dzisiejszej liście. Nie znajdziecie tutaj innowacyjnych modułów albo funkcji, ale na uwagę zasługuje szata graficzna sklepu. Jest ona w pewien sposób vintage’owa. Sklep zawiera dużo zdjęć świetnej jakości w koncepcji pół-historycznych ujęć. Koncepcja przypomina zabieg wykorzystany w teledysku Robbiego Williamsa “Supreme“. Sklep sprawia wrażenie, jakby miał bardzo długą historię, co zresztą jest bardzo spójne z ich produktami, które nawiązują w dużej mierze do ubioru sprzed lat. Jest to ciekawy przykład, jak ważny jest design dla całości odbioru sklepu.

Z ciekawych elementów warto wymienić trzy:

1.     Zamiast 14 dni na zwrot, sklep ten bawi się koncepcją nawiązującą do sprzedawanych produktów: można je oddać do 30 dni lub zanim przebiegniemy w nich 100 mil. W rzeczywistości jest to oczywiście zwykłe przedłużenie rękojmi, ale nawiązuje do świata biegaczy.

2.     Sekcja “Run with us”. Jest to pewnego rodzaju rozwiązanie omnichannelowe, łączące online ze światem offline. Kilka razy w tygodniu sklep organizuje biegi spod ich siedziby. Jest to wspaniały sposób nie tylko na przywiązanie Klienta do marki, na upsell produktów, ale też na potwierdzenie tożsamości sklepu, jako coś więcej niż biznes – jako styl życia.

3.     Ostatnim elementem jest lookbook, który ma dosyć ciekawą koncepcję – jest to książka opisująca historię pewnej podróży związanej z bieganiem. Znajdziemy tam nie tylko produkty, ale też dużo opisów przygody, jaką przeżyli jej protagoniści. Co więcej, dosyć nietypowym rozwiązaniem, jest uzupełnienie lookbooka we fragmenty audio, gdzie biegacze opisują swoje doświadczenia we własnej osobie, własnym głosem. Ponownie – pozwala to zbudować obraz marki jako coś więcej niż sklep. Można w tym wypadku markę zobaczyć raczej jako ambasadora pewnego stylu życia.

Mamy nadzieję, że przykłady, które tutaj Wam przedstawiliśmy były dla Was ciekawe i że zaimplementujecie część tych rozwiązań w swoich sklepach online.

 

9 najważniejszych faktów o Headless eCommerce

Coraz więcej firm stosuje tę technologię u swoich Klientów. Co za tym idzie – istnieje coraz większa szansa, że przy tworzeniu nowego sklepu, albo aktualizacji obecnego, Twoja agencja internetowa wypowie magiczne hasło “headless eCommerce“. Warto, żebyś wiedział, o co chodzi. Dzięki temu będziesz w stanie podjąć świadomą decyzję.

Trendy headless ecommerce

Headless jest hasłem, które zaczęło się pojawiać kilka lat temu (ok. 2015 roku), a od 2016 roku stale zyskuje na popularności. Dla przeciętnego Klienta to tylko technologia. Warto pamiętać jednak, że nieświadome wybranie technologii może mieć potem znaczące konsekwencje. Będzie to wpływać m.in. na:

Czym jest headless eCommerce?

Żeby odpowiedzieć na to pytanie, trzeba zrozumieć, jak są skonstruowane sklepy internetowe. Standardowo składają się z 3 elementów:

1.     Bazy danych (miejsca, gdzie przetrzymywane są wszystkie informacje, takie jak ceny, nazwy, opisy, zdjęcia, etc.);

2.     Warstwy backendowej (czyli części, które pobiera i przetwarza dane z bazy danych). Ta warstwa zawiera też zazwyczaj część CMS-ową, czyli panel administracyjny, który nam pozwala zarządzać sklepem;

3.     Warstwy frontendowej (czyli sekcji, w której wyświetlane są wszystkie informacje dla Klienta końcowego).

W tradycyjnym modelu te wszystkie 3 warstwy działają razem. W podejściu headless eCommerce trzecia warstwa (frontendowa) jest “odcięta” (system jest pozbawiony tzw. “głowy”) i przytwierdzona za pomocą API (czyli dwukierunkowego interfejsu komunikacji między “głową” a “ciałem”).

Jeżeli chodzi o samą część frontendową, to najczęściej stosuje się jedną z 3 technologii: vue.js, react.js lub angularJS. Ponownie – sama technologia nie ma dla nas największego znaczenia. Dużo ważniejsze będzie to, co możemy dzięki niej osiągnąć. Największym i najważniejszym przykładem będzie serwis Alibaba. Dodatkowo pod tym linkiem prezentujemy jeszcze kilka innych przykładów.

Pytanie jakie się teraz pojawia, jest następujące: Po co się to podejście stosuje, co może nam to dać i kiedy nie warto go stosować?

Zalety Headless eCommerce

Co więc powoduje, że warto zastosować podejście headless?

Możliwość dostosowania wyglądu do różnych urządzeń

Biorąc pod uwagę, że nasz CMS (system backendowy) jedynie przekazuje informacje do “głowy”, to mamy pełną dowolność, jakie informacje chcemy otrzymać, kiedy, a także co mamy z nimi zrobić. Posiadając jeden system backendowy oraz API łączące go z frontem, możemy “zasilić” nieskończoną liczbę urządzeń i ekranów. Przykładowo możemy stworzyć zupełnie odrębny wygląd sklepu, systemu POS, aplikacji mobilnej, a nawet wersji na smartwatcha. Wszystko za pomocą tych samych narzędzi.

Oczywiście zaprojektowanie i wdrożenie tych frontów to kilkukrotnie więcej pracy, niż tylko przygotowanie wersji “tradycyjnej” sklepu, ale dalej powstaje tylko tzw. “głowa”, a cała obsługa, informacje o produktach, procesowanie zamówień, zostaje po stronie jednego systemu backendowego. Oznacza to również, że będziemy zarządzali wszystkimi urządzeniami z jednego miejsca. Może mieć to gigantyczne znaczenie przy procesowaniu zamówień.

Dowolność w tym, co chcemy pokazać

Biorąc pod uwagę, że technologia frontendowa jest całkowicie odcięta od backendu, pozwala to developerom na wykorzystanie dowolnego języka i frameworku, w zależności od potrzeb. Ma to duże znaczenie, w szczególności mając na uwadze, że części nowoczesnych rozwiązań UX nie da się (albo jest to bardzo złożone) uzyskać bez wykorzystania pewnych technologii. W zależności od miejsca, gdzie chcemy też zaprezentować aplikację, możemy też wykorzystać inną technologię. W pewnym sensie ta zaleta poniekąd jest również wadą (o tym za chwilę).

Obniżenie liczby zapytań do bazy danych

Podejście headless oznacza jednocześnie znacznie częstsze wykorzystanie przeglądarki do wykonywania skyptów i przeliczeń. Innymi słowy, może ona być wykorzystywana do obsługi tzw. logiki frontu. Obecnie przeglądarki spokojnie sobie radzą z dosyć złożonymi kalkulacjami, potrafią też przechować sporo danych, które można wykorzystać podczas nawigacji między stronami. Dzięki temu część zapytań jest już obsługiwana w sekcji tzw. “głowy” witryny, zamiast trafiać do części backendowej lub do bazy danych. Oznacza to mniejsze obciążenie serwera bazodanowego.

Przyspieszenie działania serwisu

Ostatnią, lecz bardzo istotną zaletą systemów headless jest możliwość stworzenia szybszego sklepu. Jest to powiązane z wykorzystaniem przeglądarki (o czym już wspominaliśmy w poprzednim punkcie). Podsumowując – możemy przechować więcej informacji, wykonać mniej zapytań do bazy, a także co ważniejsze – wykorzystać pewne mechanizmy doładowujące treść, dopiero kiedy jest potrzebna. Wejdźmy ponownie na serwis Alibaba (tylko zróbmy to z trybu incognito). Pozwólmy się stronie załadować, a następnie przescrollujmy w dół. Zauważymy doładowujące się zdjęcia. To właśnie mechanizm, o którym piszemy.

Bezpieczeństwo serwisu

Bezpieczeństwo serwisu
Warto zaznaczyć, że dzięki rozdzieleniu frontu i backendu, uzyskujemy dodatkową barierę chroniącą dane użytkowników. Są one przechowywane na innym serwerze, (zazwyczaj) o innym adresie niż domena strony. Dodatkowo ograniczenie pewnych funkcji, o których piszemy poniżej, może dodatkowo pozbawić system “bramek”, przez które można było się do niego dostać.

Wady Headless eCommerce

Wady Headless eCommerce

Jak to bywa ze wszystkim, oprócz zalet są również i pewne wady headless eCommerce. Żeby podjąć decyzję musimy mieć też świadomość, jakie są negatywy wykorzystania tej technologii.

Inne umiejętności w zespole / droższe umiejętności

Podział na programistów backendowych / frontendowych istniał zawsze. Jednak przy tym podejściu będziemy potrzebowali ludzi wyspecjalizowanych w technologii, która jest stosunkowo nowa. Są to też ludzie, którzy nie tylko będą w stanie ładnie “opakować” sklep, ale też stworzyć do niego całą logikę. Dodatkowo możemy potrzebować kogoś, kto stworzy API łączące się między tym co widać, a tym, co zarządza sklepem. Siłą rzeczy – taki zespół prawdopodobnie będzie droższy.

Mniej możliwości zespołu marketingowego

Wykorzystanie podejścia headlessowego oznacza też ograniczenie możliwości CMS sklepu. Jest oczywiście możliwość odtworzenia praktycznie wszystkich funkcji, będzie to jednak bardzo czasochłonne. Dla przykładu: jeżeli oczekujemy, że dodawane zdjęcia, opisy i nazwa produktu zawsze będą się pojawiały w określonych miejscach i nasz zespół marketingowy nie ma w planach tworzenia dedykowanych one-page’rów dla każdego z produktów – to headless może być dobrym podejściem.

Możliwy znacznie wyższy koszt

Celowo piszemy, że możliwy, ponieważ bardzo dużo zależy tutaj od sytuacji, w której aktualnie jesteśmy. Na koszt projektu headlessowego będą wpływały m.in. następujące kwestie:

1.     Czy potrzebujemy wielu gotowych modułów, które będziemy instalowali w sklepie?

2.     Czy większość frontów systemu będzie stała, czy chcemy mieć możliwość zarządzania nimi?

3.     W jakiej technologii będzie realizowany projekt?

Większość modułów, które zakupimy do CMSa, będzie częściowo bezużyteczna, ponieważ trzeba będzie nadpisać ich część frontendową. Dotyczy to też modułów płatności czy dostawy. Każda chęć wykorzystania mechanizmów CMS-owo / marketingowych też będzie musiała być odtworzona. Przykładowo – jeżeli obecny system pozwala nam na dodanie na poszczególnych stronach w dowolnym miejscu bloku statycznego z polecanymi produktami – obsługa tej funkcji może wymagać prac deweloperskich, pomimo tego, że jest już wbudowana w nasz system CMS.

Kiedy warto inwestować w Headless eCommerce?

Headless eCommerce ma swoje wady i zalety. Jest to na pewno technologia przyszłości. Niektóre platformy (np. Magento 2) już same promują to podejście i co więcej, planują przygotowanie własnych szablonów headlessowych w niedalekiej przyszłości. Programiści niechętnie pracują już w projektach, które nie są headlessowe. Trzeba jednak mierzyć siły na zamiary i zbadać koszt.

Najlepiej jest poprosić swoją agencję internetową o przygotowanie dwóch wycen – jednej opartej na headlessie, a drugiej w “tradycyjnym” modelu. Model headlessowy sprawdzi się głównie w przypadku kiedy myślimy o sklepie na wiele lat, który ma obsługiwać duży ruch, zawierać raczej statyczny front (celujemy w doprecyzowany wygląd o idealnej konwersji, a nie w kreatywność działu marketingowego) i nie planujemy wykorzystania dziesiątek gotowych modułów. Zazwyczaj jednak nie będziemy w stanie określić, czy nasz sklep spełnia to w 100%. Część z tych elementów będzie dla nas bardziej ważna, a część mniej. Jak mawiał Ryszard Ochódzki “Rozchodzi się jednak o to, żeby te plusy nie przesłoniły wam minusów!”.

Warto zaznaczyć, że podejście headlessowe wcale nie musi być droższe w implementacji, niż “tradycyjne”. Wszystko zależy od doświadczenia agencji, wykorzystania już raz stworzonych elementów oraz dostępności półproduktów / bibliotek / rozwiązań, które można wykorzystać bez pisania od zera. Dużo zależy też od CMSa, którego wybierzemy.

Jak możemy zauważyć – nie sposób łatwo określić czy to rozwiązanie jest dla nas, czy też nie. Twoja agencja powinna być w stanie podać twarde argumenty, dlaczego, i czy headless jest w Twoim przypadku wskazany. Warto też porównać koszt obydwu tych opcji, zanim podejmiemy decyzję.

[x]

Ta strona używa cookies

Wyrażam zgodę na przetwarzanie moich danych osobowych zawartych w plikach cookies (zarówno sesyjnych jak i trwałych) przez Orba sp. z o.o. z siedzibą w Warszawie, w celu dostosowania treści strony internetowej do moich preferencji, optymalizacji korzystania ze stron internetowych, tworzenia anonimowych statystyk, które umożliwiają zrozumienie sposobu korzystania użytkownika ze stron internetowych.

Akceptuję