Jak poprawić wydajność i przyspieszyć sklep Magento?
Żyjemy w czasach dynamicznego rozwoju technologicznego – internet oferuje coraz większą prędkość, a urządzenia, z których korzystamy, są coraz wydajniejsze. Jednak nie zawsze przekłada się to na komfort korzystania z sieci. Według Blogging Lift ok. 80% użytkowników uważa, że wolno ładujące się strony internetowe są bardziej frustrujące niż te, które są tymczasowo wyłączone. W tym artykule zajmiemy się kwestią wydajności sklepów internetowych, a konkretniej działających na popularnej platformie Magento 2. Dowiesz się, dlaczego ważna jest prędkość ładowania serwisu, jak możesz ją zmierzyć, a także poznasz ciekawe rozwiązania optymalizacyjne.
Dlaczego szybkość Magento ma znaczenie?
Dlaczego szybkość Magento ma znaczenie?
Jest kilka istotnych powodów, które warto znać i mieć na uwadze w kontekście e-commerce:
SEO
Pozycja Twojego sklepu w wynikach wyszukiwania ma szczególne znaczenie. Dobra widoczność oznacza większy ruch, który automatycznie przełoży się na lepsze zyski. Warto wiedzieć, że Google i jego algorytmy indeksowania traktują szybkość ładowania strony jako jeden z najważniejszych czynników przy ustalaniu pozycji.
UX
Doświadczenie użytkownika, jakie towarzyszy mu w podczas korzystania z Twojego sklepu, powinno być dla Ciebie jednym z priorytetów. Internauci są z reguły niecierpliwi. Jak możemy przeczytać na branżowym blogu WebFX, około 40% użytkowników porzuca stronę, której ładowanie trwa dłużej niż 3 sekundy. Podkreśla to krytyczny próg dla zatrzymania potencjalnych klientów.
Konwersje
Konwersja to interakcja użytkownika z Twoją stroną internetową. Może nią być każde działanie, na którym Ci zależy, np. dokonanie zakupu, zapisanie się na listę mailingową lub kontakt. Według wyliczeń Queue It, w przypadku sklepu internetowego z 50 000 odwiedzających dziennie, skrócenie czasu ładowania z 6 do rekomendowanych 3 sekund może przełożyć się na dodatkowe 5,5 miliona dolarów rocznego przychodu – wyłącznie dzięki wzrostowi liczby konwersji.
Skalowalność
Skalowalność to innymi słowy zdolność systemu do utrzymania wysokiej wydajności przy zwiększonym obciążeniu. Optymalizacja szybkości pozwala obsługiwać większy ruch, co jest kluczowe w sezonach wyprzedaży czy kampaniach marketingowych. Blogging Lift podaje, że poprawa czasu ładowania strony mobilnej o zaledwie 0,1 sekundy może prowadzić do wzrostu liczby kupujących dodających produkty do koszyka o 9,1%, co podkreśla znaczenie szybkości w handlu mobilnym.
Przewaga konkurencyjna
Jest to bardzo często niedoceniany przez sprzedawców aspekt strategii. Aby wyróżnić się na rynku, powinieneś być w oczach klienta najlepszy. Czy we wszystkim? Oczywiście nie. Warto na początek zacząć od szybkości działania sklepu. Ciekawa statystyka, którą przytacza Blogging Lift: opóźnienie czasu ładowania strony o zaledwie 1 sekundę może prowadzić do 7% spadku sprzedaży. I odwrotnie, poprawa szybkości witryny o zaledwie 0,1 sekundy może zwiększyć współczynnik konwersji o około 8,4%.
Jak sprawdzić szybkość swojego sklepu?
Jak sprawdzić szybkość swojego sklepu?
Przed przystąpieniem do optymalizacji, warto poznać, jakie elementy sklepu wymagają poprawy. Z pomocą przychodzą dostępne narzędzia. Oto dwa najpopularniejsze z nich i jednocześnie darmowe:
Google PageSpeed Insights
To narzędzie od Google, które pozwala sprawdzić czas ładowania dowolnej witryny. Osobno ocenia szybkość na urządzeniach desktopowych oraz mobilnych. Rezultat przedstawia wyniki w skali od 1 do 100, gdzie: 0-49 punktów (oznaczone kolorem czerwonym) określa jako słabe, 50-89 (pomarańczowe) – wymagające poprawy, 90-100 (zielone) – dobre.
Podstawowe metryki (tzw. Core Web Vitals) opracowane przez Google, których celem jest wizualizacja jakości strony internetowej, to:
- LCP (Largest Contentful Paint) – największe wyrenderowanie treści (dotyczy tylko pierwszego widocznego ekranu po wejściu na stronę);
- INP (Interaction to Next Paint) – interakcja do następnego wyrenderowania;
- CLS (Cumulative Layout Shift) – stabilność wizualna układu strony.
GTMetrix
To alternatywne narzędzie pozwalające przetestować wydajność strony. Zwrócone zalecenia mogą sugerować konieczność optymalizacji obrazów, minifikację plików CSS i JavaScript, zmniejszenie liczby żądań i wiele innych.
5 podstawowych kroków optymalizujących Magento 2
5 podstawowych kroków optymalizujących Magento 2
Zanim przejdziemy do bardziej zaawansowanych i mniej popularnych technik optymalizacji, zweryfikujmy podstawowe aspekty, do których należą:
- jakościowy hosting i konfiguracja serwera;
- aktualizacja systemu do najnowszej wersji Magento 2;
- uruchomienie trybu produkcyjnego;
- minifikacja i mergowanie CSS oraz JavaScript;
- usprawnienie buforowania (caching).
Hosting i konfiguracja serwera
Magento zużywa dużo zasobów. Upewnij się, że Twój hosting spełnia minimalne wymagania systemowe Magento. Możesz się z nimi zapoznać tutaj.
Kolejny krok, który warto wykonać to konfiguracja kompresji zasobów. Obecnie do tego celu służą najczęściej rozwiązania typu GZIP lub Brotli. Ten drugi standard kompresji jest o ok. 20% skuteczniejszy od GZIP.
Następnie zweryfikuj, czy korzystasz z protokołu HTTP/2 lub HTTP/3, aby przyspieszyć ładowanie zasobów. Możesz skorzystać z testera online.
Zwróć również uwagę na aktualność PHP. Korzystanie z najnowszej wersji ma znaczący wpływ na szybkość i wydajność sklepu. Może również przyczynić się do poprawy wydajności, bezpieczeństwa oraz ogólnej funkcjonalności serwisu. Musisz mieć jednak na uwadze, że starsze wersje Magento (i zainstalowane moduły) mogą nie być ze sobą kompatybilne.
Aktualizacja wersji Magento 2
Nowe wersje Magento wprowadzają dodatkowe funkcje, ulepszenia oraz poprawki błędów, które wspierają optymalizację doświadczeń użytkownika. Starsze wersje nie są już oficjalnie wspierane, dlatego warto zadbać o to, by korzystać wyłącznie z aktualnych wersji systemu.
Tryb produkcyjny Magento 2
Magento 2 oferuje trzy tryby działania (developerski, domyślny oraz produkcyjny). Mają one różne zastosowania i różnią się wydajnością. W przypadku sklepu, na którym odbywa się sprzedaż, zawsze należy używać tego ostatniego. Do weryfikacji i ustawienia tej konfiguracji należy skorzystaj z poleceń konsoli:
php bin/magento deploy:mode:show
php bin/magento deploy:mode:set productionMinifikacja i mergowanie CSS/JS
Minifikacja plików CSS, JavaScript i HTML polega na usunięciu zbędnych znaków, takich jak spacje, komentarze i nowe linie, co zmniejsza ich rozmiar oraz przyspiesza ładowanie strony.
Mergowanie to z kolei łączenie kilku plików w jeden. Dzięki temu zmniejsza się liczba wysyłanych żądań przez przeglądarkę. Zoptymalizowany kod oznacza szybsze działanie sklepu oraz mniejsze zużycie zasobów serwera. Jeśli system działa już w trybie produkcyjnym, te ustawienia możesz również zweryfikować i ustawić z poziomu konsoli:
php bin/magento config:set dev/js/merge_files 1
php bin/magento config:set dev/js/minify_files 1
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/css/minify_files 1
php bin/magento config:set dev/template/minify_html 1
Cache
Istnieją dwa główne typy pamięci podręcznych. Wbudowany FPC (Full Page Cache), który zapisuje wygenerowane strony w pamięci podręcznej, aby przyspieszyć ich ponowne ładowanie. Varnish natomiast to zewnętrzny, wydajniejszy system cache'owania HTTP, który działa przed Magento, obsługując strony bez angażowania PHP i bazy danych, co znacząco redukuje czas odpowiedzi serwera. Upewnij się, że Twój sklep korzysta z tych rozwiązań, ponieważ przyspieszają one pobieranie często żądanych danych przez użytkowników.
Podstawowe sposoby optymalizacji sklepu na Magento 2
6 zaawansowanych technik poprawy wydajności Magento
6 zaawansowanych technik poprawy wydajności Magento
Jeśli powyższe sposoby zawiodły i Twój sklep nadal nie zachwyca wydajnością, konieczne mogą się okazać dalsze optymalizacje, obejmujące zmiany w używanym szablonie oraz zainstalowanych modułach zewnętrznych. Zapoznaj się z poniższymi wskazówkami.
Optymalizacja nagłówka <head>
Kolejność, w jakiej są zdefinione elementy w tagu <head> jest bardzo istotna. Niektóre są ważniejsze i powinny być przed innymi, aby uniknąć np. blokowania renderowania strony. Możesz sporo zyskać, porządkując je we właściwej kolejności.
Do wykonania tego zadania polecamy rozszerzenie przeglądarkowe Capo.js, które za pomocą kolorów wizualizuje zalecaną kolejność elementów na stronie – od najważniejszych (czerwony) po mniej istotne (jaśniejsze odcienie). Wtyczka pokazuje także aktualny porządek na Twojej witrynie, dzięki czemu łatwo zidentyfikujesz, jakie zmiany należy wprowadzić.
Optymalizacja fontów
Fonty to zasoby krytyczne, dlatego kluczowe jest ich jak najszybsze załadowanie przy jednoczesnym minimalizowaniu wpływu na krytyczną ścieżkę renderowania. Wydajność fontów zależy od sposobu ich dostarczenia:
- fonty systemowe – najwydajniejsze, ale jednocześnie mało charakterystyczne. Mogą nie być wystarczające z punktu widzenia wizualnego tworzonej marki. Stosowane również jako fallback, do niestandardowych fontów;
- fonty zewnętrzne samodzielnie hostowane (self-hosted) – rozwiązanie optymalne, jeśli umieszczasz 1, maksymalnie dwa rodzaje fontów. Przy większej liczbie wydajność znacząco spada;
- fonty zewnętrzne hostowane (3rd-party hosted, np. Google Fonts lub Adobe Fonts) – rozwiązanie niezalecane! Blokują parsowanie, renderowanie strony oraz generują dodatkowe żądania HTTP. Należy pobrać fonty (najlepiej w formacie .woff2) i ładować bezpośrednio z serwera Twojej strony.
Dodatkowe wskazówki wydajnościowe dla fontów:
- zdefiniuj @font-face w tagu <style> w sekcji <head> HTML’a zamiast w zewnętrznym arkuszu styli CSS. Jest to szybsze rozwiązanie, a fonty są zasobem krytycznym, dlatego należy je wyświetlić jak najszybciej;
- w @font-face używaj font-display: swap;
- instruuj przeglądarkę o potrzebie pobrania pliku fontu jak najszybciej korzystając z tagu preload.
Przykład zoptymalizowanej sekcji w zakresie ładowania fontów
Lazy loading multimediów
Lazy loading to technika opóźniania ładowania niekrytycznych zasobów na stronie, które znajdują się w przestrzeni Below the Fold. Dotyczy to np. obrazków, tła (background-image), video czy iframe.
Aby wdrożyć lazy loading, możesz skorzystać z natywnego rozwiązania, dodając do <img> lub <iframe> atrybut loading=”lazy”. Działa to różnie w zależności od przeglądarki, a efekty nie zawsze są satysfakcjonujące. Innym rozwiązaniem jest wdrożenie zewnętrznej biblioteki, która to obsługuje, np. Lazysizes.
Optymalizacja CSS
Strona zacznie się renderować tak szybko, jak najwolniejszy/najpóźniej ładowany arkusz CSS. Ładowanie CSS wpływa na inne elementy strony (ważna jest kolejność pomiędzy JS a CSS), bo jest to zasób blokujący renderowanie strony.
Staraj się tworzyć unikalne style, używane tylko na konkretnych stronach. Oprócz głównego pliku zawierającego ogólne stylowanie elementów dla każdej strony (nagłówek, stopka, typografia, itd.), warto mieć osobny plik (w tagu <head>) tylko dla elementów strony głównej, bloga itd.
Nie przeciążaj głównego wątku przeglądarki ciężkimi oraz długimi selektorami. Niektóre properties CSS są „kosztowniejsze” od pozostałych i bardziej obciążają przeglądarkę i fazę layout, np. border-radius, box-shadow, filter, :nth-child.. Unikaj również korzystania z selektora “gwiazdki”:
#main * { color: red; }Opóźnianie skryptów JS
Skuteczną techniką optymalizacji, która przynosi świetne rezultaty, jest opóźnianie wykonywania skryptów JS. Polega to na zastąpieniu domyślnych i rozpoznawanych przez przeglądarkę tagów <script> niestandardowym tagiem, który zostaje pominięty, ale tylko do czasu pierwszej interakcji użytkownika. Mowa tu np. o pierwszym poruszeniu myszką, pierwszym kliknięciu w klawiaturę, pierwszym „tapnięciu” na ekranie lub przewinięciu strony w dół. Dopiero wtedy nowy tag podmienia się na ten standardowy i następuje jego wykonanie. Takie rozwiązanie można zastosować do elementów które nie są potrzebne od razu, czyli tych znajdujących się poniżej widocznej części ekranu.
Dzięki takiemu rozwiązaniu przeglądarka nie musi wykonywać wszystkich zadań jednocześnie podczas ładowania strony – opóźnione skrypty trafiają do kolejki, co odciąża główny wątek i pozwala na sprawniejsze renderowanie treści.
Skrypty zewnętrzne
Wszystkie zewnętrzne skrypty (z innych domen niż adres Twojego sklepu) mają bardzo duży wpływ na czas ładowania strony. Najlepiej maksymalnie ograniczyć ich liczbę. Mamy tu na myśli wszelkie chaty, widgety z opiniami czy też nagrywanie sesji użytkowników itd.
Istnieją jednak skrypty, z których trudno zrezygnować, np. Google Analytics, Google Tag Manager. Wtedy jedynym wyjściem jest pójście na kompromis.
W przypadku skryptów takim kompromisem może być odpowiednie użycie atrybutów async lub defer. Informują one przeglądarkę, jak pobrać i wykonać dany skrypt. Subtelna różnica, ale ma znaczenie w przypadku optymalizacji.
Użycie atrybutów async i defer
Podsumowanie
Podsumowanie
Skuteczne przyspieszenie Magento 2 jest jak najbardziej możliwe, choć to proces wymagający czasu, zaawansowanej wiedzy technicznej i doświadczenia. Mimo to warto – szybszy sklep to nie tylko lepsze doświadczenia użytkownika, ale także wyższe pozycje w Google i realny wzrost konwersji, a co za tym idzie – większe zyski.
Sebastian Zawadzki 
Piotr Kujawa 