Jak zbudowana jest ta strona

Stack i dlaczego taki

Strona działa na Astro w trybie serwerowym, z PocketBase jako bazą i logowaniem, całość w Dockerze za proxy. Astro domyślnie wysyła do przeglądarki zero JavaScriptu i dokłada go tylko tam, gdzie jest potrzebny - dla strony firmowej to znacznie lepszy punkt startowy niż ciężki framework, w którym każdy tekst renderuje się skryptem.

PocketBase odpowiada za konta, panel klienta, wiadomości i pliki. To jeden plik binarny z bazą SQLite - żadnego osobnego serwera bazodanowego do utrzymania. Przy skali jednoosobowej działalności to zaleta, nie kompromis.

Co realnie wpływało na szybkość

Mierzyłem w PageSpeed Insights i poprawiałem po kolei to, co pokazywały dane, a nie to, co wydawało mi się problemem. Trzy zmiany dały najwięcej.

• Ekran ładowania (preloader) zasłaniał stronę przez około dwie sekundy, a jego pierwsza klatka była czarna - a pustej klatki Lighthouse nie liczy jako pojawienia się treści. Usunięcie go na telefonach obniżyło Speed Index z 7,1 s do 3,6 s.
• Animacja wejścia nagłówka działała w JavaScripcie. Tekst malował się szybko, po czym skrypt ukrywał go i wprowadzał animacją - przez co przeglądarka liczyła dopiero to późniejsze wyświetlenie. Przeniesienie animacji do CSS uwolniło treść od czekania na skrypt.
• Obrazy i czcionki: logo okazało się plikiem PNG opakowanym w SVG (151 KB), a czcionki były pobierane jako cztery osobne grubości. Konwersja do WebP i przejście na czcionki zmienne to razem około 570 KB mniej do pobrania.

Wyniki pomiaru

Ostatni audyt Lighthouse 13.4.1 dla strony głównej, 1 sierpnia 2026. Wersja mobilna jest mierzona na emulacji Moto G Power przy spowolnieniu do 4G - to celowo słabszy sprzęt niż przeciętny telefon, więc wynik nie jest naciągnięty.

• Komputer: wydajność 99, dostępność 100, sprawdzone metody 100, SEO 100. Największy element pojawia się po 0,8 s, wątek główny nie jest zablokowany ani przez chwilę (TBT 0 ms), a układ nie drgnie o piksel (CLS 0).
• Telefon: wydajność 83, dostępność 100, sprawdzone metody 100, SEO 100. Pierwsza treść po 2,8 s, największy element po 3,9 s, TBT 0 ms, CLS 0,053 - poniżej progu 0,1, od którego Google uznaje przeskoki układu za odczuwalne.
• Przeglądanie agentowe: 3/3 w obu wersjach - to nowa kategoria Lighthouse sprawdzająca, czy z treści strony potrafi skorzystać asystent AI, a nie tylko człowiek.

Dlaczego telefon ma 83, a nie 99

Nie ukrywam tej różnicy, bo dobrze pokazuje, czym naprawdę jest ocena punktowa. Cały dystans między jedną liczbą a drugą robi czas wczytania na wolnym łączu: te same pliki, ten sam kod, tylko czterokrotnie wolniejsze pobieranie i słabszy procesor. Wskaźniki zależne od jakości samego kodu - zero blokowania wątku i praktycznie zerowe przeskoki układu - są na telefonie tak samo dobre jak na komputerze.

Dalsze podnoszenie tej liczby oznaczałoby wycinanie rzeczy, które widzi i docenia człowiek. Wolę uczciwe 83 z płynną stroną niż 95 okupione usunięciem animacji i grafik.

Warto też wiedzieć, że wynik mobilny potrafi się wahać o kilka punktów między kolejnymi pomiarami tej samej strony - Lighthouse symuluje wolne łącze, a symulacja nigdy nie wypada dwa razy identycznie. Dlatego patrzę na trend i na pojedyncze wskaźniki, a nie na jedną liczbę z jednego uruchomienia.

Dostępność i prywatność

Wynik 100/100 w audycie dostępności w praktyce oznacza kontrast tekstu powyżej wymaganego progu, obsługę samą klawiaturą z widocznym obrysem zaznaczenia, link „przejdź do treści" i linki rozpoznawalne nie tylko po kolorze, ale też po podkreśleniu.

Czcionki są hostowane na własnym serwerze, więc adres IP odwiedzającego nie trafia do zewnętrznego dostawcy. Nie ma tu Google Analytics ani żadnego innego narzędzia śledzącego - stąd brak banera zgody na cookie, bo jedyne używane ciasteczko utrzymuje sesję zalogowanego użytkownika.

Czego świadomie nie zrobiłem

Narzędzia sugerują usunięcie około 80 KB nieużywanego JavaScriptu z biblioteki animacji. Nie zrobiłem tego, bo czas blokowania wątku wynosi 0 ms - zysk byłby wyłącznie w liczbie pobranych bajtów, a odroczenie tej biblioteki opóźniłoby pojawianie się sekcji przy przewijaniu. Optymalizacja, która poprawia jeden wskaźnik kosztem realnego odbioru strony, nie jest optymalizacją.