Czyli co warto zrobić, by przyspieszyć swój sklep internetowy oparty o Magento 2, ale i każdą inną popularną technologię czy silnik e-commerce. Przedstawiamy 6 uniwersalnych porad, które nie wymagają żadnego lub minimalnego zaangażowania programistów.

Wstęp

Od czasu wdrożenia algorytmu Web Vitals jako czynnika pozycjonującego, a także wzrostu znaczenia ruchu mobile, właściciele sklepów internetowych przywiązują coraz większą uwagę do optymalizacji swoich witryn pod kątem wydajności i prędkości ładowania. Dobra oferta oraz UX nic nie dadzą, kiedy zniecierpliwiony klient wyjdzie z naszej strony zanim ta załaduje mu podstawowe widoki.

Niestety optymalizacja danej technologii pod kątem wydajności to często długie godziny pracy, które mogą przynieść mizerny skutek. Czasem jest to spowodowane poziomem skomplikowania systemu, czasem niejednoznaczną interpretacją wyników audytów wydajnościowych (jak np. popularny Lighthouse). Istnieją jednak pewne działania i standardy, które pozwolą Ci w miarę racjonalnym kosztem poprawić wyniki - o nich dowiesz się z poniższego artykułu.

1. Przyjrzyj się implementacji skryptów śledzących oraz kontenerowi GTM

Google Tag Manager (GTM) - fantastyczne narzędzie, które pozwala na bardzo efektywną implementację różnego rodzaju skryptów na strony i sklepy internetowe. Najczęściej są to skrypty śledzące użytkownika i mierzące konwersje pod narzędzia reklamowe jak Google Ads czy Facebook/Meta Ads czy skrypty związane z narzędziami marketing automation.

Niestety w równym stopniu w jakim marketer zyskuje narzędzie do samodzielnego działania w obrębie witryny produkcyjnej, zespół developerski traci kontrolę nad elementami strony. Często osoby posługujące się GTM nie mają wystarczającej wiedzy technicznej, przez co na naszym serwisie mogą wylądować nieefektywnie zaimplementowane skrypty. Jak to sprawdzić?

Wykonaj audyt przy pomocy narzędzia Lighthouse i sprawdź, czy “unused JavaScript” nie jest jednym z istotniejszych czynników opóźniających Twoją stronę. Przejrzyj skrypty i domeny których problem dotyczy, a następnie zweryfikuj, ile z nich pochodzi z GTMa i czy nie możesz części z nich po prostu się pozbyć. Co najczęściej okazuje się zbędne?

• stare narzędzia analityczne, których nikt już nie używa,

• narzędzia typu HotJar, które mogą być implementowane tylko na pewien okres, w którym chcemy zebrać dane dotyczące zachowań użytkowników,

• zdarzenia/cele analityczne, których i tak nikt nie analizuje.

Wiadomo jednak, że nie wszystkiego da się pozbyć, a sklepu bez analityki nie da się łatwo zoptymalizować. Te skrypty które pochodzą z zewnętrznych domen, a są niezbędne, możesz przyspieszyć, używając prostego zabiegu “preconnect” na poziomie kodu. Wystarczy, że osoby rozwijające Twój serwis wskażą na poziomie kodu domeny, do których ma nastąpić tzw. “preconnect”, by zmniejszyć czas oczekiwania na pełne doładowanie właściwego skryptu np.:

<link rel="preconnect" href="https://www.googletagmanager.com">

2. Sprawdź serwery, na których hostujesz swój sklep

Nie sam kod decyduje o tym, jak szybko ładuje się dany serwis, a również sprzęt na którym ten kod się wykonuje. Szczególnie Magento 2 należy do typu oprogramowania, które ma większe niż mniejsze wymagania dotyczące mocy serwerowej. Nawet najlepiej zoptymalizowany kod Magento nie osiągnie satysfakcjonujących rezultatów jeśli serwerowi brakuje mocy. Często dołożenie trochę zasobów sprzętowych okazuje się najtańszą metodą optymalizacji - pytanie jak zweryfikować, czy zadziała to w Twoim przypadku?

Sprawdź kiedy został zakupiony serwer, na którym działa Twój sklep. Technologia idzie do przodu w zastraszającym tempie, pomyśl więc, co więcej może zaoferować serwer oparty o współczesne podzespoły versus taki, który został zakupiony parę lat temu? Chyba najważniejszą kwestią w tym wypadku będą szybkie dyski. Upewnij się, że korzystasz z dobrodziejstw dysków SSD NVMe, a jeśli okaże się, że Twój serwis stoi jeszcze na serwerze używającym dysków HDD, nie zwlekaj ze zmianą.

Poproś również o analizę serwera, najlepiej wskazując na analizowany okres moment większej promocji czy po prostu wzmożonego ruchu na sklepie. Upewnij się z administratorem swojego sklepu, że w tym czasie nie brakło mocy CPU czy RAM. RAM można łatwo dołożyć do serwera, mniej chętnie wspomóc go dokładając pamięci SWAP. Są to zabiegi dzięki którym zyskasz więcej mocy, często bez potrzeby nawet reinstalacji aplikacji.

Ostatni element do lokalizacja Twojego data center. Jeśli prowadzisz sklep na terytorium jednego kraju najlepiej, by właśnie tam znajdowała się serwerownia. Temat oczywiście komplikuje się przy sklepach międzynarodowych. Czas odpowiedzi serwera może różnić się znacznie, jeśli data center z Twoim serwerem znajduje się daleko od miejsca skąd do Twojego sklepu łączą się klienci.

3. Zweryfikuj jakiego systemu cache używa Twoje Magento 2

Cache to mechanizm przechowywania często używanych danych w pamięci w taki sposób, by maksymalizować czas dostępu do nich. W e-commerce cache jest istotny, ponieważ pozwala na znaczne przyspieszenie działania sklepu internetowego i redukcję obciążenia serwera, co wpływa na lepszą jakość obsługi klientów oraz poprawę konwersji. Ponadto, korzystanie z cache pozwala na zmniejszenie kosztów związanych z hostingiem, a także minimalizuje ryzyko awarii spowodowanych nadmiernym obciążeniem serwera.

Nic dziwnego, że Magento 2 jak i inne systemy mają wbudowane systemy cache’ujące. W przypadku Magento możemy natywnie skorzystać z dwóch jego wersji - tej domyślnej, wbudowanej w mechanizm Magento oraz Varnisha. Jeśli jeszcze nie korzystasz z Varnisha to prawdopodobnie wystarczy zainstalować go w standardowy sposób na serwerze i skonfigurować.

Należy w tym wypadku zachować szczególną ostrożność, zdarza się, że niektóre - szczególnie customowe - elementy Twojego kodu mogą być niekompatybilne i powodować problemy, a nawet spowodować niedostępność całego serwisu. Więc choć teoretycznie wdrożenie Varnisha powinno być łatwe, testów nigdy za wiele.

4. Skorzystaj z dobrodziejstw Cloudflare

W przypadku cache’a nie trzeba ograniczać się tylko do jednego systemu. Można skorzystać z dodatkowych “warstw”.  Jednym z najbardziej efektywnych rozwiązań w tym zakresie jest Cloudflare. Jedną z podstawowych usług oferowanych przez Cloudflare jest z kolei CDN, czyli Content Delivery Network - system rozproszonej sieci serwerów, które służą do przechowywania i serwowania treści w sposób jak najbardziej efektywny.

W ramach planu Pro (za około 20 dolarów miesięcznie) mamy dostęp do światowej sieci serwerów Cloudflare’a, dzięki czemu m. in.:

• Odciążysz swój serwer - dobrze skonfigurowany cache na poziomie Cloudflare spowoduje że duża część contentu zostanie podana właśnie stamtąd, a nie obciąży w pełni Twojego serwera,

• Przyspieszysz ładowanie strony dla klientów zagranicznych - CDN poda content z serwera, który jest najbliższej lokalizacji użytkownika,

• Zoptymalizujesz zdjęcia - dzięki usłudze “Polish” wszystkie zdjęcia, które trafią do cache Cloudflare zostaną przekonwertowane na nowoczesne formaty, zmniejszając objętość strony.

To tylko kilka z dobrodziejstw, które - moim zdaniem - można mieć w bardzo niskiej cenie jak za korzyści, które dostajemy w zamian. Cloudflare ułatwia migrację na jego usługi oferując automatyczne mapowanie DNS przy przenoszeniu tam domeny - pamiętaj jednak, że lepiej by wykonywał to ktoś doświadczony - szczególnie jeśli działamy z istniejącym serwisem. 

5. Wdróż lazyload contentu i zdjęcia w formacie webp

Magento 2 niestety do dziś natywnie nie oferuje wsparcia formatu webp oraz wbudowanych metod do lazyloadowania contentu, a właśnie te elementy są najczęściej punktowane w audytach Google i to na dodatek jako pozycje, które najmocniej wpływają na czas ładowania Twojego serwisu.

Najprościej rzecz ujmując lazyload to serwowanie contentu klientowi dopiero wtedy, kiedy faktycznie ma szansę go zobaczyć - czyli gdy akurat przegląda dany element w przeglądarce. W ten sposób ilość danych którą trzeba załadować by wyświetlić stronę jest w pierwszym momencie dużo mniejsza. W Magento łatwo można uzupełnić brak lazyloadu darmową wtyczką od kolegów z Magefan którą znajdziesz pod tym linkiem. Dzięki niej Twój zespół powinien móc efektywnie wdrożyć dodatkowe klasy w kluczowych elementach serwisu.

WebP to format pliku graficznego opracowany przez Google, który umożliwia kompresję obrazów bez utraty jakości przy mniejszym rozmiarze pliku niż tradycyjne formaty jak JPG czy PNG. Nic dziwnego więc, że jest popularyzowany jako preferowany format przy serwowaniu zdjęć. Format webp można wdrożyć w dużej mierze dzięki opisanemu wyżej Cloudflare’owi. Istnieją też gotowe pluginy, które albo pozwolą uploadować Ci oryginalne zdjęcia w webp, albo przekonwertują zdjęcia za Ciebie.

6. Zainwestuj w New Relic

Wymienione powyżej kroki powinny pomóc Twojemu serwisowi na poziomie szeroko rozumianego hostingu i utrzymania. Ostatnie co powinieneś zrobić to zaopatrzyć się w narzędzie, które pozwoli Ci przejść do działań na poziomie kodu. Oczywiście można przedsięwziąć pewne działania optymalizacyjne stosując się do ogólnych zasad i dobrych praktyk - pisałem o tym między innymi w tym artykule - lecz głębsza optymalizacja wymaga danych, by móc działać precyzyjnie bez ponoszenia zbędnych kosztów na “ręczne” szukanie obszarów do optymalizacji.

New Relic to narzędzie monitorujące i analityczne, służące do analizowania wydajności aplikacji webowych i mobilnych. Pozwala na śledzenie procesów, wykrywanie błędów i problemów z wydajnością, a także przeprowadzanie profilowania i analizy kodu. Są oczywiście alternatywy dla New Relic, ale akurat to narzędzie posiada podstawowe wsparcie w ramach Magento 2, także w open-source’owej wersji. Dzięki obserwacji swojego sklepu produkcyjnego za pomocą New Relic możesz namierzyć konkretne procesy, które powodują problemy i “piki” związane ze zużyciem zasobów na serwerze. Właśnie od tych fragmentów kodu należy zacząć optymalizację. 

Podsumowanie

Jeśli uda Ci się zastosować powyższe kroki, to Twój sklep ma szansę notować przyzwoite wyniki wydajnościowe, nadal jednak będzie to zapewne nie więcej niż 50-60 punktów wg audytu Lighthouse na mobile. W dzisiejszych czasach, może okazać się to za mało. Sama architektura Magento 2 utrudnia wyśrubowanie wyników bez ogromnych nakładów - dlatego dla zainteresowanych topowymi wynikami powstały rozwiązania typu PWA. Jeśli chcesz dowiedzieć się więcej, skontaktuj się z nami i umów na bezpłatną, 60-minutową konsultację.