SafeVelo: mobile 68/100 do 98/100 po przebudowie sklepu WooCommerce

Wyzwanie: mobile 68/100 i karta TR70 jako główne wejście

SafeVelo to mały polski sklep internetowy z produktami do bezpiecznej jazdy rowerem: radarem Coospo TR70, kaskami dziecięcymi SafeVelo Kids, Uvex i Hamax, lampkami oraz akcesoriami. Sklep działa na WordPressie i WooCommerce, ma około 28 produktów w trzech kategoriach, a 45% wszystkich sesji trafia od razu na kartę radaru TR70.

Zastaliśmy gotowy motyw Hostinger AI, Elementor ładowany na każdej stronie dla jednego wpisu blogowego i trzy małe wtyczki pisane wcześniej pod sklep. Mobile w Lighthouse miał 58 do 71 punktów, LCP, czyli czas do wyświetlenia największego elementu, dochodził do 13 s, a GA4 nie zbierał zakupów ani dodań do koszyka przy działających kampaniach płatnych.

Od 19 sierpnia cel był jeden: sprzedaż. 73% sesji odbywało się na mobile, 45% wejść zaczynało się na karcie TR70, a sam radar dawał około 95% przychodu przy średnim zamówieniu 316 zł.

• Brak zakupów w GA4, więc kampanie płatne działały bez danych o sprzedaży.
• Wolny pierwszy ekran na telefonie, bo LCP dochodził do 13 s.
• Karta TR70 jako główne wejście: 45% sesji zaczynało się tam, więc musiała odpowiadać na obiekcje przed koszykiem.
• Termin wypadał we wrześniu, przed jesiennym sezonem.

Rozwiązanie: karta TR70 jak landing page i nowy motyw WooCommerce

Zaczęliśmy od audytu UX, UI, dostępności, wydajności, SEO i kodu z 25 ocenionymi znaleziskami. Na tej bazie powstał plan sprzedaży od września 2026 do lutego 2027, a projekt w Figmie objął kartę produktu, home, kontakt, sklep, koszyk, checkout, konto, 404 i blog.

• Projekt w Figmie. Zaczęliśmy od karty produktu, bo tam trafiało 45% wejść. Dziennik decyzji miał zasadę: bez źródła nie ma decyzji.
• Karta TR70 jak landing page. Miała cenę i dostawę wysoko na telefonie. Obok przycisku dodaliśmy opinię, a przy promocjach linię Omnibus o najniższej cenie z 30 dni.
• Układ pod obiekcje. Porządkował informacje o wykrywaniu, baterii, mocowaniu i cenie. Dzięki temu karta produktu prowadziła klienta od decyzji do koszyka.
• Autorski motyw WooCommerce. Zbudowaliśmy go na wp-solo, naszym boilerplate WordPress z komponentami Twig, Vite i warstwą WooCommerce.
• Gotowe wtyczki do standardowych zadań. Przejęły SEO, cache i formularze. Użyliśmy Rank Math, LiteSpeed Cache i Fluent Forms.
• Treści i adresy bez zmian. Zostawiliśmy wszystkie teksty sklepu, adresy URL, tagi śledzące i consent mode. Został też jeden scalony Product schema z BreadcrumbList.
• Wydajność i dostępność. Hero ładuje się od razu, reszta obrazów leniwie. Do tego przyklejony pasek zakupu na telefonie i wybór wariantów z klawiatury.

Start: testy zamówień i wdrożenie bez przestoju

Przed startem przeszliśmy około 60 przypadków zamówień od początku do końca na lokalnym lustrze w 1440 i 390 px oraz 18 na stagingu Hostinger. Płatności sandbox sprawdziły bank mock, BLIK, płatność nieudaną, porzuconą i pay later.

Testy wyłapały dwa błędy motywu: nieświeży pasek darmowej dostawy po zmianie liczby sztuk i wybór wyprzedanego koloru z klawiatury. Wdrożenie odbyło się 4 września od 23:10 do 23:45, bez strony przerwy technicznej i bez ruszania ustawień backendu sklepu.

Przed startem była kopia bazy, a rollback ze starym motywem, starymi wtyczkami i zrzutem bazy został na miesiąc. W pierwszych 20 minutach wyłączyliśmy leniwe ładowanie obrazów LiteSpeed, które podmieniło hero na placeholder i dawało 9 s LCP; po poprawce było 2,3 s.