Pozycjonowanie zwykłej strony www wydaje się być o wiele łatwiejsze aniżeli pozycjonowanie sklepu internetowego. W przypadku strony mamy znacznie większy wachlarz możliwości. Mam na myśli zarówno oryginalne treści jak i całą masę wtyczek, które wspomagają optymalizację wydajnościową. Jak zrobić dobry podkład pod pozycjonowanie sklepu internetowego?

Bardzo wiele osób bazuje na rozwiązaniach e-commerce open source jak Prestashop, Magento itp. Są to bardzo dobre sklepy, swoją funkcjonalnością znacząco przewyższające wtyczkę sprzedażową Woocommerce do WordPress. W zeszłym roku opisywałem sposoby optymalizacji stron na bazie WordPress i o ile do tego CMS’a jest cała masa wtyczek optymalizujących system to w przypadku Magento czy Prestashop jest ich mniej, są najczęściej płatne a sklepy same w sobie są dużo wolniejsze w działaniu. Aplauz gadżety reklamowe to sklep na bazie Prestashop i nim się dziś zajmę co nie oznacza, że użytkownicy Magento nie mogą z poradnika skorzystać. Oni mają swoje odpowiedniki wtyczek, które robią podobne rzeczy.

Do dzieła.

Całą zabawę rozpoczynam od sprawdzenia pozycji co wydaje się być naturalnym krokiem. Później wykonuje audyt narzędziem np. GTMetrix, które pokazuje mi czas wczytywania, liczbę odwołań do serwera, ciężar strony, kolejność wczytywania elementów itd.

 

1. Analiza zawartości strony a pozycjonowanie sklepu internetowego

Cały proces proponuję rozpocząć od analizy Heatmap. Ja taką tworzę za pomocą strony i skryptu Hotjar. Bardzo prosty, fajny w obsłudze i darmowy analizator (do jednej strony jest darmowy, później płatny ale można przecież założyć kilka kont). Zwykle sklepy internetowe mają całą masę bloków typu ostatnio oglądane, najnowsze, najchętniej kupowane, promowane. Okazuje się jednak, że nie są to bloki najchętniej klikane. To już widać po kilku dniach analizowania naszej strony przez Hotjar’a. Skoro nikt nimi nie jest zainteresowany to po co je trzymać? Obciążają przecież naszą stronę, dekoncentrują kupującego. Inaczej mówiąc … zaśmiecają stronę.

Heatmap strony aplauz.gift

 

2. Optymalizacja plików CSS i Javascript

Jak wiadomo Prestashop udostępnia fajnie działające opcje do minifikacji plików CSS i Javascript. Użycie tych opcji pozwala na ograniczenie liczby odwołań do serwera czasem o kilkaset procent. Zwykle wszyscy mają je włączone więc niech taka wersja będzie wyjściową dla naszego testu.

 

GTMetrix Optymalizacja 1

 

Jak widzimy czas wczytywania na poziomie prawie 10 sekund nie jest zbyt rewelacyjnym. Na ten wynik wpływają zarówno czas generowania głównego pliku jak i cała masa obrazków, która musi zostać pobrana przez przeglądarkę.

Poprawienie czasów można uzyskać kierując ruch przez CloudFlare. W zasadzie wszystkie interesujące nas funkcję są udostępniane za darmo więc czemu z nich nie korzystać. Cały proces konfiguracji jest banalnie prosty. Wystarczy wejść na stronę cloudflare.com, zarejestrować się i podać adres naszej strony. System zacznie sprawdzać ustawienia naszego serwera i automatycznie wszystko skonfiguruje. Jak już skończy poda dwa adresy serwerów, które należy wpisać w polach DNS naszego zaplecza domenowego. Po rozpropagowaniu informacji po serwerach nazw, ruch już będzie kierowany przez CloudFlare. Deklarowany czas to 24 godziny, zwykle jest to zaledwie kilka godzin.

 

Cloud Flare minifikacja

 

Poza tym CloudFlare ma bardzo przydatne opcje jak ochrona przed atakami i umożliwia wysyłanie danych ze swojego cache w przypadku gdy serwer zawodzi. To też ma wpływ na pozycjonowanie sklepu internetowego.

 

3. Optymalizacja bazy danych

Następnym krokiem jest odchudzenie bazy danych. Ten niepozorny krok pozwala na zmniejszenie jej rozmiaru czasem dwukrotnie a tym samym na skrócenie czasu generowania głównego pliku o kilkaset procent. Zabawa zatem jest warta zachodu, prawda?

Ja do tego celu użyłem darmowego dodatku Database Optimization, który można pobrać ze strony Prestashop lub bezpośrednio ze strony autora.

Wyrzuciłem również ponad tysiąc produktów wycofanych z oferty a trzymanych … no nie wiem po co.

 

4. Redukcja odwołań do serwera

Wszystkie ikonki w sklepie zawdzięczam Font Awesome i tą bibliotekę postanowiłem pobierać nie z mojego serwera a z CDN’a (https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css). Oszczędność rzędu kilku milisekund to sporo.

Następnym elementem będzie zainstalowanie dodatku LazyLoad do Prestashop. Pozwala on na redukcję elementów blokujących (obrazków) dzięki dynamicznemu wczytywaniu za pomocą jQuery. Dodatek bazuje na rozwiązaniu http://www.appelsiini.net/projects/lazyload (podaję źródło gdyby ktoś chciał go zmodyfikować).

Dodatek ściągnąłem i podmieniłem bibliotekę js na najnowszą z https://github.com/tuupola/jquery_lazyload/archive/1.9.7.zip

Do poprawnego działania potrzebna jest modyfikacja pliku products.tpl. Chodzi o to by każdy z obrazów posiadał element data-original zawierający adres obrazu. Po zainstalowaniu dodatku podaje on kod, który należy zmienić. Operacja nie jest skomplikowana a dzięki niej otrzymujemy jakże ładny wynik.

 

GTMetrix Optymalizacja 2

Trzykrotny wzrost prędkości w zasadzie mogłoby już zostać ale przecież w miarę jedzenia apetyt wzrasta. Wasz też wzrósł, prawda? :)

Postarajmy się zatem pozamieniać wszystkie obrazki lub możliwie jak najwięcej na takie wczytywane dynamicznie. Edytując kolejno pliki tpl nagłówka, bannerów itd możemy jeszcze zredukować kilka odwołań. To również jest walka o setne sekundy.

 

GTMetrix Optymalizacja 3

Tak się rozpędzimy, że nawet same pliki dodatku zaczną nam przeszkadzać ;)

Dodatek wykorzystuje np. plik placeholder.png, którego wyeliminowanie wprawdzie zredukuje liczbę odwołań o jeden ale spowoduje, że do czasu wczytania obrazu będzie widoczny jego atrybut alt. Nie wygląda to dobrze. Zmieńmy go zatem na kod Base64. Dla niewtajemniczonych to zakodowany np. obrazek, który dekodowany jest przez przeglądarkę. Dla przezroczystego gifa ma wartość data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Nasz banner na stronie głównej będzie zatem miał postać:

<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original="http://aplauz.gift/themes/default-bootstrap/img/homebanner.jpg" alt="Gadżety reklamowe z nadrukiem" width="1280" height="400" /><noscript><img src="http://aplauz.gift/themes/default-bootstrap/img/homebanner.jpg" alt="Gadżety reklamowe dla firm" width="1280" height="400" /></noscript>

 

5. Rezultat optymalizacji wydajnościowej

Udało nam się osiągnąć wynik 1.8s dla serwera testującego w Vancouver w Kanadzie.
Podsumowując … nasza strona przez ocean leci niecałe dwie sekundy! Boooom! O to chodziło:)

Rezultat tych wszystkich zabiegów to 5x wzrost prędkości! Prawie 8-krotna redukcja odwołań do serwera i czterokrotne zmniejszenie wagi strony wpływa na pozycjonowanie sklepu internetowego.

 

GTMetrix Optymalizacja 4

 

6. Tak się rozpisałem o przyspieszaniu a jak ma się nasza pozycja w Google?

Ja do sprawdzania pozycji używam darmowej aplikacji na Androida o nazwie SERPMojo. Wersja free nie sprawdza automatycznie pozycji i każdego dnia trzeba ją odpalić, żeby zaktualizować dane. Pełna wersja kosztuje jednorazowo koło 20 złotych. Chyba można zainwestować takie fundusze i zapomnieć o codziennej aktualizacji.

 

SERPMojo ranking

 

To co się stało z pozycjami przeszło moje najszczersze oczekiwania. Strona pofrunęła kilkadziesiąt miejsc w górę. Nie wiem czy to tylko zasługa optymalizacji wydajnościowej ale idealnie z nią koresponduje. Cała zabawa nad stroną rozłożona była w czasie 4 dni. Wraz z moim partnerem hostingowym uruchomiliśmy też coś na zasadzie chmury. Nie wiem dokładnie co to było ale umożliwia ściągnięcie plików graficznych bez cookies. Jeśli ktoś nie ma tak dobrego kontaktu ze swoim adminem może posilić się poniższym wpisem w .htaccess lub … przenieść swoje rzeczy do Ahost.

<IfModule mod_headers.c>
 <FilesMatch "\\.(ico|x-icon|js|css|jpg|jpeg|png|gif|swf|pdf)$">
 Header unset Cookie
 Header unset Set-Cookie
 Header unset ETag
 FileETag None
 </FilesMatch>
</IfModule>

 

A jakie czasy Twój sklep wykręca?

Szybkość ładowania a pozycjonowanie sklepu internetowego 4.93/5 (14 głosów)

16 Komentarzy

  1. Dawid napisał(a):

    Bardzo dobry poradnik, inspirujący wręcz! Wiele osób ciągle zapomina o tym czynniku i mimo wszystko często jeszcze zdarza się widzieć sklepy, które kompletnie nie mają zoptymalizowanej szybkości ładowania..

  2. Sebastian Ciereszko napisał(a):

    Świetny artykuł, jednak sama procedura konfiguracji dodatku LazyLoad zdecydowanie za słabo opisana.

    Artykuł zainspirował do pogrzebania trochę za tym tematem, poniżej nowsza / lepsza wersja tego modułu wraz z gotowym kodem do wklejenia na product-list.tpl

    https://www.prestashop.com/forums/topic/273769-modulo-lazyload-ps-14-ps-15/

    W zasadzie dzięki opisowi zawartemu w konfiguracji tego modułu można każdą jedną templatkę dostosować sobie.

    Może na ten moment warto by było opisać również infinity scroll, stanowiło by to świetne uzupełnienie dla lazy load :-)

    • Ireneusz Mazur napisał(a):

      Witam, witam :)

      Istotnie, nie wnikałem w opis LazyLoad ponieważ po instalacji dodatek sam podpowiada co i jak zrobić. Uznałem, że nie ma sensu dublować instrukcji.
      O infinity nie wspomniałem ponieważ chciałem by treść strony nie wczytywała się dynamicznie. Zależało mi na ilości treści dostępnej „od ręki” bo ta wpływa na pozycję. Ale gdyby je połączyć, tak jak mówisz … hmm. Nie trzeba byłoby klikać stron <>. Pomyślę, dziękuję Sebastian za podpowiedź :)

  3. Breslauer napisał(a):

    Kolejna porcja ponadprzeciętnych porad! Dziękuję:)
    Myślę że już w ten weekend sprawdzę tę sztuczkę na jednym ze swoich sklepów.
    secureglass.net -> Tak Trzymać!

  4. Tomasz Kaczmarzyk napisał(a):

    Ciekawie!!!

    Osobiście używam dodatkowo modułu Express Cache, który strasznie przyspiesza działanie sklepu na PS – należy pamiętać o ręcznym czyszczeniu cache w tym module + ps_express_cache.

    Osobiście lepsze efekty zauważyłem jak ręcznie zrobiłem minifikacje + wł. w standardowych opcjach na PS i dopiero wyczyściłem cache na CF i włączyłem je. Druga sprawa (używam kilka lat CF) trzeba okresowo wyłączyć (odznaczyć 3x) minifikacje i ponownie włączyć bo kod lubi gdzieś „zginąć” który CF dodaje do naszego sklepu. Zacząłem testować dzisiaj Rocket Loader w CF bo tak długo jest w Beta że już nie mogłem tyle czekać :)

    NALEŻY DODAĆ ŻE CF DODAJE SSL – STRONA GŁÓWNA + PODSTRONY I DZIAŁA PIĘKNIE, W FINALNE ZAOSZCZĘDZAMY PARĘ ZŁ NA SSL’KE I SPRZYJA TO POZYCJONOWANIU.

    Ważna jest też optymalizacja zdjęć, używałem smush it, ale za dużej kompresji nie było. Wiadomo na stronie głównej powinno się z gtmetrixem albo kraken.io ręcznie optymalizować.

    Kolejna rzecz jaką zauważyłem (mimo że mam ssd na serwerze) to że cachowanie na bazie danych jest lepsze od tego w plikach ale trzeba okresowo ręcznie wyczyścić ps_smarty_cache i ps_smarty_lazy_cache + katalog cache/smarty.

    Po wyczyszczeniu cache dobrze zrobić optymalizacje bazy danych – osobiście używam standardowej w DirectAdmin chociaż na samym phpmyadmin też można.

    Dobrze po wszystkich zabiegach zrobić reset serwera albo cache na root wyczyścić – raz na rok reset się przydaje :)

    Polecam zmienić w bazie dokładnie my.cnf
    BAZA my.cnf
    innodb_thread_concurrency=4
    innodb_buffer_pool_size=1G
    query_cache_limit = 32M
    read_rnd_buffer_size = 32M
    max_allowed_packet = 32M
    query_cache_size = 64M
    thread_cache_size = 8M
    read_buffer_size = 32M
    sort_buffer_size = 32M

    PHP mam:
    memory_limit = 2048M
    max_execution_time = 1000;
    max_input_time = -1;
    max_input_vars = 10000;
    suhosin.get.max_vars = 10000;
    suhosin.post.max_vars = 10000;
    upload_max_filesize 128mb
    max_file_uploads 128mb
    max_execution_time = 1000;

    Może nie jest idealnie ale u mnie najlepiej zdaje egzamin takie ustawienie

    Dodatkowym dobrym zabiegiem jest zrobienie stron statycznych – często przeglądarki mają ustawione pobierane w danym czasie max 8 pobierań z serwera, a dodatkowe 3 sudomeny pomnożą nam ten wynik np. static1.secureglass.net, static2.secureglass.net, static3.secureglass.net.

    Osobiście uważam, że największym (nie najmniej wartym) jest łącznie css’ów, zrobiłem kiedyś tak i co chwila jak chciałem zmieniać na stronie wszystko od nowa musiałem kodować itd. Efekt mizerny może w sklepach z większą ilością ikonek lub z dużymi grafikami coś daje ale u mnie prawie nic nie dało oprócz paru godzin w „plecy”.

    Dla zabiegów nie tyle SEO co optymalizacji co idzie w parze również z SEO jest wyłącznie zbędnych modułów – zgodzę się że jest dużo fajnych i przydatnych, ale naprawde jak by usiąść i pomyśleć można naprawdę dużo wyłączyć.

    Ostatnia rzecz – fajnie mieć moduł do czyszczenia produktów bez zamówień, gdyby ktoś chciał pisać to podeślę.

    Trochę się rozpisałem a miał być mini komentarz :) ale dobrze jak komuś się chociaż część przyda!

    Co sądzisz o https://www.crazyegg.com/overview ? Lepszy jest hotjar Twoim zdaniem?

    • Ireneusz Mazur napisał(a):

      Ależ potężna dawka wiedzy:)

      Moduł cache’ujący jest z pewnością wart uwagi. Niestety te wszystkie, które znalazłem są płatne. Kolejna słuszna uwaga: wyłączenie modułów, statystyk … ogólnie zbędnym elementów potrafi znacząco poprawić szybkość. Co do ilości jednoczesnych połączeń to wygląda ona mniej/więcej tak:
      Firefox 2: 2
      Firefox 3+: 6
      Opera 9.26: 4
      Opera 12: 6
      Safari 3: 4
      Safari 5: 6
      IE 7: 2
      IE 8: 6
      IE 10: 8
      Chrome: 6
      Co do crazyegg … zaraz przetestuję :)

  5. Tomasz Kaczmarzyk napisał(a):

    Dawka wiedzy za dawkę wiedzy :) Też sporo się nowych rzeczy dowiedziałem z Twojego artykułu.
    Co do modułów, dużo jest ciekawych, ale 80% osób nawet nie wie, że ma takie opcje w swojej preście, 5% ich nie używa, 5% woli inne narzedzia takie jak analytics i może ze statystyk korzysta 10% osób – procenty z „kosmosu” :) Z tych 10% osób może 50 % analizuje je, wyciąga wnioski i wprowadza w życie, bo jaki jest sens patrzyć żeby patrzyć… lepiej tv pooglądać w którym nic nie ma a oczy tak nie „siadają”.

    Napisz mi maila, a w zwrotce dostaniesz express cache – zobaczysz prawdziwą rakietę. Ja mam 10 sklepów na multisore z jedną branżą (każdy 2000 produktów) i 10 sklepów (każdy 500 produktów) na multi z drugą kategorią więc bez optymalizacji boty przeglądające sklep zajechały by mi w ciągu godziny serwer dlatego przetestowałem praktycznie wszystko oprócz AMP, płatnego CF – praktycznie = daleko od wszystkiego. Dodam tylko że memcache u mnie strasznie spowalnia serwer aż umiera po 3 godzinach.

    Pozdrawiam

    • Ireneusz Mazur napisał(a):

      Ogólnie Google zrobiło zamieszanie z tym AMP ale to inna para kaloszy. Gdy pojawiły się informacje dotyczące poprawy pozycji w Google dość mocno się w to zaangażowałem. Korzystając z możliwości kontaktu z Johnem Muellerem zadałem mu pytanie o AMP dla e-commerce. Odpisał, że docelowo kiedyś pewnie się tym zajmą to na chwilę obecna skupiają się na newsach. Jakoś brakowało w jego wypowiedzi entuzjazmu motywującego do wdrożenia technologii w sklepie. Podsumowując … z AMP dla sklepów nie ma co spieszyć.

  6. FotoGuzik napisał(a):

    Super artykuł. Widzę jednak, że czeka mnie duuużo pracy :)

  7. Sebastian Ciereszko napisał(a):

    Odświeżam temat,

    Po dłuższej zabawie w optymalizacje dam coś jeszcze od siebie. Silnik prestashop

    gtmetrix dość mocno przekłamuje wyniki, wystarczy że więcej osób w danej chwili korzysta z ich serwisu. Polecam tools.pingdom.com
    Daje bardziej miarodajne wyniki, porównywałem na łączu z vpsa z ovh (dość zbieżne) w różnych porach dnia.

    Na cloudflare włączenie opcji No Query String na zakładce Caching (odpowiada za przechowywanie informacji o wersji pliku)

    Dodatkowo w wersji php7 (ilość odwołań się zmniejsza dość mocno, daje niesamowitego kopa)
    memchached – mimo kilku podejść i konfiguracji nie tylko nie przyśpieszył a pojawiły się za to problemy z wyświetlaniem ceny

    pozycje obowiązkowe:
    opcache
    mod_pagespeed (uwaga wymagany jest Python w wersji 2.7.*)

    Duży wpływ ma również serwer na którym to wszystko uruchomimy.

  8. Mateusz napisał(a):

    Niestety ludzie wciąż mają małe pojęcie ile kosztuje dobrze promowany i utrzymany sklep internetowy. Wiele sklepów działa na oryginalnych szablonach(nie wyróżniają się niczym wizualnie) i słabych hostingach. Dobra optymalizacja jest niemożliwa na słabym hostingu, a część funkcji w htaccess jest wyłączona. Artykuł dobry, ale pamiętajmy, że linki przychodzące i dobre treści to podstawa widoczności sklepu.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *