Trzy metryki, które warto znać
Core Web Vitals to trzy wskaźniki opisujące, jak strona zachowuje się z perspektywy użytkownika: jak szybko pokazuje główną treść, jak szybko reaguje na kliknięcie i czy elementy nie skaczą podczas ładowania.
| Metryka | Co mierzy | Dobrze | Do poprawy | Słabo |
|---|---|---|---|---|
| LCP | czas wyświetlenia największego elementu | ≤ 2,5 s | 2,5–4 s | > 4 s |
| INP | opóźnienie reakcji na interakcję | ≤ 200 ms | 200–500 ms | > 500 ms |
| CLS | przesunięcia układu strony | ≤ 0,1 | 0,1–0,25 | > 0,25 |
INP (Interaction to Next Paint) zastąpił starszą metrykę FID 12 marca 2024 roku. To ważne, bo INP jest znacznie bardziej wymagający: bierze pod uwagę wszystkie interakcje podczas wizyty, a nie tylko pierwszą.
Jak mierzy to Google
Ocena Core Web Vitals pochodzi z danych terenowych, czyli z raportu Chrome UX Report zbieranego od prawdziwych użytkowników Chrome. Google patrzy na 75. percentyl z ostatnich 28 dni, osobno dla telefonów i komputerów. W praktyce: strona musi być szybka dla trzech na czterech odwiedzających, a nie tylko dla Ciebie na światłowodzie.
PageSpeed Insights pokazuje dwie rzeczy naraz i warto ich nie mylić. Na górze są dane terenowe (jeśli strona ma wystarczający ruch), niżej wynik laboratoryjny Lighthouse od 0 do 100. Wynik 90+ w laboratorium to dobry cel projektowy, ale o ocenie decydują dane terenowe. Pełny obraz całej witryny znajdziesz w raporcie Core Web Vitals w Google Search Console.
Dlaczego strony na WordPressie tak często wypadają słabo
Sam WordPress nie jest wolny. Wolne bywają decyzje podjęte przy budowie strony:
- Page builder z kilkoma paczkami dodatków. Każda paczka ładuje własne style i skrypty, często na każdej podstronie, nawet jeśli dany widżet występuje raz.
- Slider w nagłówku. Kilka dużych zdjęć i biblioteka JavaScript tylko po to, żeby większość użytkowników zobaczyła pierwszy slajd.
- Za dużo krojów pisma. Cztery rodziny fontów w kilku grubościach to kilkanaście plików przed wyświetleniem tekstu.
- Nieoptymalne zdjęcia. Zdjęcie 4000 px wgrane prosto z aparatu i wyświetlone w polu szerokim na 600 px.
- Skrypty zewnętrzne. Czat, piksel reklamowy, mapa, widżet opinii. Każdy to kolejne zapytania i kod na głównym wątku przeglądarki.
Jak poprawić LCP
- Sprawdź w PageSpeed Insights, który element jest LCP. Najczęściej to zdjęcie w nagłówku albo duży nagłówek tekstowy.
- Nie ładuj leniwie (
loading="lazy") obrazu z pierwszego ekranu. Dodaj mu za tofetchpriority="high". - Serwuj obrazy w formacie WebP lub AVIF, w rozmiarach dopasowanych do ekranu (
srcset). - Włącz pamięć podręczną po stronie serwera, np. LiteSpeed Cache na hostingu z serwerem LiteSpeed.
- Ogranicz fonty do dwóch rodzin, hostuj je u siebie i używaj
font-display: swap.
Jak poprawić INP
INP psują długie zadania JavaScript, które blokują przeglądarkę na dłużej niż 50 ms. Użytkownik klika, a strona „myśli”.
- Usuń wtyczki, które dodają skrypty na każdej podstronie, a są potrzebne na jednej.
- Widżet czatu i mapy ładuj dopiero po interakcji albo po przewinięciu do sekcji.
- Uprość strukturę strony. Page buildery potrafią zagnieździć tekst w kilkunastu warstwach elementów, a duże drzewo DOM spowalnia każdą zmianę na ekranie.
Przykład z tej strony: animacje przy przewijaniu i przełączanie etapów procesu działają na krótkim skrypcie opartym na IntersectionObserver, bez dodatkowych bibliotek animacji.
Jak poprawić CLS
- Każdy obraz i film powinien mieć w kodzie atrybuty
widthiheight. Przeglądarka rezerwuje wtedy miejsce, zanim plik się pobierze. - Zarezerwuj przestrzeń na osadzenia (mapy, filmy, widżety opinii) za pomocą
aspect-ratio. - Baner cookies pokazuj jako nakładkę na dole ekranu, a nie jako pasek wpychany nad treść.
- Dobierz font zastępczy o zbliżonych proporcjach, żeby tekst nie przeskakiwał po wczytaniu właściwego kroju.
Czy to naprawdę wpływa na pozycje?
Tak, ale nie tak, jak obiecują niektóre oferty. Google traktuje doświadczenie strony jako jeden z wielu sygnałów. Trafność i jakość treści ważą więcej: szybka strona o niczym nie wyprzedzi wolniejszej, która dobrze odpowiada na pytanie. Przy wyrównanej konkurencji szybkość bywa jednak języczkiem u wagi.
Mocniejszy argument to sprzedaż. Badanie Deloitte przygotowane dla Google („Milliseconds Make Millions”, 2020) wykazało, że skrócenie czasu ładowania mobilnego o 0,1 s wiązało się ze wzrostem konwersji w handlu detalicznym o 8,4%. Nawet jeśli Twoja branża zareaguje słabiej, szybkość to jedna z niewielu optymalizacji, które działają jednocześnie na SEO, reklamy i sprzedaż.
Chcesz wiedzieć, co spowalnia Twoją stronę? Wyślij mi adres, a wskażę trzy najważniejsze poprawki.