Zachęcony bardzo dobrą jakością szablonów HTML5, które miałem okazję przetestować w artykule: Test szablonów HTML5 z TemplateMonster postanowiłem zrobić jeszcze jeden test szablonów od tego dostawcy – tym razem dla systemu PrestaShop.

Z systemem PrestaShop mam zawodową styczność od 2016 roku. Dużo większa złożoność budowy własnych motywów w tym systemie powoduje, że tworzenie ich od podstaw jest mniej opłacalne niż w przypadku sklepów WooCommerce będących de facto rozszerzoną witryna WordPress. Nawet w przypadku tworzenia własnego motywu, praktycznie jesteśmy zmuszeni skorzystać z paczki deweloperskiej, do której odsyła nas dokumentacja: https://github.com/PrestaShop/StarterTheme

Tworzenie takiego szablonu od podstaw (choć wiąże się z wieloma potencjalnymi korzyściami) jest kosztowne i zazwyczaj niemożliwe do wykonania w budżetach większości przedsiębiorców chcących rozpocząć handel w Internecie wykorzystując do tego PrestaShop. Alternatywą do tego jest edycja oryginalnego motywu, który jest dostarczany razem z oryginalną instalacją PrestaShop.

Czy warto korzystać z unikalnych motywów PrestaShop?

Innym podejściem jest zakup szablonu PrestaShop z marketu TemplateMonster. Otrzymujemy w motyw do zainstalowania, który ostatecznie da nam w pełni funkcjonalny i oryginalnie wyglądający sklep z przykładową zawartością, która może być inspiracją do stworzenia własnych treści i katalogu produktów. Sprawdźmy jak wygląda w praktyce korzystanie z takiego motywu, czy podczas instalacji nie czekają na nas żadne niespodzianki i jaka będzie wydajność finalnie wykonanego sklepu.

Instrukcja instalacji szablonu PrestaShop od TemplateMonster

Instalację szablonu można wykonać na kilka sposobów. Decyzja o tym czy chcemy zainstalować motyw z przykładową treścią, która jest zaprezentowana w Demo od TemplateMonster determinuje z której z nich skorzystamy. Ponieważ jest to test finalnego sklepu, zainstalujemy przykładową treść aby odzwierciedlić i symulować korzystanie ze wszystkich preinstalowanych funkcjonalności i modułów.

Na początek, zainstalujemy PrestaShop w wersji jaka jest rekomendowana w szczegółowym opisie motywu. Jest to szalenie istotne aby bezproblemowo przejść przez proces instalacji:

Krok 1: Instalacja skryptu PrestaShop

Serwer dla naszego testowego sklepu będzie stanowiła instancja VPS SSD1 firmy OVH, która oferuje możliwość instalacja gotowego i skonfigurowanego systemu PrestaShop w dokładnie tej wersji, która jest podana w szczegółach naszego motywu.

Choć jest to jedna z najtańszych opcji hostingu jaką można obecnie wykupić w Polsce (koszt około 100 zł netto z hakiem), jest ona bardziej wydajna od większości hostingów wirtualnych (i współdzielonych) a przede wszystkim, w pełni kompatybilna z PrestaShop. Korzystając z gotowych instalatorów dostawcy hostingu omijamy szerokim łukiem problemy, które czyhają na nas już podczas samej instalacji podstawowego skryptu. Przykładowo, tak kończy się instalacja systemu PrestaShop w najtańszych wersjach hostingu wirtualnego u dwóch najpopularniejszych dostawców w Polsce:

Według mnie, wspomnieni dostawcy celowo utrudniają instalację takich skryptów jak PrestaShop z powodu jego stosunkowo dużej zasobożerności. Możemy za to wykorzystać specjalne pakietu hostingu PrestaShop o bardzo zawyżonej cenie. takie rozwiązania zostawimy naszej konkurencji 😉

Sprytnie pominęliśmy konieczność ręcznej instalacji, która z resztą nie powinna stanowić problemu jeżeli korzystamy z innego ale sprawdzonego hostingu WWW. W przypadku ręcznej instalacji ściągamy paczkę w wersji rekomendowanej przez autora motywu:

Wysyłamy paczkę na serwer uruchamiamy i podajemy dane do bazy danych – to wszystko.

Krok 2: Instalacja motywu PrestaShop

Chcąc zainstalować zakupiony motyw, przechodzimy do back-office z menu wybieramy Wygląd >> Szablony i korzystając z przycisku do wysłania pliku wskazujemy paczkę zip z pobranym szablonem.

Po automatycznej instalacji modułów (która może potrwać kilkanaście sekund) można już włączyć motyw i przejść do następnego etapu jakim jest załadowanie przykładowej bazy produktów i ustawień.

Krok 3: Import danych demonstracyjnych

Do tego celu autorzy motywu przygotowali specjalny moduł wystarczy przeciągnąć i upuścić pliki dostarczone razem z motywem. Widok do skorzystania z tej funkcjonalności znajduje się w menu po prawej stronie Sample Data Install >> Import Data.

Po instalacji przykładowych danych, która może trwać nawet kilka minut, możemy już obejrzeć nasz sklep. Wszystko wygląda dokładnie tak jak w markecie TemplateMonster. Atrakcyjne zdjęcia zachęcają do utrzymania podobnego poziomu i starannego doboru zdjęć do naszego sklepu.

Motyw wyposażono w przydatne moduły, takie jak:

• slajder, w którym możemy zrobić hero-image, pokaz slajdów lub film z tłem,
• newsletter,
• promocje,
• blog,
• udostepnianie w social media,
• i wiele więcej…

Optymalizacja szablonu PrestaShop

Sklepów powstałych w oparciu o systemy takie jak PrestaShop nie można tak po prostu zainstalować i opublikować. Musimy dokonać optymalizacji, która spowoduje że sklep:

• będzie odpowiadał w racjonalnym czasie,
• będzie zgodny z SEO i wytycznymi,
• zapewni wygodne robienie zakupów,
• umożliwi bezproblemową administrację przez personel.

W tym celu postępowałem zgodnie z moim przewodnikiem: Jak przyspieszyć PrestaShop.

W ramach optymalizacji wykonano następujące działania:

• instalację modułu Expires, i dodanie instrukcji w .htaccess który wykorzysta pamieć podręczną przeglądarki,
• instalację modułu PS Cache,
• dodanie kodu JavaScript odpowiedzialnego za Lazy Load (jQuery) (edycję kodu HTML dokonano w productlist.tpl).
• instalację certyfikatu SSL i przekierowanie HTTP na HTTPS,
• instalację HTTP/2,
• ustawienia Smarty, pamięci podręcznej według wspomnianego przewodnika dla wersji produkcyjnej sklepu,
• instalację Memcached ale na tym samym serwerze,
• Integrację z S3, podłączenie własnej domeny w CloudFront i wykorzystanie modułu AWS S3 / CloudFront dla PrestaShop.

Sprawdźmy teraz jaki wynik uzyska tak zainstalowany i skonfigurowany sklep z gotowym motywem PrestaShop od TemplateMonster.

Testy wydajnościowe szablonu PrestaShop

W końcu przechodzimy do zasadniczej treści artykułu. Czy szablon zda kombinację testów jakościowych i wydajnościowych? Dlaczego wykonuję takie a nie inne testy można przeczytać w artykule: jakość stron internetowych.

Wydajność front-endu i dobre praktyki

Na pierwszy ogień niech idzie GTMetrix:

Jak widać, wyniki w GTMetrix wyglądają bardzo dobrze. W YSlow nie uzyskaliśmy maksymalnego wyniku bo niektóre skrypty zostały na sztywno wpisane w kod szablonu – nie chciało mi się ich przenosić i przepisywać na adresy kierujące do CDN.

Sprawdźmy jak wygląda wynik w PageSpeed Insights:

Wynik w PageSpeed bardzo dobry jak na realia PrestaShop i fakt, że mamy do czynienia przecież z gotowym szablonem, który nadal można konfigurowac do własnych potrzeb.

Wynik wersji Desktop jest niemal idealny:

Optymalizacja mobilna

Sprawdźmy jeszcze wynik automatycznego testu optymalizacji mobilnej:

Semantic Web

W nowoczesnym sklepie internetowym, dane strukturalne to standard, niestety w szablonie występują pewne niedoskonałości, które powodują pojawianie się ostrzeżeń (ale nie błędów) w narzędziu audytującym:

Poprawność syntaktyczna HTML

Rzadko kiedy szablony przechodzą pełną walidację kodu HTML. Nasz testowany motyw, prawie go zaliczył – jedyny problem by z powielonym wartościami ID:

Zalety szablonów PrestaShop TemplateMonster

• bardzo dobry design – zgodny z trendami 2020,
• spełnia dobre praktyki i uzyskuje dobre wskaźniki w automatycznych analizatorach wydajności/UX
• dobry stosunek jakości szablonu do ceny,
• dodatkowe moduły rozszerzające funkcjonalność sklepu o takie elementy jak blog, czy dodatki UI (slajder, efektowne animacje slajdera lub hover, paginacja naśladująca SPA).
• z szablonem dostarczane są przykładowe treści, które znacznie ułatwiają stopniowe dopasowanie sklepu do własnych upodobań wykorzystując zaszyte w nim funkcjonalności i moduły,
• prosty intuicyjny PageBuilder pozwala dopasować wygląd strony głównej, stopki i nagłówka.
• możliwość instalacji w kilku lokalizacjach (np. testowej i produkcyjnej, brak ograniczeń instalacji), należy pamiętać, że licencja pozwala na korzystanie z motywu w ramach jednego sklepu.
• w miarę dobra i czytelna dokumentacja.

Wady szablonów PrestaShop TemplateMonster

• wymaga doinwestowania – przed opublikowaniem sklepu należy kupić dodatkowe moduły (np. Cache, Lazy Load) lub skorzystać z pomocy dewelopera w celu otymalizacji wydajnościowej,
• brak polskiego tłumaczenia modułów i szablonu – szablon można kupić w polskojęzycznej wersji marketu TM, ale ten konkretny szablon był dostarczony w wersji angielskiej, hiszpańskiej, niemieckiej i rosyjskiej.
• w niektórych miejscach nie działało tłumaczenie za pomocą back-office, szablon wymagał drobnych modyfikacji, które należało wykonać ręcznie w systemie plików lub w bazie danych.
• drobne błędy w danych strukturalnych, o których wspomniałem wcześniej i które trzeba naprawić ręcznie.

Podsumowanie

Wykorzystanie gotowego szablonu od TemplateMonster to rozsądne rozwiązanie łączące dobrą cenę i dobrą ogólną jakość sklepu jaki finalnie można zbudować. Chcąc zapewnić dobrą wydajność i o wiele większą wygodę użytkowników mobilnych, nasz sklep będzie wymagał zakupu kilku dodatkowych modułów lub będziemy musieli skorzystać z pomocy fachowca.

Pamiętaj że szybkość działania sklepu to nie wszystko. Czytaj więcej o optymalizacji SEO w PrestaShop.

Link do szablonu:

https://www.templatemonster.com/pl/szablony-prestashop-79205.html