Dwa serwisy producenta, dwa osobne silniki
Astar to polski producent urządzeń do fizjoterapii z Bielska-Białej, na rynku od 1995 roku. Elektroterapia, magnetoterapia, laseroterapia, terapia TECAR, ultradźwięki, fala uderzeniowa, terapia podciśnieniowa i akcesoria. Sieć dystrybutorów obejmuje kilkadziesiąt krajów, a strona jest dla nich i dla fizjoterapeutów podstawowym źródłem kart produktów, specyfikacji i instrukcji obsługi.
Firma ma dwa serwisy: astar.eu na rynki zagraniczne i astar.pl na rynek polski. Oba działały w ten sam sposób: frontend w Next.js (React) renderujący każdą stronę na żądanie i osobny WordPress w roli zaplecza, z którego frontend pobierał treść przez API. Dwie warstwy i dwa miejsca do utrzymania. Przenieśliśmy oba serwisy na klasyczny WordPress z autorskim motywem, jeden po drugim.
Audyt: co faktycznie było w środku
Przed pierwszą linią kodu przeszliśmy cały serwis astar.eu: sitemapy wszystkich wersji językowych, zaplecze WordPressa, pomiary Lighthouse i zrzuty jedenastu stron w wersji mobilnej i desktopowej. Audyt zmienił skalę projektu.
Zamiast kilkunastu produktów było ich 58, do tego 243 aktualności, 80 krajów na mapie dystrybutorów, 27 urządzeń z instrukcjami w ponad dwudziestu językach i 1633 adresy rozsiane po trzech wersjach językowych. Każdy z nich miał już swoją historię w Google.
Pomiar wydajności wypadł słabo: 59 punktów na 100 na telefonie, główna treść po 9,1 sekundy, odpowiedź serwera po 1,15 sekundy i 6,4 MB danych do pobrania na samej stronie głównej.
Audyt dał też odkrycie, które ustawiło cały projekt. Zaplecze starej strony udostępniało publicznie pełne dane wszystkich treści: produkty, strony, kraje dystrybucji i aktualności, zbudowane na jednym silniku sekcji. Zamiast przepisywać serwis ręcznie, napisaliśmy skrypty importu i jeden renderer obsługujący blisko trzydzieści typów sekcji.
Frontend Next.js i osobne zaplecze WordPress
Wydajność 59/100, główna treść po 9,1 s
Odpowiedź serwera 1,15 s
6,4 MB na stronie głównej, obrazy bez WebP
Zgoda na cookies bez Consent Mode v2
Trzy wersje językowe
Część treści edytowalna tylko przez programistę
Jeden WordPress z autorskim motywem
SEO 92/100, zero przesunięć układu
Odpowiedź serwera 50 ms, cache na serwerze
801 KB na stronie głównej, 11 954 obrazy w WebP
Własny mechanizm zgody z Consent Mode v2
Cztery wersje językowe na subdomenach
253 sekcje stron edytowalne w panelu, w każdym języku
Przebieg: najpierw astar.eu, potem astar.pl
Kolejność była decyzją, nie przypadkiem. Serwis zagraniczny jest bardziej złożony, bo ma kilka języków. Motyw zbudowany pod niego stał się punktem wyjścia dla wersji polskiej, a przełącznik języków na astar.pl od pierwszego dnia kierował na nowe astar.eu.
Audyt i mapa adresów
Inwentaryzacja 1633 adresów: 281 zostaje bez zmian, 1050 dostaje przekierowanie 301 na nowy odpowiednik, 302 śmieciowe adresy dostają kod 410, żeby Google je zapomniał
Motyw i import danych
Autorski motyw z odświeżonym wyglądem, przy zachowaniu treści, adresów i zdjęć 1:1. Skrypty importu przeniosły produkty z 610 terminami specyfikacji, strony, mapę dystrybutorów i aktualności
Cztery języki
Hiszpański i czeski z istniejących zapleczy, portugalski jako nowa wersja z tłumaczeń dostarczonych przez klienta. Sześć rund uwag zespołu Astar wdrożonych przed uruchomieniem
Uruchomienie astar.eu
Wdrożenie na serwer klienta, przepięcie domen, certyfikaty dla sześciu hostów, test wszystkich adresów z mapy i przeniesienie mediów na nowy serwer
astar.pl na tym samym fundamencie
Osobna kopia motywu rozwijana niezależnie, import 79 produktów i całej treści, funkcje, których serwis zagraniczny nie potrzebował, i instalacja na serwerze produkcyjnym
Opieka po starcie
Zgłoszenia zespołu klienta obsługiwane na bieżąco: nowe funkcje w panelu, poprawki na wersjach językowych, porządek na serwerze
astar.eu: cztery języki w jednej instalacji
Wielojęzyczność zrobiliśmy na WordPress Multisite, czyli jednej instalacji z osobną witryną dla każdego języka. Dokładnie tak działało stare zaplecze, więc dane przeszły bez przekształceń, a każdy zespół krajowy dostał własny panel, w którym nie widzi treści innych rynków. Wersje językowe działają na subdomenach, jak na poprzedniej stronie.
- Wersja angielska na astar.eu, hiszpańska, czeska i portugalska na własnych subdomenach
- Zlokalizowane adresy podstron, na przykład „o firmie" to inny adres po hiszpańsku i inny po czesku
- Znaczniki hreflang emitowane tylko wtedy, gdy odpowiednik naprawdę istnieje w danym języku, żeby nie generować błędów w Search Console
- Kontenery Google Tag Manager przypisane do rynków i poprawny język strony w kodzie każdej wersji
- Interfejs motywu przetłumaczony plikami językowymi, bez tekstów zaszytych w szablonach
- Komunikat dla profesjonalistów wymagany przy wyrobach medycznych, w każdym języku
Wersja portugalska weszła w trakcie projektu, poza pierwotnym zakresem. Dzięki architekturze dołożenie czwartego języka oznaczało sklonowanie struktury 58 produktów i 33 stron, a potem podmianę treści, a nie budowę od nowa.
Karta produktu 1:1 z poprzednią stroną
Karta urządzenia to serce serwisu: slider zdjęć i filmów, wizualizacja 360 stopni, tabela specyfikacji, produkty powiązane, galeria. Specyfikacje opierają się na 551 terminach technicznych. Po imporcie porównaliśmy automatem wszystkie 146 kart produktów w trzech językach z żywą stroną, wiersz po wierszu. Każda różnica była wyjaśniona albo celowa.
Przekierowania i SEO bez strat
Serwis producenta z wieloletnią historią w Google nie może po migracji zgubić adresów. Ustaliliśmy jedną zasadę: wygląd wolno odświeżyć, adresy, tytuły, opisy i zdjęcia zostają 1:1.
Po uruchomieniu skrypt sprawdził każdy z 1633 adresów z mapy: czy zostaje, przekierowuje czy znika zgodnie z planem. Pierwszy przebieg pokazał ponad tysiąc rozbieżności. Po poprawkach reguł i dociągnięciu brakującej treści wynik końcowy: zero niewyjaśnionych błędów 404, a 237 świadomych odstępstw od mapy opisanych w dokumentacji.
- Tytuły i opisy meta przeniesione z pól SEO starej strony, bez wtyczki typu Yoast
- Dane strukturalne JSON-LD: organizacja, witryna i ścieżka okruszków, osobna mapa witryny i robots.txt dla każdej wersji językowej
- Reguły przekierowań bramkowane domeną, bo słowo „produkty" to stary polski adres na wersji angielskiej, ale prawdziwy adres na wersji czeskiej
- Profile członków zespołu, które na starej stronie zwracały błąd serwera, kierują teraz na stronę zespołu
- Pełny audyt po starcie: 733 strony ze wszystkich map witryn i 6041 plików z wyrenderowanego kodu, wszystkie z odpowiedzią 200
Strona niezależna od starego serwera
Zdjęcia produktów i aktualności były serwowane ze starego zaplecza. Żeby nie zmieniać ich adresów, przenieśliśmy na nowy serwer 13,8 tysiąca plików mediów (3,1 GB) i podpięliśmy starą domenę zaplecza pod nową instalację. Wizualizacje 360 stopni wymagały osobnego podejścia: rozszyfrowaliśmy format kafelków z odtwarzacza i pobraliśmy komplet 14 293 kafli bez ani jednego błędu. Adresy obrazów w kodzie stron nie zmieniły się ani o znak, a strona przestała zależeć od starej infrastruktury.
Wydajność
Najwięcej dała zmiana architektury: jeden serwer zamiast dwóch warstw i cache po stronie serwera. Resztę zrobiła praca nad obrazami i krytyczną ścieżką ładowania.
- 11 954 obrazy przekonwertowane do WebP bez wtyczki, serwowane tylko przeglądarkom, które je obsługują, pod niezmienionymi adresami
- Główne zdjęcie strony zeszło z 740 KB w PNG do 16 KB w WebP
- Mapa i slidery ładowane dopiero, gdy są potrzebne, biblioteka map trzymana lokalnie
- Wstępne ładowanie fontów, wymiary obrazów w kodzie, responsywne warianty zdjęć
Efekt na telefonie: odpowiedź serwera z 1,15 sekundy do 50 milisekund, waga strony głównej z 6,4 MB do 801 KB, wynik SEO 92 na 100 i zero przesunięć układu.
Panel dla zespołu Astar
Na starej stronie część treści dało się zmienić tylko przez programistę. Założenie projektu było odwrotne: zespół marketingu i eksportu zmienia wszystko sam, w każdym języku.
- Strona główna, kategorie terapii i wszystkie strony firmowe zbudowane z sekcji ACF Pro, które redaktor dodaje, przestawia i edytuje w panelu
- Ustawienia globalne w jednym miejscu: dane kontaktowe, certyfikaty, nagrody, media społecznościowe, stopka
- Panel administracyjny po polsku, choć strona jest angielska, z pozycjami Astar na górze menu
- Instrukcja redaktora wbudowana w panel, z linkami prowadzącymi wprost do właściwych ekranów, oraz wersja PDF z przykładami krok po kroku
- Mapa dystrybutorów edytowalna w panelu: kraj, współrzędne, firmy i dane kontaktowe
Instrukcje obsługi w 27 urządzeniach i ponad 20 językach
Formularz instrukcji to jedna z najczęściej używanych funkcji serwisu. Użytkownik wybiera urządzenie i język, a dostaje e-mail z bezpiecznym linkiem ważnym 48 godzin. Po uwagach zespołu klienta przebudowaliśmy cały mechanizm.
- 271 plików PDF przeniesionych do biblioteki mediów, redakcja wgrywa nową instrukcję raz i działa ona we wszystkich czterech wersjach językowych
- Wybór języka zawężony do wersji, które istnieją dla danego urządzenia
- Mail zawiera link do każdego pliku, także do opisu technicznego, który wcześniej nigdy nie docierał do klienta
- Porównanie danych przed i po wyłapało cztery rozbieżności, między innymi instrukcję w jednym języku podpiętą pod niewłaściwe urządzenie
- Statystyki pobrań w panelu: urządzenia, języki, kraje, konwersja z zamówienia do pobrania, eksport do Excela, bez zapisywania adresów IP i e-maili
Zgoda na cookies i dostępność
Zamiast zewnętrznej wtyczki powstał własny mechanizm zgody z Google Consent Mode v2: domyślna odmowa ustawiana przed załadowaniem kontenera pomiarowego, trzy kategorie zgód, teksty w każdym języku. Motyw spełnia wymagania WCAG 2.2: widoczny fokus, cele dotykowe odpowiedniej wielkości, okna dialogowe dostępne dla czytników ekranu, ograniczenie animacji na życzenie użytkownika. Czerwień marki skorygowaliśmy tak, by spełniała kontrast AA.
astar.pl: ta sama baza, inne wymagania
Serwis polski wyglądał na prostszy, bo ma jeden język. W praktyce miał więcej treści i więcej funkcji. Motyw z astar.eu stał się punktem wyjścia, ale jako osobna kopia rozwijana niezależnie. Kosztem jest poprawianie wspólnych błędów dwa razy, zyskiem zero ryzyka dla działającego już serwisu zagranicznego.
Skrypt importu przeniósł z zaplecza 79 produktów, 154 aktualności, 56 stron, 27 urządzeń z instrukcjami, zespół, autoryzowane serwisy, salony i slidery. Dane operacyjne, jak ponad dwa tysiące logów zamówień instrukcji, świadomie zostały w starym systemie.
astar.pl używał adresów w rodzaju /produkty, a wersję /produkty/ przekierowywał. WordPress domyślnie robi odwrotnie. Rozstrzygnęliśmy to pierwszego dnia, zanim powstał jakikolwiek szablon, i konsekwentnie przenieśliśmy do canonicali, mapy witryny, menu i linków wewnętrznych. Dzięki temu mapa przekierowań dla 79 produktów i 54 stron nie potrzebowała ani jednej indywidualnej reguły.
Funkcje dla serwisu i sprzedaży w Polsce
- Konfigurator „Sprawdź usterkę": numer seryjny walidowany wzorcem dla każdej linii produktowej, drzewo objawów i przyczyn, cztery typy wyniku od samodzielnej naprawy po serwis gwarancyjny, automatyczne uzupełnienie formularza serwisowego i limit prób chroniący przed odgadywaniem numerów
- Porównywarka produktów, wspólna z astar.eu, z zestawieniem parametrów do czterech urządzeń obok siebie
- Formularz zgłoszeń sygnalistów z możliwością zgłoszenia anonimowego i załącznikiem, bez zbędnych danych osobowych
- Interaktywna mapa Polski z podziałem na 16 województw, osobno dla autoryzowanych serwisów i dla opiekunów handlowych
- Statystyki pobrań instrukcji i edytowalna mapa dystrybutorów, tak jak na astar.eu
Dane sprawdzone, a nie założone
Pierwsze uwagi zespołu Astar dotyczyły parametrów i wyposażenia na kartach produktów. Zamiast poprawiać karty pojedynczo, znaleźliśmy jedną przyczynę wielu objawów: konwerter pomylił identyfikatory ze starego zaplecza z lokalnymi. Po poprawce 78 z 79 produktów okazało się identycznych ze źródłem, a jedyna różnica wynikała z danych usuniętych w samym starym systemie. Na koniec porównaliśmy specyfikacje z żywą stroną automatem: 79 na 79 zgodnych. Przed instalacją motyw przeszedł pełny przegląd kodu, który wyłapał i zamknął dziesięć błędów, w tym ochronę konfiguratora, która za CDN blokowałaby wszystkich użytkowników naraz.
Nowa astar.pl stoi na serwerze produkcyjnym klienta i przeszła weryfikację wszystkich adresów, przekierowań i formularzy. Do pełnego uruchomienia zostaje przepięcie domeny po stronie klienta.
Po uruchomieniu
Projekt nie skończył się w dniu przepięcia domeny. Zgłoszenia z zespołu Astar trafiały do nas mailem i komunikatorem, a każde kończyło się poprawką na produkcji i wpisem w dokumentacji.
- Wgrywanie instrukcji z panelu: limit plików zwiększony z 1,5 MB do 64 MB, sprawdzony realnym uploadem
- Zapełnione konto hostingowe: identyczne pliki wersji językowych zdeduplikowane, zajętość spadła z 5,3 GB do 2,4 GB, wgrywanie i cache wróciły bez dokupowania miejsca
- Zakładki i linki prowadzące na 404 w wersji hiszpańskiej i czeskiej: jedna wspólna funkcja do budowania zlokalizowanych adresów, sprawdzona na 82 linkach
- Zgoda na przetwarzanie danych w formularzach wskazywała nieistniejącą stronę: poprawione w czterech formularzach na czterech wersjach językowych
Stack technologiczny
WordPress Multisite
PHP 8.4
Autorski motyw blokowy
ACF Pro
Contact Form 7
REST API
WP-CLI
Leaflet
OpenStreetMap
LiteSpeed Cache
WebP
Google Tag Manager
Google Consent Mode v2
Schema.org JSON-LD
Wordfence
Docker
Rezultaty
Czego ten projekt uczy
Migracja serwisu producenta to przede wszystkim praca na danych, nie na wyglądzie. Nowy motyw był najprostszą częścią. Trudne było to, czego nie widać: 1633 adresy z historią w Google, specyfikacje oparte na setkach terminów, instrukcje w kilkudziesięciu kombinacjach urządzenia i języka, media rozsiane po starym zapleczu.
Dlatego każdy etap kończył się testem, a nie deklaracją. Mapa adresów sprawdzona skryptem na produkcji. Specyfikacje porównane z żywą stroną wiersz po wierszu. Instrukcje porównane przed i po zmianie, plik po pliku. Dzięki temu drugi serwis powstał na sprawdzonym fundamencie, a błędy wyłapane przy pierwszym nie powtórzyły się przy drugim.
