Motyw do WooCommerce - jak wybrać szablon sklepu pod kątem szybkości i SEO

Jak motyw wpływa na szybkość sklepu WooCommerce?

Szybkość sklepu zależy od hostingu, cache, obrazów i wtyczek, ale motyw ustawia punkt startowy. Jeśli szablon ładuje na każdej stronie kilkaset kilobajtów skryptów, żadna wtyczka optymalizacyjna nie zrobi z niego lekkiego sklepu. Przy porównywaniu motywów zwróć uwagę na kilka rzeczy:

1. Rozmiar i liczba plików - sprawdź w narzędziach deweloperskich przeglądarki, ile CSS i JavaScriptu ładuje strona kategorii i karta produktu. Mniej znaczy lepiej, szczególnie na telefonie.

2. Zależności - czy motyw wymaga do działania dodatkowych wtyczek, np. page buildera, pakietu modułów albo osobnej wtyczki z funkcjami. Każda zależność to kolejne skrypty i kolejne aktualizacje.

3. Czcionki - motyw, który ładuje kilka krojów z zewnętrznego serwera w wielu grubościach, spowalnia pierwsze wyświetlenie strony. Lepiej, gdy pozwala hostować czcionki lokalnie i ograniczyć ich liczbę.

4. Galeria produktu - zdjęcie produktu jest zwykle największym elementem karty, czyli kandydatem na LCP. Galeria powinna ładować główne zdjęcie od razu, w rozsądnym rozmiarze, a kolejne dopiero przy przewijaniu.

5. Suwaki i animacje - karuzele na stronie głównej i animacje wejścia elementów często pogarszają LCP i CLS, a rzadko podnoszą sprzedaż.

Progi Core Web Vitals, które warto mieć z tyłu głowy, to LCP do 2,5 s, INP do 200 ms i CLS do 0,1. Więcej o pomiarze i kolejności poprawek piszemy w poradniku o tym, jak poprawić Core Web Vitals w sklepie WooCommerce. Pamiętaj też, że motyw musi dobrze współpracować z pamięcią podręczną - np. mini koszyk w nagłówku nie może psuć się po włączeniu cache stron. Jak ustawić cache bez ryzyka dla koszyka, opisujemy w tekście o pamięci podręcznej w WooCommerce.

Motywy wielofunkcyjne a szybkość sklepu

Motywy wielofunkcyjne kuszą setkami gotowych układów i wbudowanymi modułami. Problem w tym, że sklep korzysta zwykle z ułamka tych funkcji, a i tak ładuje sporą część ich kodu. Do tego część funkcji sklepowych w takim motywie dubluje wtyczki, które i tak instalujesz, np. filtry produktów czy porównywarkę. Jeśli wybierasz taki motyw, sprawdź, czy da się wyłączyć nieużywane moduły i czy wyłączenie faktycznie usuwa ich pliki ze strony.

Motyw do WooCommerce a SEO - na co zwrócić uwagę

Motyw nie zastąpi dobrych opisów, struktury kategorii i linków, ale może im pomóc albo przeszkodzić. Przy ocenie szablonu sklepu pod kątem SEO sprawdź na karcie produktu i w kategorii, czy:

• nazwa produktu jest jedynym nagłówkiem h1, a logo i nazwa sklepu w nagłówku nie są oznaczone jako h1 na każdej stronie,

• opis kategorii da się wyświetlić nad lub pod listą produktów i nie znika na telefonie,

• okruszki prowadzą od strony głównej przez kategorię do produktu,

• opis produktu i zakładka z dodatkowymi informacjami są w kodzie strony od razu, a nie doładowywane skryptem po kliknięciu,

• motyw nie dodaje własnych danych strukturalnych, które dublują dane produktu generowane przez WooCommerce lub wtyczkę SEO,

• obrazki mają atrybut alt pobierany z biblioteki mediów, a nie puste pola.

Duplikaty danych strukturalnych to częsty problem przy połączeniu motywu z rozbudowanymi funkcjami SEO i osobnej wtyczki SEO. Sprawdź kartę produktu w Teście wyników z elementami rozszerzonymi Google i upewnij się, że produkt jest opisany raz, z poprawną ceną i dostępnością.

Przy wyborze motywu warto też zdecydować, czy wystarczy Ci gotowy szablon z drobnymi zmianami, czy potrzebujesz projektu na jego bazie albo motywu potomnego z własnym kodem:

[#chart:woo81b]

Aktualizacje i zgodność motywu z WooCommerce

WooCommerce wydaje nowe wersje regularnie, a razem z nimi zmieniają się szablony sklepu. Jeśli motyw nadpisuje pliki WooCommerce, np. formularz zamówienia albo kartę produktu, każda zmiana w oryginalnym pliku wymaga aktualizacji kopii w motywie. Dokumentacja WooCommerce wprost zaznacza, że nadpisane szablony trzeba aktualizować, gdy zmienia się plik w WooCommerce, a modyfikacje oparte na hookach wymagają tego rzadziej.

Stan motywu sprawdzisz w raporcie WooCommerce > Status. Sekcja motywu pokazuje m.in., czy motyw jest motywem potomnym i czy deklaruje wsparcie dla WooCommerce, a sekcja szablonów wymienia pliki, które nadpisują domyślne szablony sklepu. Jeśli przy kandydacie na nowy motyw ta lista jest długa, licz się z większą pracą przy każdej większej aktualizacji WooCommerce.

Motyw potomny - kiedy jest potrzebny

Motyw potomny to osobny motyw, który dziedziczy wszystko po motywie nadrzędnym, a zawiera tylko Twoje zmiany. Według dokumentacji WordPressa dzięki temu aktualizacja motywu nadrzędnego nie kasuje modyfikacji. Minimalny motyw potomny to plik style.css z nagłówkiem Template wskazującym katalog motywu nadrzędnego. Jeśli planujesz zmiany w kodzie motywu, choćby kilka funkcji w functions.php, zrób je w motywie potomnym od pierwszego dnia.

[#uwaga] Motyw kupiony poza oficjalnymi kanałami lub w wersji „nulled” to ryzyko złośliwego kodu i brak aktualizacji bezpieczeństwa. Kupuj licencję u autora albo w zaufanym sklepie z motywami i sprawdź, jak długo obejmuje aktualizacje. Przy darmowych motywach z katalogu wordpress.org zwróć uwagę na datę ostatniej aktualizacji i liczbę aktywnych instalacji.

Przy motywach płatnych zapytaj też, co się stanie po wygaśnięciu licencji. Zwykle motyw działa dalej, ale przestaje dostawać aktualizacje, a to po kilku wersjach WooCommerce oznacza nieaktualne szablony i luki bezpieczeństwa. Koszt odnowienia doliczaj więc do budżetu sklepu na każdy kolejny rok.

Jak przetestować motyw przed wdrożeniem w sklepie

Demo motywu jest przygotowane pod idealne zdjęcia i krótkie nazwy produktów. Twój sklep ma długie nazwy, różne proporcje zdjęć, warianty i dziesiątki atrybutów. Dlatego motyw testuj na kopii sklepu z własnymi produktami, a nie na stronie demonstracyjnej. Przykładowy przebieg takiego testu:

[#chart:woo81c]

Podczas testu zanotuj wyniki pomiaru szybkości dla trzech typów stron: strony głównej, kategorii z wieloma produktami i karty produktu z wariantami. Porównaj je z obecnym motywem w tych samych warunkach, najlepiej na tym samym hostingu i z tym samym ustawieniem cache. Złóż też zamówienie testowe z każdą metodą płatności i dostawy, bo motyw potrafi zepsuć wyświetlanie wyboru punktu odbioru albo widżetu płatności.

[#checklista] Lista kontrolna wyboru motywu do WooCommerce: deklaracja wsparcia WooCommerce; aktualizacja w ostatnich miesiącach; krótka lista nadpisanych szablonów w WooCommerce > Status; lekka strona kategorii i karty produktu na telefonie; jeden h1 na stronie; brak zdublowanych danych strukturalnych; działający koszyk, checkout i mini koszyk z włączonym cache; zamówienie testowe z każdą metodą płatności.

Jak Vinson pomaga dobrać motyw do sklepu WooCommerce

W Vinson budujemy i rozwijamy sklepy na WooCommerce oraz integrujemy je z Allegro i Base. Przy wyborze motywu patrzymy na cały sklep, a nie tylko na wygląd:

• analizujemy produkty, warianty i strukturę kategorii, zanim zaproponujemy motyw,

• testujemy kandydatów na kopii sklepu i porównujemy szybkość na telefonie,

• przygotowujemy motyw potomny i zmiany oparte na hookach lub blokach, żeby aktualizacje były przewidywalne,

• sprawdzamy koszyk, checkout, płatności i dostawy po każdej zmianie szablonu.

Zakres współpracy znajdziesz na stronie sklepy na WooCommerce z Vinson. Jeśli dopiero planujesz budżet, przeczytaj też, z czego składa się koszt wdrożenia sklepu WooCommerce.

Najczęściej zadawane pytania

Jaki motyw do WooCommerce jest najszybszy?

Nie ma jednego najszybszego motywu dla każdego sklepu. Najlepiej wypadają lekkie szablony bez wbudowanych page builderów i rozbudowanych modułów, ale wynik zależy też od hostingu, obrazów i wtyczek. Porównaj kilka motywów na kopii własnego sklepu i zmierz szybkość kategorii oraz karty produktu na telefonie.

Czy darmowy motyw wystarczy do sklepu WooCommerce?

Często tak. Darmowe motywy z katalogu wordpress.org, np. Storefront lub blokowy Purple od Automattic, dają solidną bazę pod sklep. Sprawdź datę ostatniej aktualizacji, wsparcie dla WooCommerce i to, czy da się dopasować wygląd bez nadpisywania wielu plików.

Czym różni się motyw blokowy od klasycznego w WooCommerce?

W motywie blokowym kartę produktu, katalog i inne strony sklepu edytujesz w Edytorze witryny za pomocą bloków WooCommerce. W motywie klasycznym zmiany robi się przez ustawienia motywu, hooki w kodzie lub nadpisane szablony. Motywy blokowe zwykle wymagają mniej pracy przy aktualizacjach WooCommerce.

Czy zmiana motywu wpłynie na pozycje sklepu w Google?

Może wpłynąć, jeśli zmieni się szybkość, struktura nagłówków, linkowanie wewnętrzne albo widoczność treści. Adresy URL produktów i kategorii w WooCommerce zwykle zostają takie same, bo zależą od ustawień bezpośrednich odnośników, a nie od motywu. Przed zmianą zrób test na kopii sklepu i porównaj kluczowe strony.

Jak sprawdzić, czy motyw jest zgodny z WooCommerce?

W raporcie WooCommerce > Status sprawdzisz, czy motyw deklaruje wsparcie dla WooCommerce i które szablony sklepu nadpisuje. Zajrzyj też do opisu motywu i dziennika zmian, czy autor testuje go z aktualnymi wersjami WooCommerce. Na koniec złóż zamówienie testowe na kopii sklepu.

Dobrze dobrany motyw do WooCommerce to szybszy sklep, prostsze aktualizacje i mniej pracy przy SEO. Jeśli chcesz wybrać szablon pod swoje produkty albo sprawdzić, czy obecny motyw nie spowalnia sprzedaży, zobacz sklep na WooCommerce z Vinson - zaczniemy od testu kluczowych stron na telefonie.