Jak przyspieszyć sklep oparty na skrypcie PrestaShop?

12
20552

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.

Rating: 5.0/5. From 1 vote.
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...

Pozostaw odpowiedź Anonim Anuluj odpowiedź

Please enter your comment!
Please enter your name here