TTFB vs LCP vs INP: różnice wskaźników wydajności

Jeśli zajmujesz się wydajnością stron, szybko natkniesz się na cały alfabet skrótów: TTFB, LCP, INP, FCP, CLS, TBT. Każdy jest mierzony przez inne narzędzia, każdy dotyczy innego aspektu ładowania strony i każdy wymaga innych działań naprawczych.

Poniżej masz klarowne wyjaśnienie każdego wskaźnika i jak ze sobą współgrają.

TTFB: kondycja serwera

Time to First Byte to czas oczekiwania na pierwszy bajt odpowiedzi HTTP. Mierzony jest od momentu wysłania żądania do otrzymania pierwszego bajtu danych.

TTFB obejmuje: DNS lookup + TCP handshake + TLS handshake + czas przetwarzania przez serwer.

TTFB nie jest oficjalnym wskaźnikiem Core Web Vitals, ale jest fundamentem wszystkich pozostałych. Jeśli serwer odpowiada po 2 sekundach, żaden inny wskaźnik nie może być dobry, bo przeglądarka musi czekać 2 sekundy zanim w ogóle zacznie cokolwiek renderować.

Dobry wynik: poniżej 600 ms (Google). Idealny: poniżej 200 ms.

FCP: kiedy użytkownik widzi pierwsze piksele

First Contentful Paint to czas do pojawienia się pierwszego elementu DOM: tekstu, obrazu, canvasa, SVG. To moment, gdy użytkownik po raz pierwszy widzi cokolwiek, co nie jest białym tłem.

FCP jest pośrednio częścią Core Web Vitals: wpływa na LCP (LCP nie może być wcześniejszy niż FCP) i jest wskaźnikiem w Lighthouse.

Dobry wynik: poniżej 1,8 s. Zły: powyżej 3 s.

Najczęstsze przyczyny wysokiego FCP: render-blocking JavaScript i CSS w <head>, brak wstępnego ładowania krytycznych zasobów, wolny TTFB.

LCP: kiedy strona wydaje się załadowana

Largest Contentful Paint to czas do momentu, gdy w oknie przeglądarki pojawia się największy element widoczny powyżej fold: zazwyczaj główny obraz, duże zdjęcie w hero sekcji lub duży blok tekstu.

LCP to oficjalny wskaźnik Core Web Vitals i mierzy percepcję ładowania ze strony użytkownika. Kiedy LCP się pojawia, większość odwiedzających uznaje stronę za “załadowaną”, nawet jeśli w tle wciąż pobierane są zasoby.

Wynik	Wartość
Dobry	poniżej 2,5 s
Wymaga poprawy	2,5–4,0 s
Słaby	powyżej 4,0 s

Związek z TTFB: jeśli TTFB = 1,5 s, LCP nie może być niższy niż ~1,7 s, bo przeglądarka musi najpierw dostać HTML, przetworzyć go i znaleźć obraz LCP.

INP: reaktywność podczas całej sesji

Interaction to Next Paint mierzy opóźnienie między interakcją użytkownika (kliknięcie, dotyk, klawisz) a widoczną reakcją strony. W przeciwieństwie do swojego poprzednika FID, INP mierzy nie tylko pierwszą interakcję, ale wszystkie interakcje podczas sesji i bierze pod uwagę najgorszy przypadek.

INP stał się oficjalnym wskaźnikiem Core Web Vitals w marcu 2024, zastępując FID.

Wynik	Wartość
Dobry	poniżej 200 ms
Wymaga poprawy	200–500 ms
Słaby	powyżej 500 ms

INP jest najtrudniejszym wskaźnikiem do optymalizacji, bo dotyczy zachowania strony po załadowaniu. Wysoki INP to zazwyczaj za dużo JavaScript blokującego główny wątek: długie taski (Long Tasks), zbyt wiele event listenerów, heavy re-rendery w React lub Vue.

CLS: stabilność layoutu

Cumulative Layout Shift mierzy niespodziewane przesunięcia elementów strony podczas ładowania. Kiedy zajmujesz się czytaniem tekstu, a nagle pojawia się reklama i przesuwa całą treść o 300 pikseli w dół, CLS skacze w górę.

Wynik	Wartość
Dobry	poniżej 0,1
Wymaga poprawy	0,1–0,25
Słaby	powyżej 0,25

CLS jest obliczany jako suma iloczynu “fraction of viewport area” i “distance fraction” dla każdego przesunięcia. Brzmi skomplikowanie, ale w praktyce: im większy element się przesuwa i im dalej, tym wyższy CLS.

Główne przyczyny wysokiego CLS: obrazy bez width/height, reklamy bez zarezerwowanej przestrzeni, czcionki webowe powodujące FOUT (Flash of Unstyled Text), dynamicznie wstrzykiwane bannery.

Jak wskaźniki się na siebie nakładają?

DNS → TCP → TLS → [ TTFB ] → HTML → CSS/JS → [ FCP ] → ... → [ LCP ]
                                                    ↓
                               interakcje użytkownika → [ INP ]
                               przesunięcia layoutu → [ CLS ]

TTFB > FCP > LCP to kaskada: każdy poprzedni wpływa na kolejny. INP i CLS są niezależne od tej kaskady, ale zależą od sposobu implementacji JavaScript i CSS.

Który wskaźnik poprawiać jako pierwszy?

Reguła praktyczna:

Jeśli TTFB > 600 ms: najpierw serwer (cache, CDN, hosting)
Jeśli LCP > 2,5 s mimo dobrego TTFB: optymalizacja obrazów i render-blocking resources
Jeśli CLS > 0,1: zarezerwuj przestrzeń dla obrazów i dynamicznych elementów
Jeśli INP > 200 ms: analiza JavaScript, code splitting, Long Tasks audyt

Nie opłaca się optymalizować INP, jeśli TTFB wynosi 2 sekundy. Idź od korzeni do liści w powyższej kaskadzie.

Narzędzia do mierzenia

Audyt Core Web Vitals w RankVoyager: szybki pomiar LCP, INP, CLS i FCP z PageSpeed Insights API, bez rejestracji
Google PageSpeed Insights: dane lab i field (Chrome UX Report)
Chrome DevTools Performance: dogłębna analiza Timeline, Long Tasks i INP
WebPageTest: test z wielu lokalizacji, filmowe nagranie ładowania, szczegółowy waterfall

W panelu RankVoyager możesz monitorować CWV Twoich stron w czasie, porównując wyniki po każdym wdrożeniu.