Jak porównywaliśmy: ta sama strona główna, ta sama kategoria (Biurka, 418 produktów) i ta sama karta produktu (Biurko komputerowe Iron — Czarne) w obu wersjach sklepu. Czasy z Performance API w Chrome — ta sama sieć, ta sama sesja. Desktop i mobile.
Wydajność
Do tego nasze własne pomiary tej samej karty (Performance API, desktop, ta sama sieć):
Strona w poprzedniej wersji domykała ładowanie po ~5 sekundach — według danych Google/SOASTA przy 5 s prawdopodobieństwo odbicia rośnie o 90% względem 1 s. Deloitte („Milliseconds Make Millions") wyliczył, że samo 0,1 s poprawy daje w retailu średnio +8,4% konwersji. Headless schodzi poniżej pół sekundy, a nawigacja między podstronami działa bez przeładowań (prefetch).
Strona produktu: warianty przy cenie
Badania kart produktu Baymard Institute pokazują, że użytkownicy oczekują wyboru koloru na karcie — warianty rozbite na osobne produkty powodują skakanie tam-i-z-powrotem do listingu, a część kupujących nigdy nie odkrywa pozostałych kolorów.
Konfigurator pod lupą
Yrke sprzedaje meble na wymiar, więc konfigurator to serce tej karty produktu. W starej wersji był to gotowy moduł osadzony w szablonie — technicznie i stylistycznie obcy reszcie sklepu (własne kontrolki, własna typografia).
Co było nie tak (sprawdziliśmy każdy punkt):
- Trzy rozłączne punkty uwagi — przycisk „Skonfiguruj i kup" w buy-boxie, właściwy konfigurator w zakładce niżej i sticky pasek „0/4 wybrane" na dole ekranu. Konfiguracja wymagała skakania między nimi.
- Walidacja przed akcją — sekcja otwierała się z czerwonym komunikatem błędu, mimo że użytkownik nie popełnił żadnego błędu (heurystyka Nielsena #9: komunikat błędu ma odpowiadać na realny błąd).
- Dopłaty widoczne dopiero po wyborze — opcja „120 cm" pokazywała „(+80,00 zł)" dopiero gdy została wybrana, a cena w pasku aktualizowała się z wyczuwalnym opóźnieniem.
- Mobile: konfigurator głęboko w bardzo długiej stronie — strona produktu na telefonie miała ~13 250 px wysokości; do opcji trzeba było dotrzeć przez kilkanaście ekranów scrolla, a fragmenty tekstu wystawały poza ekran („Poszczególne warianty mogą różnić się cen…").
- Niedostępny z klawiatury — rozwijane listy nie były fokusowalne, a po wybraniu wartości fokus lądował w kolejnych opcjach strony zamiast przy przycisku dodania do koszyka — dojście do niego wymagało kilkudziesięciu wciśnięć Tab (szczegóły w sekcji „Dostępność").
Co było OK: sam pomysł paska postępu „0/4 wybrane" — informacja, ile zostało do skompletowania, jest wartościowa i w nowej wersji została zachowana (licznik „0 z 4" w nagłówku konfiguratora).
W nowej wersji konfigurator stoi w kolumnie zakupowej obok galerii, każda opcja ma dopłatę przy sobie zanim ją wybierzesz, pole „Cena za szt." przelicza się natychmiast, a długie listy mają wyszukiwarkę. Według badań Baymard ~48% porzucających koszyk wskazuje „koszty ujawnione zbyt późno" jako powód — tu żadna dopłata nie jest niespodzianką.
Sam flow konfiguracji też nie jest przypadkowy. Pierwsza wymagana sekcja (szerokość) jest domyślnie otwarta — klient od razu widzi konkretne wartości i jawne dopłaty, bez klikania w czarną skrzynkę „Wybierz", a otwarta lista naturalnie zaprasza do rozpoczęcia konfiguracji (zaczęte zadanie chętniej się kończy). Po dokonaniu wyboru automatycznie otwiera się kolejna wymagana sekcja — akordeon prowadzi przez obowiązkowe kroki jak kreator, aż licznik w nagłówku dojdzie do „4 z 4". Listy są przy tym wewnętrznie przewijane, więc otwarta sekcja nie rozpycha strony. To wzorzec „default to the next action": każdy kupujący i tak musi przejść te cztery kroki — konfigurator po prostu wykonuje pierwszy ruch za niego.
Jeden kolor akcji
Na zrzutach wyżej widać jeszcze jedną zmianę: w starej wersji przycisk akcji był czarny — ten sam kolor co nagłówki, pasek menu, ceny i dziesiątki innych elementów. Przycisk „Skonfiguruj i kup" nie wyróżniał się niczym poza rozmiarem. W nowej wersji kolor akcji to firmowy żółty — zarezerwowany dla głównego CTA, z jedną akcją primary na widoku („Wybierz wszystkie opcje" w buy-boxie, „Pokaż 418 produktów" w filtrach, „Sprawdź ofertę" w hero).
Skąd ta zasada? Hierarchia przycisków (primary / secondary / tertiary) z jedną akcją o najwyższym priorytecie wizualnym na ekranie to standard dojrzałych design systemów — Material Design opisuje to wprost jako poziomy „emphasis", a NN/g jako hierarchię wizualną: wzrok ma trafiać najpierw tam, gdzie jest najważniejsza akcja. Uczciwie: to wytyczna projektowa potwierdzona praktyką, nie wynik badania laboratoryjnego. Ale praktyka jest jednoznaczna — najwięksi gracze e-commerce robią dokładnie to samo: Amazon ma żółte „Dodaj do koszyka", Allegro pomarańczowe „Kupuję", Media Expert żółte CTA na granacie, MediaMarkt czerwone na czerni. Każdy z nich trzyma jeden wyrazisty kolor wyłącznie dla akcji zakupowej.
Wyszukiwarka: z nakładki do natywnej integracji
Yrke korzystało z silników wyszukiwania Witly (tekst, AI, szukanie zdjęciem, głosowe) już przed migracją — ale jako widget na szablonie. Tak działa każde zewnętrzne rozwiązanie wyszukiwania dodawane do gotowego sklepu, również nasze: otwiera własną warstwę nad stroną, z osobnym interfejsem, własnymi filtrami i osobnym „światem". Po przejściu na headless te same silniki są wpięte natywnie: podpowiedzi w polu w nagłówku, wyniki jako normalna strona sklepu z tymi samymi filtrami, sortowaniem i kartami produktów co reszta storefrontu. Jeden spójny interfejs zamiast dwóch.
Opinie: jedna liczba zamiast trzech
Na starej karcie produktu klient widział trzy różne liczby: u góry „4.89 (Oceny: 703, Recenzje: 3)", a na dole widget z „5.0 / 5 opinii" — w tym opinie oznaczone „dotyczy podobnego produktu". To celowe zachowanie tego typu widgetów (przy małej liczbie opinii dopełniają sekcję recenzjami pokrewnych produktów i zbiorczą oceną), ale z perspektywy klienta trudno powiedzieć, co właściwie ocenia te 703 czy 5 osób. Heurystyka spójności (Nielsen #4) jest tu bezlitosna — sprzeczne liczby przy jednym produkcie osłabiają zaufanie do wszystkich.
W nowej wersji ocena dotyczy dokładnie tego produktu i wszędzie jest taka sama. Do tego: badge „Zakup potwierdzony", filtr „tylko od kupujących", sortowanie po pomocności i głosowanie 👍/👎 — standardowe rekomendacje Baymard dla sekcji opinii. Według Spiegel Research Center oznaczenie „zweryfikowany zakup" istotnie zwiększa zaufanie do recenzji. Pod opiniami doszła też sekcja pytań i odpowiedzi (Q&A), której wcześniej nie było.
Kategoria: filtry, które filtrują
Trzy wytyczne z badań filtrowania Baymard w jednym panelu: liczba wyników widoczna przed zastosowaniem filtra („Pokaż 418 produktów"), suwak cen zawsze w parze z polami do wpisania kwoty i wizualizacja rozkładu cen. A filtry bez mocy rozróżniającej po prostu zniknęły — każda zbędna opcja wydłuża decyzję (prawo Hicka).
Strona główna
Tekst w grafice to pusty obrazek dla czytnika ekranu i dla Google, a na telefonie zmniejsza się do nieczytelności — WCAG 2.1 mówi o tym wprost (kryterium 1.4.5 „Images of Text"). Tekst HTML renderuje się z pierwszym paintem (lepsze LCP), łamie się responsywnie i jest indeksowalny. Efekt operacyjny: zmiana promocji to edycja tekstu, nie zlecenie dla grafika.
Dostępność: co konkretnie zmierzyliśmy
Nie twierdzimy, że sklep jest „w pełni dostępny" — to wymaga pełnego audytu. Ale kilka rzeczy sprawdziliśmy automatycznie na tej samej karcie produktu, przed i po:
| Sprawdzenie | Przed (szablon) | Po (headless) |
|---|---|---|
| Konfigurator z klawiatury | Nie — kontrolki niefokusowalne (element niestandardowy, rola „textbox", brak tabindex i aria-expanded) | Tak — natywne <button> z aria-expanded, fokusowalne |
| Przyciski bez dostępnej nazwy | 3 z 14 | 0 z 428 |
| Pola formularzy bez etykiety | 2 z 14 | 0 |
| Tekst w bannerach | Wypalony w grafice (niezgodne z WCAG 1.4.5) | Prawdziwy tekst HTML |
| Obrazy bez tekstu alternatywnego | 13 z 54 | 0 |
Najważniejsza zmiana: klient korzystający z klawiatury lub czytnika ekranu w starej wersji nie był w stanie skonfigurować i kupić mebla — kontrolki konfiguratora nie przyjmowały fokusu, a po dokonaniu wyboru fokus wędrował przez kolejne opcje strony zamiast do przycisku zakupu. Teraz cała ścieżka działa z klawiatury. Kierunek potwierdza też zewnętrzny pomiar: wynik „Ułatwienia dostępu" w Google PageSpeed Insights wzrósł z 77 do 97.
Gotowość na agentów AI
Coraz większa część ruchu w e-commerce to nie ludzie, tylko agenci AI — asystenci, którzy w imieniu klienta wyszukują, porównują i niedługo będą kupować produkty. Cloudflare udostępnia narzędzie isitagentready.com, które sprawdza, na ile sklep jest na to gotowy: od robots.txt i sitemap, przez treść czytelną dla maszyn (Markdown), po nowe standardy — MCP, Agent Skills i agentic commerce.
Headless daje tu pełną kontrolę: własny robots.txt, sitemap, treść serwowana agentom w Markdown i endpointy MCP — w szablonie żaden z tych elementów nie był w naszych rękach. Niski wynik starej wersji to nie zaniedbanie — te standardy są na tyle świeże, że gotowe szablony sklepowe jeszcze ich nie wspierają.
Uczciwie o pozostałych punktach skanera: wdrożyliśmy wszystko, co ma dziś sens dla sklepu internetowego. Reszta rekomendacji to standardy na etapie draftów IETF lub rozwiązania bez zastosowania w polskim e-commerce — DNS-AID (szkic specyfikacji), OAuth/OIDC discovery (dotyczy chronionych API, których sklep nie wystawia publicznie) czy protokoły płatności agentowych x402/MPP/UCP (eksperymentalne płatności HTTP, częściowo kryptowalutowe — płatności w sklepie obsługuje checkout Shopera). Wdrażanie ich dziś byłoby sztucznym pompowaniem wyniku, nie wartością dla klientów.
Co było dobre i zostało bez zmian
Żeby ta lista była wiarygodna, musi działać w obie strony — nie wszystko w starym sklepie było złe:
- Cała obsługa zamówień zostaje w Shoper — headless podmienia wyłącznie warstwę sklepu, którą widzi klient. Zamówienia, płatności, magazyn i panel administracyjny działają dalej w Shoper (checkout by Shoper) — migracja nie zmienia codziennej pracy obsługi sklepu.
- Buy-box z kompletem informacji — gwarancja 10 lat, darmowa dostawa z wniesieniem, „Produkcja od 3 dni roboczych", wzorniki płyt, zakup dla instytucji. To było dobre na yrke.pl i zostało przeniesione 1:1.
- Newsletter z rabatem na start — działał wcześniej, działa teraz. Bez zmian.
- Silniki wyszukiwania — te same co przed migracją (Witly). Zmieniła się integracja, nie technologia.
- Pasek postępu konfiguracji — pomysł „0/4 wybrane" ze starego konfiguratora przetrwał w nowym jako licznik „0 z 4".
Podsumowanie
Headless to nie „ładniejszy szablon". To możliwość zaprojektowania sklepu pod konkretny biznes: producent mebli na wymiar dostał konfigurator z dopłatami widocznymi przed wyborem i obsługą klawiatury, warianty wróciły na kartę produktu, wyszukiwarka przestała być nakładką, a całość ładuje się 15× szybciej. I co ważne dla każdego, kto rozważa taką migrację: silnik sklepu zostaje nietknięty — zamówienia, płatności i panel dalej działają w Shoper, wymienia się tylko front. Wszystko powyżej można obejrzeć na żywo na yrke.pl.
Prowadzisz sklep na Shoper, WooCommerce albo PrestaShop? Napisz do nas — pokażemy Ci, jak wyglądałby na headless storefront na Twoim własnym katalogu.
Źródła
- Google PageSpeed Insights — narzędzie pomiaru (raporty z 11.06.2026)
pagespeed.web.dev - Cloudflare — Is Your Site Agent-Ready? (skan z 11.06.2026)
isitagentready.com - Think with Google / SOASTA — Mobile page speed: new industry benchmarks (2017)
thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/ - Deloitte — Milliseconds Make Millions (2020)
deloitte.com/ie/en/services/consulting/research/milliseconds-make-millions.html - web.dev — Core Web Vitals
web.dev/vitals - Baymard Institute — E-commerce UX Research (karty produktu, filtrowanie, opinie)
baymard.com/research - Baymard Institute — Cart Abandonment Rate Statistics
baymard.com/lists/cart-abandonment-rate - Nielsen Norman Group — 10 Usability Heuristics for User Interface Design
nngroup.com/articles/ten-usability-heuristics/ - Nielsen Norman Group — Visual Hierarchy in UX
nngroup.com/articles/visual-hierarchy-ux-definition/ - Material Design 3 — Buttons: hierarchy and emphasis
m3.material.io/components/buttons/guidelines - WCAG 2.1 — Success Criterion 1.4.5: Images of Text
w3.org/WAI/WCAG21/Understanding/images-of-text.html - Spiegel Research Center (Northwestern) — How Online Reviews Influence Sales (2017)
spiegel.medill.northwestern.edu/how-online-reviews-influence-sales/