Spis treści artykułu:
Czas ładowania sklepu internetowego ma wpływ nie tylko na decyzje klientów ale również na czynniki poprawiające pozycję w wyszukiwarkach. Warto zainteresować się tym tematem i nieco poprawić osiągi swojego sklepu opartego na skrypcie PrestaShop.
Obecnie klienci są sekundę od tego, by opuścić Twój sklep online. Najlepsi sprzedawcy online, jak Amazon, stale przypominają nam, jak zaciekły i konkurencyjny jest rynek e-commerce.
Bardzo interesującą historią dotyczącą konkurencyjnego aspektu e-commercu jest ta, w której założyciel wspomnianego giganta, Jeff Bezos, kiedyś każdego ranka spotykał się z jego zespołem od IT, by porównać szybkość ładowania stron jego największych konkurentów z jego własną i upewnić się, że ta ładuje się dwa razy szybciej.
Nie mam zamiaru kłamać – szybkość Twojej strony ma kluczowe znaczenie. Dobrą wiadomością jest to, iż większość pracy związanej z jej zwiększaniem zrobi za Ciebie PrestaShop. By sukcesywnie sobie poradzić z przyspieszaniem, zastosuj się do dziesięciu poniższych wskazówek.
1. Sprawdź, czy twój system szablonów Smarty jest odpowiednio skonfigurowany
1. Udaj się do panelu administracyjnego, wybierz opcję „Zaawansowane” i „Wydajność”. Spójrz na sekcję „Ustawienia dotyczące Smarty”.
2. Upewnij się, że opcja „Wymuś kompilację” jest wyłączona.
3. Upewnij się, że „Pamięć podręczna” jest włączona.
2. Włącz CCC (Combine, Compress, Cache – Łącz, kompresuj i keszuj)
1. Przejdź do panelu administracyjnego, wybierz zakładkę „Zaawansowane”, a następnie „Wydajność”. Zwróć uwagę na sekcję „Funkcjonalność CCC”.
2. Włącz CCC dla wszystkich z widocznych opcji.
3. Użyj biblioteki Ridjnael
1. W panelu administracyjnym wejdź w „Zaawansowane” i „Wydajność”. Przewiń do sekcji „Szyfrowanie (ciphering)”.
2. Przestaw na opcję „Użyj biblioteki mcrypt i algorytmu Rijndael (rekomendowane)”.
Uwaga! Musisz mieć zainstalowanie rozszerzenie mcrypt na swoim serwerze – w przeciwnym wypadku otrzymasz komunikat o błędzie.
4. Zmień opcję przechowywania obrazków
Jeżeli do tej pory korzystałeś ze starszych wersji PrestaShop i zmieniłeś je na nową, możesz chcieć zmienić schemat rozmieszczania plików graficznych w folderach. Zamiast zbierać wszystkie obrazy w jednym folderze (jak to było wcześniej), tutaj możesz sprawić, by były umieszczane w podfolderach. Jest to automatyczna opcja w nowych wersjach skryptu – jeżeli zaktualizowałeś swoją wersję, wykonaj te korki;
1. W panelu administracyjnym wejdź do menu „Preferencje” i „Zdjęcia”, a następnie spójrz na opcję „Przenieś zdjęcia”.
2. Cały proces może potrwać dość długi okres czasu – upewnij się, że Twój serwer jest w stanie obsłużyć skrypty PHP przez więcej niż 30 sekund (spytaj usługodawcy, jeśli nie jesteś pewny).
3. Kliknij na „Przenieś zdjęcia”.
5. Stwórz subdomeny dla plików Javascript i CSS
1. Stwórz subdomenę js1.twojadomena.pl kierującą do folderu /js/
2. Stwórz subdomenę js2.twojadomena.pl kierującą do folderu /theme/twójtheme/js/
3. Stwórz subdomenę css1.twojadomena.pl kierującą do folderu /css/
4. Stwórz subdomenę css2.twojadomena.pl kierującą do folderu /theme/twójtheme/css/
Te cztery subdomeny pozwolą odwiedzającym ładować więcej plików jednocześnie. Przeglądarka jest ograniczona do 8 jednoczesnych pobierań z jednej strony – każda subdomena dodaje 8 do równoległych pobierań. Pełna liczba równoległych pobierań, zamiast 8, będzie wynosiła 40.
6. Zainstaluj CDN
Powinieneś myśleć globalnie: Twoja strona powinna ładować się szybko wszędzie na świecie. Dlatego właśnie warto skorzystać z CDN (Content Delivery Network) jako najbardziej efektywnego sposobu zredukowania dystansu między serwerem a odwiedzającymi.
Jednym z najlepszych, a zarazem partnerujących PrestaShop, dostarczycieli tego typu usług jest CloudCache. Dodatkowo istnieją darmowe moduły umożliwiające jego integrację z własnym sklepem.
7. Połącz wszystkie małe obrazki w jeden duży
Za każdym razem, gdy odwiedzający ładują Twoją stronę, przeglądarka musi pobrać od 75 do 100 obrazków, z których większość to małe obrazki używane w celu ozdobienia całości. Dlatego też warto łączyć je w jeden obrazek, ale większy, a następnie korzystać z css, by wyświetlić odpowiedni obrazek. Jakie są tego zalety?
– Szybsze ładowanie strony
– Mniejsze zużycie serwera (dostarczanie jednego obrazka zamiast stu)
– Mniej kody HTML
Jedynym minusem tej techniki jest konieczność edytowania obrazka, ustalania współrzędnych itd, co pobiera dużo czasu.
Jeżeli posiadasz serwer dedykowany, poproś dostawcę o te zmiany:
8. Włączenie systemu MemCached, XCache, APC lub podstawowego systemu PrestaShop
MemCached to darmowy system cachowania obiektów, który jest bardzo prosty do instalacji i użytkowania, a jednocześnie potężny. Jest w stanie rozwiązać problemy związane z przechowywaniem ogromnych danych i jest obecnie używany przez takieserwisy, jak Wikipedia czy Twitter.
PrestaShop jest od razu skonfigurowana, by używać MemCached i to użycie można włączyć w sekundę:
1. Poproś dostawcę o zainstalowanie biblioteki MemCached i udostępnienie jej dla Ciebie.
2. W panelu administracyjnym przejdź do zakładki „Zaawansowane” – „Wydajność” i spójrz na sekcję „Cache”.
3. Wybierz MemCached w polu „System cache’u” i zaznacz opcję używania cache.
Alternatywą może być także XCache, który nie wymaga żadnego rozszerzania po stronie serwera – można go ustawić w tym samym miejscu i menu.
9. Zainstaluj narzędzie cachowania OP-Code lub APC
eAccelerator to darmowe narzędzie do optymalizacji i przyspieszania działania kodu PHP – zwiększa wydajność skryptów poprzez cachowanie ich w ich skompilowanym stanie. Optymalizuje również skrypty, by przyspieszyć ich wykonywanie, zazwyczaj zwiększając szybkość ładowania 1-10 razy. Nie trzeba wykonywać żadnych zmian w panelu administracyjnym – wystarczy poprosić usługodawcę o włączenie tego rozszerzenia i upewnić się, że sklep działa poprawnie.
10. Popraw swoją konfigurację MySQL i sprawdź wartość cache zapytań SQL
Poproś usługodawcę o zapoznanie się z konfiguracją MySQL i sprawdzenie query_cache_value. Jej wartość powinna wynosić co namniej 512M (512 megabajtów).
Dodatkowe
1. Zainstaluj YSlow lub Google Page Speed
2. Zoptymalizuj kod z XDebug oraz KCacheGrind.
Podsumowanie
Mam nadzieję, że dziś nauczyliście się korzystając z naszego doświadczenia. Szybszy sklep oznacza więcej zamówień i większy zysk – taka jest rzeczywistość. Nie wprawiajcie swoich klientów w rozczarowanie i bądźcie przed swoją konkurencją poprzez częste sprawdzanie szybkości ładowania sklepu.
