Optymalizacja PageSpeed Magento, czyli skuteczne przyspieszanie sklepu

Optymalizacja sklepu w Magento 2 z pomocą obliczeń Google Page Speed służy do skrócenia czasu ładowania witryny. Poprawa wydajności korzystnie wpłynie nie tylko na pozycjonowanie treści, ale i na lepsze wrażenia użytkowników (zniecierpliwieni klienci poszukają szybszej strony!). Jak zdobyć więcej punktów Google Page Speed? Czy optymalizacja Magento wymaga programisty? E-sklep w CMS Magento może być darmowy. Jego przyspieszenie również. Wystarczy zainstalować odpowiednie rozszerzenia, zwrócić uwagę na wielkość obrazów i plików oraz na kod strony. Punktacja Google Page Speed pozwoli na oszacowanie, ile pracy potrzeba, aby poprawić wydajność strony internetowej.

| Magento 2 CMS: potężny system zarządzania sklepem

Magento 2 jest systemem zarządzania treścią (CMS), który umożliwia założenie sklepu internetowego bez znajomości języków programowania. Powstał w 2008 roku. Jest darmowy, choć ma również wersję płatną. Od 2020 roku, po kilku zmianach, właścicielem systemu jest firma Adobe. Pod koniec roku 2020 w tym systemie działało 10% e-sklepów, a wśród nich są wielcy gracze, m.in.:

• Ford,
• Coca-Cola,
• Nike,
• eObuwie,
• Castorama,
• Smyk.

Aby dopasować witrynę do swoich potrzeb, można wykorzystać szablony wizualne oraz moduły, działające podobnie jak wtyczki (pluginy) w WordPressie. Nie wymagają umiejętności kodowania. Magento 2 daje właścicielom sklepów wygodniejsze narzędzia zarządzania treścią, bardziej przejrzysty panel i lepiej zoptymalizowany kod (np. łączy i minifikuje CSS i JavaScript, wprowadza HTML5 i mikrodane). Warto jak najszybciej rozważyć migrację do nowej wersji, bo to też wpłynie na szybkość i punkty Google Page Speed. A do tego wersja pierwsza nie jest już supportowana przez Adobe. Wersja płatna (obecnie nazywa się Adobe Commerce) posiada więcej bardziej rozbudowanych modułów. Możesz zamienić swój sklep w e-commerce’owe imperium, pozwalając innym sprzedawcom rejestrować się na twojej witrynie, oferować klientom kupony zniżkowe czy listy życzeń.

| Co mierzy Google PageSpeed Insights?

W uproszczeniu Google Insights mierzy page speed, czyli prędkość strony. Wyniku nie podaje jednak w sekundach, a w skali od 1 do 100. Aby poznać wynik twojej witryny, wpisz jej adres na stronie https://developers.google.com/speed/pagespeed/insights. Po kliknięciu “Analizuj”, otrzymasz:

• czerwony wynik: 0-49 (niezbędna jest optymalizacja),
• pomarańczowy wynik: 50-89 (warto wprowadzić kilka poprawek),
• lub zielony wynik: 90-100 (jest świetnie).

Nawet twórcy przyznają, że tak naprawdę mimo nazwy Google page speed, w tym narzędziu chodzi o wskazówki pozwalające na zwiększenie wydajności. Wprowadzenie ich w życie powinno przyspieszyć stronę i poprawić tzw. user experience (czyli to, jak klient postrzega korzystanie ze strony) Dobry wynik Google Page Speed przekłada się na pozycję w wyszukiwarce. A im wyższa lokata, tym więcej potencjalnych klientów. Krótszy czas ładowania witryny na pewno poskutkuje mniejszą liczbą odrzuceń i większym zaangażowaniem klientów – a więc potencjalnie także większą liczbą konwersji.

| Ile punktów Google Page Speed trzeba zdobyć?

Mówi się, że dobrym wynikiem Google Page Speed jest 85/100. Sam Google ma obecnie 84/100, więc naprawdę nie ma sensu dążyć do wyższej lokaty. Nie trzeba skupiać się na liczbach. Warto natomiast regularnie sprawdzać sugestie działań dla twojej strony.

| Optymalizacja Google Page Speed w systemie Magento 2

Przyspieszenie strony w Magento niekoniecznie musi wymagać pomocy profesjonalnej agencji interaktywnej. Ten system w założeniu pozwala na samodzielne prowadzenie sklepu i jego optymalizację dzięki odpowiednio dobranym modułom. Użytkownicy niekiedy narzekają na słabą wydajność ich e-sklepów, a to ze względu na duże obciążenie serwera tym systemem. Można więc skracać ładowanie za pomocą optymalizacji, ale nie na wszystko mamy wpływ. W takim przypadku korzystne może być wybranie dobrego hostingu.

| Pamięć podręczna. Bez niej nie przyspieszysz strony!

Zapisywanie plików w pamięci podręcznej (cache) znacząco zmniejsza czas ładowania strony. Optymalizacja strony za pomocą cache’u polega na:

• zapisywaniu kodu HTML całej strony na serwerze (page cache),
• zapisywaniu go w pamięci przeglądarki (browser cache),
• zapisywaniu zapytań do bazy danych (object cache).

Da się dodatkowo przyspieszyć cache’owanie za pomocą web akceleratora Varnish. To rodzaj wirtualnego serwera proxy, który przyspiesza czas przesyłania informacji.

| Kiedy lenistwo jest potrzebne w sklepie Magento 2?

Odpowiednio zoptymalizowane obrazy nie muszą być ładowane od razu po wejściu na witrynę. Aby skrócić czas wczytywania stron internetowych wymyślono tzw. lazy loading, czyli “leniwe ładowanie”. Oznacza ono, że pliki (zdjęcia lub wideo) ściągają się z serwera dopiero wtedy, kiedy powinny być widoczne na ekranie. Lazy loading ma największy sens (i daje największe przyspieszenie ładowania) w przypadku stron internetowych zawierających np.:

• infinite scroll (użytkownik może przesuwać stronę w dół i ładować kolejne obrazki niemal w nieskończoność),
• dłuższą listę produktów z obrazami,
• wyniki wyszukiwania z miniaturami zdjęć.

Do takiej optymalizacji Magento służą rozszerzenia Lazy Load czy Lazy Load Products & Images.

| Pliki i obrazy a ładowanie sklepu

Według sugestii Google “page speed” strony można podnieść za pomocą optymalizacji obrazów. Rozmiar plików w formacie JPG czy PNG można dostosować ręcznie w programie graficznym, zmniejszając ich wielkość oraz rozdzielczość. Ważne! Pliki BMP w ogóle nie są zalecane do używania na witrynie internetowej. Jeśli użyjesz odpowiedniego modułu (np. Minifier, Way2enjoy Image Optimizer), to rozmiar obrazu, który załadujesz nie będzie miał znaczenia. Wtyczka automatycznie zoptymalizuje plik i zapisze go w pamięci przeglądarki. Optymalizacji nie wymagają pliki najnowszej generacji w formacie WebP. Istnieją moduły służące do konwersji plików z formatów tradycyjnych na WebP – np. OptiPic images optimization czy Piio Image Optimization. Odpowiednia optymalizacja obrazu może kilkadziesiąt razy zmniejszyć jego “ciężar” i tym samym zwiększyć szybkość wczytywania oraz poprawić punktację Google Page Speed.

| Co jeszcze możesz zrobić, aby zwiększyć szybkość swojej strony internetowej?

Istnieją darmowe rozszerzenia dostępne na platformie, które dodatkowo przyspieszają działanie sklepu. Są to np.:

• Minify HTML CSS JS (minifikuje kod HTML, CSS i JavaScript),
• Cloudimage Content Transformation & Acceleration (optymalizuje obrazy i pozwala na wykorzystanie CDN, czyli Content Delivery Network),
• Cloudflare (zmienia rozmiar zdjęć, wykorzystuje CDN, rozbudowuje możliwości cache’u).

Jeśli witryna nadal działa powoli, problemem może być hosting. Z powolnym serwerem (a ten system potrzebuje raczej porządnego sprzętu) nie wygrasz nawet za pomocą zoptymalizowanego kodu, zdjęć czy treści SEO. Czas zmienić hosting, aby nie marnować czasu użytkowników. Bardzo wolno ładujące się sklepy będą się słabo pozycjonowały w wyszukiwarkach. Niewielkie różnice w punktacji nie są jednak kluczowe. Pozycja w wynikach wyszukiwania zależy także od innych czynników, takich jak dobrej jakości treści i linki zewnętrzne. Z drugiej strony, Google Page Speed na poziomie poniżej 85 niekoniecznie musi oznaczać, że witryna wolno się ładuje. Warto sprawdzić to także za pomocą innych narzędzi mierzących czas oczekiwania na wczytanie się strony (np. Pingdom Website Speed Test czy GTMetrix). Pamiętaj, aby punktacja Google Page Speed nie przysłoniła prawdziwego celu optymalizacji: zwiększenia liczby konwersji.