Web Design Blog / E-commerce:

Przyspieszanie sklepu PrestaShop

Data publikacji: 20 maja 2019

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.

  1. Sprzęt i oprogramowanie serwerowe
  2. Warstwa Back-Endu i baza danych
  3. 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”.

Wąskie gardło - ilustracja

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 bo 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. 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.

Wydajność PHP 7 w stosunku do wersji PHP 5 - wykres

1.2 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.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 configuracyjnym.

Jeżeli kogoś interesuje jak wygląda rozdzielenie samej logiki na kilka serwerów za pomocą HAProxy odsyłam do artykułu:
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:

https://addons.prestashop.com/pl/wydajnosc-strony/27354-aws-cloudfront-s3-speed-up-your-website-seo.html

O tym jak wykonać działania administracyjne w Konsoli AWS napisałem odpowiedni poradniki:

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.

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.

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 ie dając w zamian szczególnej wartości:

  • moduły do gamifikacji panelu klienta lub panelu administracyjego (system odznak),
  • moduły usuwające numer id produktu z adresu url,
  • moduły odpowiedzialne za przekierowania adresów URL.

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.

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.

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

Przyspieszanie sklepu PrestaShop
4.5 (90%) głosów: 6


Komentarze

Brak komentarzy.

Dodaj swój komentarz