Skutki z przyspieszenia sklepu internetowego opartego o system PrestaShop będą korzystne zarówno dla ich właścicieli oraz klientów. Nie trzeba też przekonywać, że znaczna poprawa wygody robienia zakupów w szybko działającym sklepie pozytywnie wpłynie na ilość zamówień. Szybkość działania sklepu jest istotna także w kwestiach SEO dlatego artykuł ten można traktować jako dodatek do artykułu o optymalizacji SEO Prestashop.
PrestaShop wolno działa – jakie są tego przyczyny?
System PrestaShop jak każda aplikacja internetowa jest złożona z kilku warstw, dlatego rozsądnym posunięciem będzie podzielenie tego artykułu na kilka poziomów.
- Sprzęt i oprogramowanie serwerowe
- Warstwa Back-Endu i baza danych
- Warstwa Front-Endu
Tylko takie kompleksowe podejście jest w stanie zagwarantować racjonalne rozłożenie kosztów przyspieszenia systemu PrestaShop i identyfikację kluczowych inhibitorów wydajności określane często jako „wąskie gardła”.
Zrozumienie idei wąskiego gardła jest tutaj kluczowe, ponieważ wszelkie działania optymalizacyjne powinny być skupione właśnie na nim. Dopieszczanie i nieustanne optymalizowanie warstwy front-end podczas kiedy mamy do czynienia z poważnym problemem po stronie serwera lub bazy danych przypomina… próbę instalowania spojlera aerodynamicznego w samochodzie z zepsutą skrzynią biegów.
Każda instancja sklepu PrestaShop jest inna a problemy z prędkością mogą być zróżnicowane. Przed wykonywaniem jakichkolwiek działań optymalizacyjnych zaleca się:
- indywidualne testowanie i identyfikację elementów, które ograniczają prędkość sklepu w największym stopniu,
- zaplanowanie działań optymalizacyjnych,
- (opcjonalnie) utworzenie instalacji testowej (deweloperskiej),
- utworzenie kopii zapasowej plików i bazy danych (lub automatyczne utworzenie snapshota).
1. Przyspieszanie hostingu PrestaShop
W pierwszej kolejności należy skupić uwagę na hostingu czyli warstwie sprzętowej i oprogramowaniu serwera. W oficjalnej dokumentacji możemy przeczytać, że PrestaShop jest napisany dla serwera Apache i NGINX. Należy zatem unikać innych serwerów takich jak LiteSpeed czy IdeaWebServer aby mieć pewność że skrypt i hosting są w pełni kompatybilne.
Tajemnicą poliszynela jest fakt, że system PrestaShop obciąża hosting i CPU serwera na tyle, że podczas samej instalacji widać ogrom logiki jaka jest zaszyta w najnowszej instalacji. Ponieważ PrestaShop nie należy do lekkich systemów, powinniśmy zadbać aby hosting posiadał co najmniej 2 GB RAM i dysk SSD. To niezbędne minimum aby podkręcić i przyspieszyć nasz system i maksymalnie wykorzystać techniki optymalizacyjne jakie są dostępne w samej aplikacji PrestaShop.
Porady zawarte w tym podrozdziale stosujemy wtedy kiedy widzimy, że
- szybkość działania sklepu zależy w największym stopniu od pory dnia,
- sklep działa wolniej kiedy korzysta z niego wiele użytkowników jednocześnie,
- szybkość działania nie zależy od szybkości połączenia z Internetem i wydajności komputera klienckiego.
Na problem z hostingiem mogą wskazywać także: stosunkowo wysokie czasy TTFB (ostrzeżenie w Page Speed Insights) lub test na bytecheck pokaże nam czas TTFB. Opóźnienie TTFB możemy też sprawdzić za pomocą przeglądarki Chrome (klawisz F12 >> Network):
Jeżeli chcesz dokładniej zbadać temat zapraszam do szczegółowego artykułu o opóźnieniu serwera i czasach TTFB.
1.1: Aktualizacja interpretera PHP
Choć od publikacji PHP w wersji 7 minęło kilka dobrych miesięcy, nadal najpopularniejszą kompilacja jest PHP w wersji 5. Zmiana wersji interpretera PHP na wyższą jest jednym z najbardziej efektywnych sposobów na przyspieszenie działania aplikacji webowych. Zapytaj usługodawcę hostingu czy jest możliwość migracji na najnowszą wersję PHP.
Czytaj więcej na czym polega przyspieszenia działania PHP w wersji 7 i jak wykonać aktualizację PHP wersji na różnych hostingach.
1.2.1 Wykorzystanie pamięci In-Memory (Cache)
Pamięć podręczna (Cache) to jedna z najbardziej podstawowych metod optymalizacyjnych aplikacji webowych i przyspieszających przetwarzanie danych. Największą efektywność uzyskamy przechowując obiekty w pamięci RAM serwera ponieważ odczyt i zapis jest aż o kilka rzędów szybszy. Choć wielu dostawców usług hostingowych udostępnia moduł klienta memcached, uniemożliwia wykorzystania funkcji serwera (Taka sytuacja jest w większości ofert Hostingu WWW i współdzielonego).
Oczywiście, na serwerach dedykowanych i VPS nie będzie problemu z uruchomieniem serwera memcached dla PrestaShop. Pod tym linkiem znajdziesz mój tutorial jak zainstalować serwer z memcached w PHP.
Jeżeli sklep zainstalowano na zwykłym Hostingu WWW (współdzielonym lub wirtualnym) można dokupić najtańszy serwer VPS, uruchomić na nim serwer memcached (zgodnie z powyższym poradnikiem) i podłączyć go jako zewnętrzny serwer Cache.
W panelu administracyjnym w Konfiguruj >> Zaawansowane >> Wydajność wpiszemy jego adres IP:
Pozostawiamy wtedy port domyślny memcached: 11211 oraz wagę ustawioną na „1” (jeżeli dysponujemy tylko jednym serwerem memcached to ustawienie nie ma żadnego efektu). W przypadku dysponowania kilkoma serwerami możemy ustawić różne wagi w zależności od konfiguracji sprzętowej (wyższa liczba spowoduje bardziej intensywne korzystanie z mocniejszej konfiguracji).
Uwaga: W celu uzyskania najlepszych czasów dostępu należy zainstalować memcached w tym samym centrum danych co pierwotny hosting. Dostawcy nie bez powodu udostępniają możliwość wyboru datacenter. Zmuszanie aplikacji do łączenia się z odległymi węzłami spowoduje spadki prędkości już podczas zwracania odpowiedzi.
Czytaj więcej o hostingu współdzielonym, VPS i serwerach dedykowanych.
1.2.2 Wykorzystanie modułu Page Cache
W markecie PrestaShop są moduły realizujące inteligentny PageCache całej wygenerowanej podstrony. Jeden z nich to Page Cache Ultimate. Jest on kompatybilny zarówno z systemem w wersji 1.6 jak i 1.7. Wykorzystanie go radykalnie skraca czas dostępu do kilku milisekund. Jego instalacja jest troszkę karkołomna, bo należy wykluczyć z cache’owania skrypty odpowiedzialne za wykrywanie zalogowania się i za przechowywanie zawartości koszyka.
Dodatkową funkcją tego modułu dla wersji 1.7 jest możliwość identyfikacji innych modułów, które najbardziej spowalniają pracę całego sklepu. Pliki zapisywane są w Memcache a za pomocą CRONa można dokonać preloadu lub inwalidacji całej pamięci podręcznej.
1.3.1 Partycjonowanie funkcjonalne serwera PrestaShop
Kolejną efektywną techniką, która odciąży i przez to przyspieszy działanie sklepu jest separacja bazy danych, systemu plików i wspomnianego serwera pamięci podręcznej Cache na osobnych serwerach. Jest to tzw. partycjonowanie funkcjonalne serwera WWW.
PrestaShop pozwala na dodanie serwerów multimediów a adres do serwera bazy danych można z łatwością zmienić w pliku konfiguracyjnym, który znajduje się (dla wersji 1.7) w /app/config/parameters.php
O tym jak wygląda rozdzielenie samej logiki na kilka serwerów za pomocą HAProxy można przeczytać w artykule:
https://severalnines.com/blog/how-setup-high-availability-prestashop-multiple-servers-mariadb-galera-cluster
1.3.2 Partycjonowanie z wykorzystaniem Chmury S3 i CDN CloudFront
W tym momencie możemy skorzystać z chmurowej usługi Amazon S3 i Amazon CloudFront. tak się składa, że istnieje gotowy moduł, który powinien ułatwić nam integrację i automatyzację prac:
O tym jak wykonać działania administracyjne w Konsoli AWS napisałem odpowiedni poradniki:
- Integracja Amazon S3 z PHP (jeżeli korzystamy z powyższego modułu to w tym momencie interesuje nas tylko punkt 1.)
- Amazon CloudFront – Własna subdomena + SSL
1.4 Migracja na szybszy hosting (skalowanie w pionie)
Czasem najbardziej racjonalnym sposobem na przyspieszanie działania sklepu jest po prostu wykupienie szybszego serwera lub usługi hostingowej. Partycjonowanie funkcjonalne oraz wdrażanie mechanizmów odciążających o balansujących obciążenie działa do pewnego momentu. Jeżeli baza danych będzie potrzebowała więcej RAMu a skrypt więcej mocy obliczeniowej i wielowątkowości w końcu przesiadka na wydajniejszy serwer będzie koniecznością. Sprawdź jak prostymi sposobami porównać wydajność wybranych usług hostingowych: Testowanie hostingu WWW.
Jeżeli masz wykupiony wydajniejszy hosting i chcesz przenieść PrestaShop sprawdź mój przewodnik dotyczący zmiany domeny i hostingu dla PrestaShop 1.7: Przenoszenie PrestaShop
1.5 Konfiguracja interpretera PHP
O ile to możliwe, należy wdrożyć następujące ustawienia PHP na serwerze, na którym zainstalowany jest skrypt PrestaShop:
[Date]
date.timezone = UTC
[Session]
session.auto_start = Off
[PHP]
short_open_tag = Off
realpath_cache_size = 4096K
realpath_cache_ttl = 600
display_errors = Off
magic_quotes_gpc = off
Przyspieszenie sklepu PrestaShop może być odczuwalne przy zmianie tych ustawień na nieco wyższe. Zalecam stopniową zmianę wartości oraz obserwacje efektów w warunkach laboratoryjnych (lub jeżeli możemy sobie na to pozwolić – produkcyjnych).
memory_limit = 1024M
max_execution_time = 600
max_input_time = 600
upload_max_filesize = 32M
post_max_size = 64M
Im wydajniejszy hosting, tym wartości powinny być wyższe. Jeżeli posiadamy produktów z wieloma kombinacjami należy zwiększyć parametry następujących ustawień PHP:
max_input_vars = 20000
allow_url_fopen = on
[opcache]
opcache.enable_file_override = On
opcache.interned_strings_buffer=64
opcache.fast_shutdown=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
W celu zaoszczędzenia zasobów, można wyłączyć sprawdzanie pieczątek czasu plików PHP – pliki PHP raczej nie powinny się zmieniać – do czasu aktualizacji sklepu:
opcache.validate_timestamps=0
1.6 Tuning ustawień serwera MySQL
O tym jak skonfigurować serwer MySQL może pomóc nam skrypt mysqltuner.pl
Ściągamy skrypt na serwer MySQL, nadajemy mu prawa umożliwiające uruchomienie (executable) i otrzymamy zalecana konfigurację przygotowaną dla środowiska którym aktualnie dysponujemy. Szybkość wykonywania się zapytań MySQL możemy sprawdzić w profilerze lub w phpMyAdmin.
1.7 Obsługa protokołu HTTP/2
Włączenie protokołu HTTP/2 już na poziomie łącza danych przyspiesza i zwiększa efektywność zapytań i odpowiedzi HTTP. Jest to możliwe za pomocą wprowadzonych rozwiązań HTTP/2 Push, prorytetyzacji zasobów, multipleksowaniu i kompresji nagłówków HPACK.
Obsługa nowej wersji protokołu będzie możliwa na większości serwerów VPS i w dobrych hostingach współdzielonych. Czytaj więcej o korzyściach i zaletach HTTP2.
1.8 Moduł PageSpeed
Google stworzyło specjalny moduł o nazwie PageSpeed, który automatyzuje część prac związaną z serwowaniem plików CSS i JS oraz najważniejszymi ustawieniami serwera. Czytaj więcej o zaletach modułu PageSpeed w którym znajdziesz krótki test i instrukcję instalacji.
2. Przyspieszanie back-endu PrestaShop
Porady zawarte w tym podpunkcie stosujemy w podobnych przypadkach z jakimi mieliśmy do czynienia wyżej ale ilość użytkowników nie wpływa znacząco na działanie sklepu – innymi słowy zawsze działa wolno i nie zależy od prędkości połączenia internetowego klienta lub pory dnia.
Sklep w którym mamy do czynienia z niewydajnym back-endem tak jakby „reaguje z opóźnieniem” a kolejne odświeżenia strony w przeglądarce nie powodują, że wczytanie strony jest szybsze.
2.1 Ustawienia dotyczące SMARTY
Tutaj też wchodzimy w Konfiguruj >> Zaawansowane >> Wydajność
Kompilację szablonu w działającym produkcyjnym sklepie należy wyłączyć lub ustawić na opcji która umożliwi kompilację przy zmianach szablonu. To spowoduje, że skompilowany szablon zapisze się na dysku i PrestaShop nie będzie przy każdej wizycie odtwarzać finalnej treści strony. To znaczenie przyspieszy dynamiczne generowanie wszystkich podstron sklepu internetowego.
Tryb cacheowania należy ustawić na „system plików” jeżeli mamy dysk SSD. MySQL można wykorzystać w przypadku jeżeli posiadamy dysk HDD a baza jest na zewnętrznym serwerze z dyskiem SSD lub ma bardzo dużo wolnej pamięci RAM. Zysk wydajnościowy polega na wykorzystaniu przez RDBMS pamięci podręcznej systemu MySQL czyli query_cache (oczywiście kosztem maksymalnej ilości jednocześnie korzystających ze sklepu użytkowników). Powinno to przyspieszyć renderowanie stron i ogólną prędkość działania przede wszystkim małych sklepów. Lub sklepów z wydajną bazą MySQL gdzie dokonano replikacji bazy MySQL. Czytaj więcej o optymalizacji baz danych MySQL.
2.2 Rezygnacja ze zbędnych modułów
Dodatkowe moduły (nawet te z oficjalnego sklepu PrestaShop) mogą znacznie spowolnić działanie sklepu. Należy stosować minimalną ilość modułów a w przypadku chęci dodania funkcjonalności każdorazowo skonsultować z web deweloperem czy nie da się tej funkcjonalności wbudować w istniejący szablon.
Moduły które wyjątkowo spowalniają działanie sklepu nie dając w zamian szczególnej wartości:
- moduły do gamifikacji panelu klienta lub panelu administracyjego (system odznak),
- moduły ze statystykami (np. Data Mining),
- moduły usuwające numer id produktu z adresu url,
- moduły odpowiedzialne za przekierowania adresów URL.
2.3 Wyczyszczenie niepotrzebnych wpisów w bazie danych
PrestaShop przechowuje bardzo dużo niepotrzebnych danych do celów… statystycznych. Dosłownie każda nowa wizyta w naszym sklepie jest rejestrowana w kilku tabelach. W większości przypadków nie jest nam to potrzebne. Opróżnienie tych tabel odciąży całą bazę danych, a całkowite wyłączenie tej funkcji może zaoszczędzić sporo zasobów.
Tabele:
- ps_connections,
- ps_guest,
- ps_connections_source,
A także:
- ps_page_viewed,
- ps_connections_page
Przechowują dane do celów statystycznych, z których i tak mało korzysta. Można opróżnić całkowicie te tabele lub usunąć przykładowo 90% najstarszych rekordów. To spowoduje że zachowamy dane z niedawnego okresu pozbywając się już na pewno mało przydatnych danych.
Usunięcie można zrobić ręcznie lub wywołując następujące polecenia MySQL:
TRUNCATE TABLE ps_connections; TRUNCATE TABLE ps_connections_page; TRUNCATE TABLE ps_connections_source; TRUNCATE TABLE ps_page_viewed; TRUNCATE TABLE ps_guest;
Jeżeli chcemy usunąć dane z pewnego okresu możemy użyć polecenia:
DELETE FORM ps_connections WHERE ID > 10000000
Oczywiście polecam wykonać kopię tabel gdyby się okazało, że dane będą w przyszłości do czegoś potrzebne. Eleganckim rozwiązaniem jest najpierw usunięcie modułu data mining a potem opróżnienie wspomnianych tabel.
Możemy też użyć polecanego modułu: https://mypresta.eu/modules/administration-tools/database-optimization.html
3. Przyspieszanie Front-Endu Prestashop
Porady z tego podrozdziału stosujemy wtedy, jeżeli zauważamy że szybkość i responsywność sklepu zależy od połączenia internetowego i typu urządzenia. Sklep wczytuje się wolniej podczas pierwszej wizyty na konkretnej podstronie a po odświeżeniu ładuje się troszeczkę szybciej.
Problem w warstwie front-end może się objawiać też tym, że krótko przed wizytą interakcja jest zablokowana (stronę widać ale trzeba poczekać kilka sekund aby móc zjechać w dół) a kolejne elementy pojawiają się skokowo.
Skutkiem ubocznym udoskonaleń i przyspieszenia tej warstwy może być odciążenie hostingu (ponieważ minimalizacja i scalanie ładunków sieciowych w pliki zbiorcze jest korzystna zarówna dla serwera jak i klienta) oraz mniejsze zużycie transferu i tym samym oszczędności wynikające z utrzymania sklepu na serwerze.
3.1 Funkcjonalność CCC (Combine, Compress, Cache)
Na początku znowu odwiedzimy Konfiguruj >> Zaawansowane >> Wydajność i po kolei włączamy opcje dostępne w CCC.
Funkcje te powodują automatyczną minimalizację plików CSS/JS oraz scalanie zewnętrznych skryptów w jeden plik.
3.2 Optymalizacja zdjęć i miniatur
Optymalizacja zdjęć jest kluczowa w sklepach internetowych. O tym jak dobierać format i rozmiar oryginalny zdjęcia pisałem w artykule: Optymalizacja zdjęć dla Internetu.
Stopień kompresji JPEG, PNG oraz wielkość zdjęć należy dobrać do obecnie wykorzystywanego motywu. Jeżeli z jakichś powodów zdjęcia mają mieć nieskompromitowaną jakość można ustawić te wartości na ok 80%. Jeżeli w sklepie jest wiele produktów a listingi składają się z wielu elementów należy ustawić te wartości na nieco mniej – przykładowo tak jak jest w zrzucie powyżej – na 75% lub mniej.
Szerokość i wysokość zdjęcia powinna być jak najmniejsza ale na tyle duża aby nie zepsuć subiektywnej jakości wizualnej zdjęć i miniaturek.
3.3 Odłożenie wczytywania się (lazy-load) zdjęć i video
Odłożenie (opóźnienie) wczytywania się zdjęć powoduje, że serwis będzie bardziej interaktywny a kluczowe elementy takie jak fonty, teksty, przyciski załadują się szybciej niż zdjęcia. Jest to przydatne w przypadku umieszczania wielu zdjęć produktu lub listingów posiadających wiele elementów. Miniatury, które są położone nisko (do których trzeba przewinać) ściągną się na tyle szybko aby były widoczne przy przeglądaniu strony ale na tyle późno by nie blokować wczytania się widocznego od razu obszaru. O tym jak działa i jak zaprogramować lazy-load pisałem w artykule: Lazy load – tutorial w jQuery.
Zaproponowany w nim skrypt dopisujemy do pliku themes/nazwa_szablonu/assets/js/customs.js naszego motywu a dodatkową klasę „lazy” i podmianę atrybutu src na data-src wykonujemy w pliku product-list.tpl a także w innych plikach z widokiem modułów.
3.4 Kompresja GZIP/deflate
Kompresja GZIP to tekstowa kompresja wszystkich zasobów, które są pobierane razem ze stroną. Czytaj więcej jak włączyć kompresję GZIP w htaccess.
3.5 Nagłówki Expires lub Cache-Control
Nagłówki pamięci podręcznej przeglądarki powodują, że raz ściągnięty plik z arkuszem stylu, skryptem JavaScript lub zdjęciem jest przechowywany w przeglądarce aby można było z niego ponownie skorzystać bez ponownego pobierania ani sprawdzania czy plik nie uległ modyfikacji. Czytaj jak ustawić nagłówki Expires w .htaccess.
3.6 Rezygnacja lub optymalizacja skryptów JS firm trzecich
Dodawanie nieskończonej liczby skryptów śledzących działanie użytkownika oraz dodawania tak naprawdę mało wartościowych dodatków widgetów i przycisków firm trzecich potrafi zrujnować szybkość działania PrestaShop. Małe skrypty warto wklejać w ciało szablonu lub pobrać pobierane z zewnątrz zasoby taki jak zdjęcia, pliki CSS JS oraz fonty.
Czy to naprawdę działa?
Same podstrony mogą się wyświetlać w ułamkach sekund. W większości sklepów powinno się dać osiągnąć TTFB na poziomie 50 – 150 ms. Teoretycznie można się zbliżać do zera. Już poniżej 100ms trudno odczuć różnicę i dalsza optymalizacja nie ma za bardzo sensu z perspektywy UX:
Zobacz też jakie wyniki w PageSpeed Insights i GTMetrix dało się uzyskać na niedrogim serwerze VPS wykorzystując działania optymalizacyjne zawarte w tym artykule: Test i optymalizacja szablonu PrestaShop.
Podsumowanie
Jak zwykle, tylko holistyczne podejście jest skuteczne w przyspieszaniu sklepów PrestaShop. Odpowiednia identyfikacja wąskich gardeł jest kluczowa aby skupić działania na tych elementach, które wymagają poprawy w największym stopniu. Dzięki temu osiągniemy największą korzyść z przeprowadzanych prac administracyjnych i deweloperskich nie marnując środków na udoskonalenia, które przyniosą marginalne lub trudne do zauważenia korzyści.
Źródła:
https://devdocs.prestashop.com/1.7/scale/optimizations/
https://devdocs.prestashop.com/1.7/scale/benchmark/
https://symfony.com/doc/current/performance.html#don-t-check-php-files-timestamps
gs2k pisze: 
Odpowiedz lub skomentuj