Jak przyspieszyć sklep oparty na skrypcie PrestaShop?

    12
    8461

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

    12 KOMENTARZE

    1. 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...
      • 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. 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. 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...
      • 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. 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...
      • Łukasz,

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

        No votes yet.
        Please wait...
    5. 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ść.

      No votes yet.
      Please wait...
      • Dziękujemy za sugestię 🙂

        No votes yet.
        Please wait...
    6. 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...
    7. Witam
      Czy będzie dalsza część artykułu?

      No votes yet.
      Please wait...
      • Nie planowaliśmy, ale możemy rozważyć taką opcję. O czym chciałby Pan przeczytać?

        No votes yet.
        Please wait...

    ZOSTAW ODPOWIEDŹ

    Please enter your comment!
    Please enter your name here