Jak przyspieszyć sklep oparty na skrypcie PrestaShop?

Jak przyspieszyć sklep oparty na skrypcie PrestaShop?

Platformy sklepów 10 komentarzy do Jak przyspieszyć sklep oparty na skrypcie PrestaShop?

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.

No votes yet.
Please wait...

10 Comments

  1. Michał 4 kwietnia 2016 at 14:13

    Witam

    zastosowałem się do tych punktów, jednak numer 5 sprawia mi problemy.
    Może warto by opisać bardziej szczegółowo JAK to faktycznie zrobić dla kogoś, kto nie jest programistą?

    No votes yet.
    Please wait...

    • Redakcja 26 września 2016 at 14:22

      Cześć Michał!

      Dziękujemy za komentarz. Postaramy się w najbliższym czasie popracować nad kolejnymi tekstami dotyczącymi PrestaShop, a w szczególności nad punktem 5.

      No votes yet.
      Please wait...

  2. wojciech kolenski 13 maja 2016 at 08:37

    witam
    dzięki za super artykuł – co tu dużo mówić ładowanie strony to jeden z ważniejszych czynników.
    spróbowałem przekierować js i css z templatki na subdomeny:
    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/
    i kompletnie ‚rozsypał mi się sklep – brak obrazków, css nie czytał szablonu, czas ładowania koszmarny, mnóstwo błędów 404
    po stworzeniu subdomen i przekierowań dodałem także te subdomeny w miejscu preferencje – media serwer. zaktualizowałm htaccess
    nie działa
    co robię źle ??

    No votes yet.
    Please wait...

  3. Piotr 25 czerwca 2016 at 20:52

    Witam, w jaki sposób wykonać punkt 5 odnośnie subdomen kiedujących na foldery konkretne? Proszę o podpowiedź jak to zrobić w direct admin jeśli jest to możliwe i skąd prestashop będzie wiedział, że podane pliki CSS i JS ma pobierać z subdomena.domena/js, itp a nie po prostu z /js?

    No votes yet.
    Please wait...

    • Redakcja 26 września 2016 at 14:32

      Piotrze i Wojciechu,

      Dziękujemy za zainteresowanie naszym artykułem. W najbliższym czasie przygotujemy kolejny i omówimy Wasze problemy :)

      No votes yet.
      Please wait...

  4. Łukasz 19 stycznia 2017 at 11:54

    Dziękuję Redakcji!

    Temat pomógł, i z czasu 4 sek. obecnie ładuje się około 1 sek.
    Rezultat widoczny gołym okiem, teraz mi już sklep śmiga tak jakbym chciał!

    W końcu ktoś rzeczowo to napisał od deski do deski.
    Ja użyłem części tego artykułu i jest wielka poprawa.

    Jeszcze raz Dziękuję :)

    No votes yet.
    Please wait...

    • Redakcja 25 stycznia 2017 at 17:21

      Łukasz,

      Cieszymy się, że mogliśmy pomóc 😉

      No votes yet.
      Please wait...

  5. Widoczni 30 czerwca 2017 at 15:42

    Warto uaktualnić to zestawienie pod kątem urządzeń mobilnych – jak na preście zoptymalizować szybkość ładowania strony na małych ekranach, np. tak aby najpierw ładowała się widoczna treść.

    Rating: 5.0. From 1 vote.
    Please wait...

    • Redakcja 20 lipca 2017 at 09:51

      Dziękujemy za sugestię :)

      No votes yet.
      Please wait...

  6. tommy45 11 stycznia 2018 at 14:47

    Co do pkt.2 to warto dodać że włączenie niektórych opcji może przeszkadzać w działaniu np. Google Analytics albo remarketingu

    No votes yet.
    Please wait...

Leave a comment

Back to Top