Spis treści +
Strona wygląda dobrze na mockupie. PageSpeed na mobile pokazuje 42. Klient z Google czeka trzy sekundy i zamyka kartę. Core Web Vitals opisuje to, co człowiek czuje przy wejściu na stronę.
Trzy liczby, które Google bierze poważnie:
| Metryka | Co mierzy | Cel |
|---|---|---|
| LCP | Kiedy widać główny element (zwykle hero) | poniżej 2,5 s |
| INP | Ile czeka po kliknięciu, zanim coś się ruszy | poniżej 200 ms |
| CLS | Jak bardzo treść skacze przy ładowaniu | poniżej 0,1 |
Lighthouse to laboratorium. Ranking patrzy też na dane z prawdziwych telefonów (CrUX). Setka lokalnie i słabe pole to sytuacja, którą widujemy, i to pole wygrywa.
LCP: prawie zawsze obraz
Na stronach firmowych największy element to zwykle zdjęcie w hero. Cztery rzeczy, które dają najwięcej za najmniej roboty:
- Bez
loading="lazy"na hero. Lazy na pierwszym ekranie to strzał w stopę. widthiheight(alboaspect-ratio). Przeglądarka rezerwuje miejsce; przy okazji spada CLS.- WebP / AVIF w realnym rozmiarze. 4000 px wyświetlane na 1200 px to transfer za darmo oddany w kosmos.
- CSS i JS w
<head>, które nie są krytyczne. Każdy blokujący plik odpycha moment, w którym widać zdjęcie.
Na Netafoto hero jest celowo poza pipeline’em kompresji galerii: pełna jakość na cały ekran, reszta WebP + lazy. To świadomy wyjątek od reguły „wszystko na max”.
CLS: zarezerwuj miejsce
Skacze, bo:
- obraz bez wymiarów,
- embed (mapa, widget rezerwacji) bez stałej wysokości,
- font, który podmienia się po załadowaniu i rozpycha tekst.
font-display: swap + preload głównego kroju, aspect-ratio na mediach, placeholder na widgetach. Często CLS spada do zera w jedną popołudniówkę. Nie trzeba „przepisywać strony”.
INP: mniej JS, nie „szybszy” JS
INP mierzy kolejne interakcje, nie tylko pierwszą. Najskuteczniejsza poprawka to nie odpalać kodu, którego nie widać: mniej bibliotek, hydracja dopiero przy client:visible, ciężkie rzeczy poza głównym wątkiem.
Statyczny HTML z odrobiną JS ma ten problem rozwiązany z definicji. Ciężki WordPress z dziesięcioma wtyczkami „na wszelki wypadek” musi go leczyć przy każdym wdrożeniu: cache, defer, wyrzucenie zbędnych skryptów.
Sklep jubilerski z katalogiem 19 500 produktów bez warstwy cache nie ogarnie sensownego INP ani LCP. LiteSpeed przed WooCommerce to warunek, żeby strona w ogóle odpowiadała.
Czego nie robić dla setki
Wyrzucenie zdjęć produktów, animacji, które budują markę, albo analityki „bo punkty” podnosi Lighthouse i obniża sprzedaż. Próg „dobry” w CWV jest niższy niż 100. Gonienie setki bywa sportem dla sportu, rzadko realną strategią.
Przy nowej stronie na Astro albo lekkim stacku optymalizacja pod telefony wchodzi w wycenę jako standard. Przy starym WP po audycie często wychodzi: trzy konkretne poprawki dają skok z 40 do 80, a ostatnie 15 punktów kosztuje więcej niż są warte.
Jak chcesz liczbę z własnej domeny zamiast z poradnika, sięgnij po darmowy audyt albo kontakt.
