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