Dodatkowo pokażemy Ci, jakie kroki podjąć i jakie optymalizacje zastosować, aby wyniki w Google Page Speed były wyższe niż obecnie.
Jak przyspieszyć działanie Magento?
Co oznaczają wyniki na Google PageSpeed?
Sposoby na przyspieszenie Magento
Które rozwiązanie wybrać?
Czy warto rozważyć PWA?
Jak przyspieszyć Magento? – podsumowanie
Jak przyspieszyć działanie Magento?
Są do wyboru dwa rozwiązania.
Pierwsze rozwiązanie to wdrożenie nowego frontendu, który będzie oparty na Hyvie. Drugie rozwiązanie to poprawa frontendu Magento bazującego na Lumie.
Hyva to inwestycja, która wymaga od 780 do około 1070 godzin pracy, co jest dosyć dużym zaangażowaniem. Jednak dzięki temu możemy liczyć na wyniki na poziomie 80 na wersji mobile i 90 na wersji desktopowej.
Drugie rozwiązanie jest mniej czasochłonne. Jeżeli obecnie korzystasz z frontendu na Magento, który bazuje na Lumie, możesz podjąć cztery działania, które łącznie będą kosztować około 60-100 godzin pracy programisty. Dzięki temu powinieneś osiągnąć wyniki na poziomie 85 na wersji desktop i około 45 na wersji mobile.
Co oznaczają wyniki na Google PageSpeed?
Przede wszystkim, wyniki na Google PageSpeed Insights nie są bezpośrednim wyznacznikiem szybkości działania witryny dla użytkowników.
Podstawowe wskaźniki internetowe są danymi zbieranymi od prawdziwych użytkowników natomiast dane pod nagłówkiem “Rozpoznawaj problemy z wydajnością” są danymi laboratoryjnymi.
W praktyce jednak dążymy do jak najwyższych wyników podstawowych wskaźników internetowych, ponieważ ułatwia to pozycjonowanie witryny, przyciąga większy ruch organiczny, obniża koszty pozyskania użytkowników i zwiększa rentowność biznesu.
Dane pod ngłówkiem “Rozpoznawaj problemy z wydajnością” powinniśmy traktować jako wsazówkę odnośnie zmian, które powinniśmy wdrożyć, żeby po pierwsze osiągać wyższye podstawowe wskaźniki internetowe oraz po drugie, żeby strona była odczuwalnie wyższa dla użytkowników.
Upraszczam więc rzeczywistość, w dalszej części posta piszę, że poprawa tych liczb pod nagłówkiem “Rozpoznawaj problemy z wydajnością” to zwiększanie szybkości witryny.
Sposoby na przyspieszenie Magento
Jak wspomniałem na początku, mamy do wyboru dwa rozwiązania.
Sposób #1
Pierwszy, polega na wymianie front-endu Magento. Jak wspomniałem w jednym z poprzednich artykułów, Hyva to rodzaj front-endu Magento, który nie jest odchudzoną wersją Luma (czyli standardowym front-endem Magento), ale jest napisanym od podstaw, zupełnie nowym typem front-endu Magento.
Hyva pojawiła się na rynku kilka lat temu jako świeże rozwiązanie. Wykorzystuje Tailwind CSS oraz Alpine.js, a kod jest znacząco odchudzony. Dzięki małemu skomplikowaniu i redukcji liczby zależności, witryna działa szybciej.
Twórcy Hyvy stworzyli to rozwiązanie z myślą o osiągnięciu jak najwyższych wyników w Google PageSpeed Insights. Jeśli zależy Ci na tych wynikach, Hyva jest świetnym rozwiązaniem. Wersje demonstracyjne notują wyniki bliskie 100 – około 99 na wersji mobilnej i 100 na wersji desktopowej.
Oczywiście, jeśli dostosujemy rozwiązanie, dodamy moduły i zmienimy wygląd front-endu, wyniki ulegną pogorszeniu. Niemniej jednak, Hyva nadal daje możliwość osiągnięcia wyników na poziomie 90 na wersji desktopowej i powyżej 85 na wersji mobilnej.
Minusy tego rozwiązania to przede wszystkim inwestycja. Zmiana całego front-endu, wraz z zarządzaniem projektem, wykonywaniem testów i przygotowaniem nowych projektów graficznych, będzie wymagała inwestycji rzędu 780 do 1070 godzin. Trudno będzie zrealizować to w mniejszym budżecie. Oczywiście mówimy tutaj o indywidualnym projekcie graficznym. Jeżeli planujesz wykorzystanie standardowego szablonu Hyvy to koszty te będą o wiele mniejsze.
Dodatkowo, za samą licencję Hyva trzeba zapłacić 1000 euro, co również wpływa na budżet.
Przy wdrażaniu nowego front-endu mamy możliwość poprawy współczynnika konwersji ecommerce. Jeżeli zastanawiasz się nad redesignem, a nie replatformingiem, pozostając przy Magento, możesz zwiększyć współczynnik konwersji nawet o 30% lub 40%. Przy większej skali biznesu taka inwestycja zwróci się bardzo szybko.
Sposób #2
Drugim rozwiązaniem jest optymalizacja samej Lumy. Nie jest to jednak idealne rozwiązanie. Luma od strony technologicznej była już dość stara, kiedy pojawiła się na rynku. Co możemy zrobić? Możemy podjąć zestaw działań, które sprowadzają się do czterech punktów.
- Pierwszy z nich to odchudzenie Magento z niepotrzebnych paczek PHP, które obciążają całe Magento.
- Drugim punktem jest wdrożenie modułu do bundlingu i optymalizacji JS’ów.
- Trzecim krokiem jest wdrożenie modułów do obsługi obrazków w formacie WebP.
- Ostatni punkt to konfiguracja i usprawnienie lazy load’a, przeniesienie JS’ów, aby nie blokować Heada. Dodatkowo, warto zrealizować minifikację HTML, JS i CSS.
Jeżeli wykonasz te kroki, możesz liczyć na wyniki rzędu 85 w wersji desktopowej i około 45 wersji mobilnej na produkcyjnie działającym serwisie z Luma.
A jeśli chcesz wykorzystać Hyvę do swojego Magento 2 – pogadajmy!
Które rozwiązanie wybrać?
Osiągnięcie lepszych wyników z Lumą będzie wyzwaniem. Luma jest z natury skomplikowana i korzysta z dość starych technologii. W rezultacie, trudno będzie poprawić wynik w Google PageSpeed ponad wartości, które opisałem. Mamy tutaj do wyboru dwa rozwiązania.
Optymalizacja Lumy to tymczasowe rozwiązanie, które szybko poprawi nasze wyniki. Jeśli obecnie mamy na przykład 10 punktów na wersji mobilnej i 50 na wersji desktopowej, to takie działania będą na pewno korzystne.
Inwestycja w granicach 60-80 godzin pracy programisty nie jest dużym wydatkiem, a przyniesie znaczną poprawę. Jeśli jednak poszukujemy trwałego rozwiązania, które całkowicie odmieni wyniki w Google PageSpeed Insights, to Hyva wydaje się być najlepszym wyborem. Jest to świetny wybór zarówno dla sklepu B2C oraz platformy B2B.
Czy warto rozważyć PWA?
Na koniec chciałbym wspomnieć o rozwiązaniach zgodnych z PWA, takich jak wdrożenie PWA Studio albo coś, co bazuje na Vue Storefront.
Te rozwiązania teoretycznie powinny być szybkie, ale w trakcie mojej pracy z Magento widziałem wiele wdrożeń na tych dwóch technologiach, które osiągały wyniki gorsze w Google PageSpeed Insights niż Luma.
Wdrożenie tych technologii nie daje nam gwarancji szybkości, a w tych technologiach łatwo jest wdrożyć sklep, który będzie po prostu wolny. Budżet na to zdecydowanie przekroczy koszt wdrożenia Hyva (pewnie kilkukrotnie) i zajmie więcej niż 60 czy 80 godzin, które trzeba przeznaczyć na optymalizację Lumy.
Jak przyspieszyć Magento? – podsumowanie
Jeśli chcemy poprawić wyniki na Google PageSpeed Insights sklepu na Magento, mamy kilka opcji do rozważenia.
Przykładowo mamy obecnie taki problem, że w ocenie Google PageSpeed Insights na mobile mamy około 10 punktów, a na desktopie około 50 punktów. Bazujemy na starej Lumie i nasz frontend jest zbudowany w tej technologii. Co z tym zrobić? Mamy dwa sprawdzone rozwiązania.
Pierwsze to wdrożenie nowego frontendu opartego na Hyvie. Wiąże się to z inwestycją wynoszącą od kilkuset do około tysiąca godzin, które są niezbędne do zaprojektowania i wdrożenia nowego frontendu oraz zarządzania całym tym procesem i projektem (z założeniem stworzenia indywidualnego projektu graficznego)
Drugim rozwiązaniem jest optymalizacja Lumy. Zgodnie z czterema krokami, które opisałem, będzie to zdecydowanie mniejsza inwestycja, ponieważ będzie wiązała się z wydatkiem rzędu 60 do 80 godzin pracy programisty.
Mamy nadzieję, że udało mi się przekonać Cię do przetestowania tych rozwiązań! Jeśli wiedzę zawartą w tym artykule uważasz za wartościową to koniecznie sprawdź wpis na naszym blogu mówiący o tym jak często aktualizować Magento oraz ile taka operacja kosztuje!
Jeżeli zależy Ci na kolejnych porcjach wartościowej wiedzy – już teraz zapraszam Cię do śledzenia mojego profilu LinkedIn, na którym regularnie publikuje informacje ze świata Magento i ecommerce developmentu!
