Objaśniamy najnowsze techniki oraz podejścia w projektowniu sklepów internetowych.
Okres pandemii bezapelacyjnie wpłynął na wzrost zainteresowania zakupami internetowymi. Większość dobrze rokujących i rozwijających się e-sklepów zanotowała kilkukrotnie zwiększony ruch oraz znaczny wzrost sprzedaży. To jednak tylko jedna strona medalu, bo większa ilość użytkowników, to nie tylko możliwość zwiększenia przychodów - często wiąże się to także ze wzrostem kosztów utrzymania infrastruktury, niestabilnością systemu lub jego niedostępnością.
W jaki sposób można zoptymalizować koszty utrzymania sklepu internetowego, zwiększyć wydajność swojego e-sklepu oraz poprawić jego użyteczność? Tutaj z pomocą przychodzą nam najnowsze techniki w projektowaniu serwisów internetowych.
Aplikacja monolityczna / serwis monolityczny - to co wszyscy już znamy
Standardowy sklep internetowy, większy portal internetowy czy rozbudowana strona firmowa w uproszczeniu składa się z 2 części - widoku od strony użytkownika (ang. “frontend”) oraz panelu administratora (ang. “backend”). Zarówno frontend, jak i backend korzystają z tej samej bazy danych, uruchomione są na tym samym serwerze i korzystają z tych samych zasobów serwera. Jeśli na którymś widoku pojawi się problem np. obciążenie (wywołane np. masową aktualizacją kilku tysięcy produktów lub znacznym wzrostem ilości odwiedzin) automatycznie będzie to skutkować spowolnieniem działania drugiego widoku. Przykładem takiej aplikacji może być strona na CMS Wordpress czy sklep internetowy na WooCommerce.
Headless - razem, a jednak osobno
Pojęciem “Headless” definiujemy rozwiązanie, w którym frontend oraz backend (z bazą danych) stanowią osobne mini aplikacje, które nie są na stałe ze sobą połączone, lecz komunikują się ze sobą jeśli zachodzi taka potrzeba (wykorzystując tzw. API). Każda część może (ale nie musi) działać na osobnym serwerze oraz korzystać z odrębnych zasobów. Szczególnie w przypadku serwisów wielojęzycznych stosuje się również rozwiązanie CDN - pozwala to na umieszczenie plików css, javascript, obrazków, plików do pobrania oraz innych elementów statycznych na jeszcze innym osobnym serwerze. Trzeba tutaj jednak zaznaczyć, że zastosowanie CDN jest również możliwe w aplikacji monolitycznej.
Co daje nam takie rozwiązanie?
- szybsze i stabilniejsze działanie całego systemu - problem w jednej części systemu nie wpływa na jego drugą część, - ograniczenie zapytań do bazy danych,
- możemy niezależnie manewrować ustawieniami i zasobami serwera,
- szybsze i bezpieczniejsze wprowadzanie zmian w poszczególnych elementach aplikacji (nie musimy dawać programiście dostępu do bazy danych i całego systemu jeśli ma tylko zmienić kolor na widoku użytkownika).
Nieważne czy posiadamy aplikację monolityczną czy rozwiązanie Headless, możemy skupić się na tuningu frontend-u, czyli warstwy od strony użytkownika. Tutaj przychodzą nam na pomoc pojęcia PWA (ang. “Progressive Web App”) oraz TWA (ang “Trusted Web Activities”) . Rozwiązania te szczególnie polecane są sklepom internetowym nastawionym na powracających klientów.
Aplikacja PWA - większe możliwości twojego e-sklepu
Skrótem PWA nazywamy zbiór ustandaryzowanych zasad oraz dostępnych rozwiązań, które pozwalają nam rozszerzyć frontend w naszym sklepie internetowym o dodatkowe funkcje. W zależności od konfiguracji oraz wdrożonej logiki możemy otrzymać m.in.:
- możliwość częściowego lub całkowitego działania sklepu w trybie offline,
- możliwość cache-owania niektórych zasobów (np. zapisywanie w przeglądarce raz pobranego i wyświetlonego obrazka) przez co ograniczamy zużycie zasobów serwera,
- możliwość dodania skrótu na telefonie lub na komputerze z systemem Windows z możliwością ustawienia dowolnej ikony oraz nazwy skrótu,
- możliwość korzystania z powiadomień PUSH.
TIP: Jeśli podczas pierwszego wejścia dostaniemy komunikat “Czy dodać stronę XYZ do ekranu głównego?” oznacza to, że dany serwis internetowy ma wdrożone rozwiązanie PWA, a przynajmniej w najprostszej wersji.
TIP2: Prawie każdą stronę internetową można rozszerzyć o funkcje PWA. Aby dokonać takiej czynności strona musi generować dobry wynik w testach Google PageSpeed - musi działać płynnie i być w pełni responsywna. Konieczne jest również użycie SSL-a (strona i wszystkie podstrony muszą być widoczne jako zabezpieczone).
Aplikacja TWA - czy to już prawilna aplikacja?
Jeśli mamy już na stronie wdrożone rozwiązania PWA możemy pójść o krok dalej i wdrożyć rozwiązanie TWA. TWA to nic innego zbiór odpowiednich rozwiązań oraz czynności, których następstwem będzie “konwersja” naszej strony do postaci aplikacji mobilnej oraz aplikacji na Windows-a. Finalnie możliwe jest także umieszczenie jej w Google Play czy Microsoft Store. Bardzo dobrym przykładem wdrożenia takiego rozwiązania jest sklep internetowy morele.net, gdzie wersja mobilna sklepu internetowego jest identyczna.
Zalety zastosowania TWA:
- nie musimy tworzyć osobnej aplikacji mobilnej (możemy zastosować TWA i przerobić stronę internetową do postaci niezależnej aplikacji),
- optymalizujemy koszty utrzymania strony internetowej i aplikacji mobilnej (np. zmieniając kolor na stronie internetowej automatycznie zmieni się on w aplikacji),
- zwiększamy wygodę klientów i użytkowników (szczególnie ważne jeśli mamy powracających klientów),
- możemy reklamować swój sklep internetowy w Google Play i innych aplikacjach na Androida.