pesi.pl – nowa wersja strony

Strona firmy, w której pracuję: z Laravela na WordPressa z edytorem bloków, żeby marketing sam publikował wpisy. Lżejsza, krótsza na telefonie i z animowanymi kostkami 3D.

WordPress
motyw blokowy
PHP
Three.js
CSS scroll-snap
bez jQuery

Kod napisał Claude Code – ja planowałem całość, decydowałem o układzie i komponentach i sprawdzałem każdy widok. Wyniki „przed” zmierzone na kopii starej strony z archiwum internetowego.

Zobacz na żywo

70 → 99wydajność strony głównej w Lighthouse na telefonie
2 MB → 37 kBJavaScriptu na stronie głównej na telefonie
18 → 12ekranów telefonu do przewinięcia na stronie głównej
100dostępność, dobre praktyki i SEO w Lighthouse na wszystkich mierzonych stronach

Co zbudowałem

pesi.pl to strona firmy, w której pracuję. Stara wersja działała na Laravelu i każdą zmianę – także każdy wpis na blogu – wklejał programista, a nie marketing. Przepisałem ją na WordPressa z motywem blokowym, żeby marketing mógł sam publikować i łatwiej śledzić zmiany na stronie. Kod napisał Claude Code. Ja przemyślałem całość tak, żeby nie powtórzyć błędów z wersji na Laravelu, decydowałem o układzie i komponentach i sprawdzałem każdy widok. Przeniosłem też realizacje i wszystkie wpisy z bloga tak, żeby zachowały dotychczasowy wygląd.

Najbardziej zależało mi na tym, żeby strona była lekka i nie ciągnęła się w nieskończoność na telefonie – w stopce jest kontakt, więc droga do niej powinna być krótka.

Przed i po

Przeciągnij suwak – po lewej stara strona, po prawej nowa.

Przed · strona na LaraveluPo · strona na WordPressie

Pomiar	Przed	Po
Wydajność w Lighthouse	70	99
JavaScript	2055 kB	37 kB
CSS	58 kB	16 kB
Waga strony	2,6 MB	362 kB
Zapytania	131	47
Total Blocking Time	178 ms	0 ms
Wysokość strony (px)	14 553	10 058

Strona główna na telefonie, mediany z 3 przebiegów Lighthouse. Przed – kopia starej strony z Internet Archive (17.07.2026), wagi bez skryptów archiwum, czasy i oceny orientacyjne. Pomiary sprzed dodania analityki – z Google Tag Managerem strona główna ma w Lighthouse w Chrome 99 (ze zgodami) i 100 (bez zgód).

Rozwiązania w szczegółach

Rzeczy z kodu, które najlepiej pokazują, jak pracuję.

Marketing publikuje sam
Wcześniej każdą zmianę i każdy wpis wklejał ktoś z frontu albo backendu. Teraz wpisy powstają w edytorze bloków, a w artykule można zaznaczyć, kto jest autorem.
Karuzele zamiast długich list
Gridy z wieloma elementami są na telefonie i tablecie karuzelami na CSS scroll-snap. Widać kawałek następnego slajdu, a strona jest krótsza – do stopki z kontaktem jest bliżej.
Kostki 3D, które nie spowalniają
Najpierw wczytuje się zwykłe zdjęcie, a scena Three.js dopiero po załadowaniu strony – tylko na szerszych ekranach i bez ograniczenia ruchu.
Skrypty dopiero wtedy, gdy są potrzebne
reCAPTCHA wczytuje się przy pierwszym kontakcie z formularzem, odtwarzacz YouTube po kliknięciu miniatury, a animacje w menu po najechaniu.

← Wszystkie projekty

Masz projekt do zrobienia?

Albo szukasz kogoś do zespołu? Napisz kilka zdań – odpowiem w ciągu 72 godzin.

Co zbudowałem

Przed i po

Rozwiązania w szczegółach

Marketing publikuje sam

Karuzele zamiast długich list

Kostki 3D, które nie spowalniają

Skrypty dopiero wtedy, gdy są potrzebne

Masz projekt do zrobienia?