Jak zbudowaliśmy digitalstudio.world: osiem języków, bez frameworka, bez śledzenia

Najtrudniejszy brief, jaki mogliśmy napisać

Strona studia ma dokładnie jedno uczciwe zadanie: udowodnić, że studio potrafi wykonać pracę. Rzemiosło może deklarować każdy w liście usług. Potraktowaliśmy więc własną stronę jak projekt klienta z najbardziej wymagającym briefem, jaki kiedykolwiek napisaliśmy - sterowana scrollem podróż 3D, która wygląda premium, maluje się w ułamku sekundy, mówi ośmioma językami od pierwszej klatki, pokazuje prawdziwe ceny i szanuje odwiedzającego na tyle, by go nie śledzić.

Ten wpis wyjaśnia, jak to zbudowano. Jak wszystko na tym blogu - jest prawdziwe i weryfikowalne. Dowodem jest strona, na której to Państwo czytają.

Bez frameworka, celowo

Każda strona digitalstudio.world to samodzielny plik HTML. Nie ma frameworka, bundlera ani routera po stronie klienta. Podróż strony głównej - kula cząsteczek, która podczas scrollowania przechodzi przez falę w galaktykę - działa na three.js z biblioteką płynnego scrolla, i to cała lista zależności.

To nie nostalgia, to kontrola. Gdy nie wysyła się niczego nieużywanego, każda milisekunda ładowania należy do nas. Potok WebGL jest stopniowany według urządzenia: telefony dostają lżejsze pole cząsteczek, niższą rozdzielczość renderowania i zmniejszoną poświatę, dzięki czemu ta sama podróż pozostaje płynna na średniej klasy telefonie. Pętla animacji zatrzymuje się, gdy karta jest ukryta, i oddaje pamięć GPU, gdy Państwo odchodzą.

Osiem języków bez błysku angielskiego

Większość wielojęzycznych stron tłumaczy w przeglądarce: strona ładuje się po angielsku, budzi się skrypt i tekst migocze na polski. Dla studia sprzedającego lokalizację ten migot to przyznanie się do porażki.

Zbudowaliśmy to odwrotnie. URL jest językiem: /de/, /fr/, /pl/. Mały skrypt budujący czyta jedno angielskie źródło i jeden słownik na język, po czym generuje 56 w pełni zlokalizowanych stron statycznych - nagłówki, metadane, dane strukturalne, nawet walutę. Odwiedzający z Polski widzi ceny w złotych w pierwszej namalowanej klatce, bo ta klatka została tak zbudowana, zanim opuściła serwer.

• Stare linki z ?lang= są przekierowywane na edge'u, zanim w przeglądarce uruchomi się jakikolwiek kod.
• Zapisana preferencja językowa kieruje Państwa do własnego języka od razu - nie ma angielskiej klatki, która mogłaby mignąć.
• Strony 404 i strona podziękowania briefu istnieją w każdym języku.
• Każda strona ma pełny klaster hreflang i własny kanoniczny URL, więc każdy język pozycjonuje się samodzielnie.

Build odmawia współpracy z błędami: skrypt strażnika sprawdza każdą stronę przed generacją i przerywa build, jeśli odwołanie zepsułoby się po skopiowaniu do folderu języka - podając plik, linię i poprawkę. Nudna, mechaniczna dyscyplina - dokładnie to, czego potrzebuje lokalizacja.

Szybkość jako decyzja projektowa

Szybkość nie jest dla nas wynikiem Lighthouse; jest materiałem projektowym. Pierwszy paint strony mieści się w naszych pomiarach laboratoryjnych między około 150 a 400 milisekund, na śledzonych trasach, w każdym języku - a skumulowane przesunięcie layoutu wynosi dokładnie zero, bo ceny i etykiety są renderowane w HTML, a nie wstrzykiwane później.

Mało efektowna lista, dzięki której to prawda: własnoręcznie hostowane fonty ograniczone do potrzebnego zakresu, statyczne zasoby z fingerprintem w ścieżce i rocznym niezmiennym cache, HTML rewalidowany przy każdym żądaniu, by deploy był widoczny natychmiast, oraz jedna mała funkcja edge - formularz briefu - jako jedyna ruchoma część całej strony.

Uwaga o uczciwości: to pomiary laboratoryjne, z ograniczonym CPU i zimnymi cache. Nie publikujemy danych z pola z prostego powodu - ich zbieranie oznaczałoby śledzenie Państwa, a tego nie robimy.

Nic Państwa nie śledzi

Żadnej analityki. Żadnych cookies reklamowych. Żadnego fingerprintingu. Jedyne, co ta strona zapisuje na Państwa urządzeniu, to wybór języka, a informująca o tym notka to jedyny banner, jaki tu Państwo zobaczą. Content security policy jest zablokowana na naszym własnym originie - strona odmówi załadowania obcych skryptów, nawet gdyby kiedyś któryś wstrzyknięto.

Testujemy w laboratorium zamiast mierzyć odwiedzających. Kosztuje nas to dane. Uważamy, że kupuje coś cenniejszego.

Co Państwo na tym zyskują

Wszystko powyżej to ta sama architektura, którą sprzedajemy. Trójjęzyczna struktura wyszukiwania dla Doggo Paradiso, 21-dniowy sprint od marki do produkcji dla Maison Astral, wpis sklepowy dostarczony do 175 krajów dla Water Sommelier - wszystko składa się z opisanych tu elementów: strony static-first, lokalizacja poprawna od pierwszej klatki i szybkość traktowana jako część projektu.

Nasza strona to pierwszy eksponat naszego portfolio. Dowód trzymają Państwo w rękach.