Core Web Vitals: LCP, FID, CLS
Proszę zrozumieć, co mierzą Largest Contentful Paint, First Input Delay i Cumulative Layout Shift oraz dlaczego Google wykorzystuje je jako sygnały rankingowe.
Core Web Vitals: LCP, FID, CLS to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego wydajność ma znaczenie
Wolne strony tracą użytkowników. Google uwzględnia wydajność jako czynnik rankingowy: strony ze słabymi wynikami Core Web Vitals zajmują niższe pozycje w wynikach wyszukiwania. Poza SEO każde opóźnienie o 100 ms mierzalnie zmniejsza konwersję i zaangażowanie.
Trzy podstawowe wskaźniki Core Web Vitals
Google mierzy trzy wskaźniki doświadczenia użytkownika: LCP (szybkość ładowania), FID (interaktywność) i CLS (stabilność wizualna). Dla każdego z nich określono progi „Dobrze”, „Wymaga poprawy” i „Słabo”.
Largest Contentful Paint (LCP)
LCP mierzy moment zakończenia renderowania największego widocznego elementu treści (obrazu, plakatu wideo lub bloku tekstu). Dobry wynik: poniżej 2,5 s. Słaby wynik: powyżej 4 s. Aby go poprawić, należy wstępnie ładować główne obrazy, ograniczać zasoby blokujące renderowanie i korzystać z szybkiego CDN.
First Input Delay (FID) i INP
FID mierzy opóźnienie między pierwszą interakcją użytkownika (kliknięciem, dotknięciem) a reakcją przeglądarki. Dobry wynik: poniżej 100 ms. W 2024 roku FID zastąpiono przez Interaction to Next Paint (INP), który mierzy wszystkie interakcje, a nie tylko pierwszą.
Skumulowane przesunięcie układu (CLS)
CLS mierzy nieoczekiwane przesunięcia układu podczas ładowania strony. Dobry wynik: poniżej 0,1. Słaby wynik: powyżej 0,25. Powodują je obrazy bez określonych wymiarów, fonty ładowane z opóźnieniem oraz reklamy wstrzykiwane po pierwszym wyrenderowaniu.
Pomiar CWV w przeglądarce
Należy użyć pakietu npm web-vitals, aby rejestrować metryki rzeczywistych użytkowników i wysyłać je do punktu końcowego analityki.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Naprawa LCP: wstępne ładowanie głównego obrazu
Należy poinformować przeglądarkę, aby pobrała główny obraz odpowiednio wcześnie, przed przeanalizowaniem reszty kodu HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Naprawa CLS: rezerwowanie miejsca
Należy zawsze ustawiać width i height dla obrazów i elementów osadzonych, aby przeglądarka zarezerwowała miejsce przed pobraniem zasobu. W przypadku responsywnych kontenerów należy używać właściwości CSS aspect-ratio.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Naprawa INP: dzielenie długich zadań
Długie zadania JavaScript blokują główny wątek, opóźniając reakcję na kliknięcia. Należy dzielić pracę na mniejsze części za pomocą scheduler.yield() lub setTimeout, aby przeglądarka mogła renderować zawartość i reagować na dane wejściowe.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Dane laboratoryjne a dane rzeczywiste
Dane laboratoryjne (Lighthouse) pochodzą z syntetycznego testu przeprowadzanego w kontrolowanym środowisku. Dane rzeczywiste (CrUX, RUM) są zbierane od prawdziwych użytkowników korzystających z prawdziwych urządzeń. Dane rzeczywiste są źródłem prawdy dla rankingu SEO.
Budżety wydajności
Należy ustalić konkretne limity, na przykład LCP poniżej 2 s i pakiet JavaScript poniżej 200 KB. Należy egzekwować je w CI za pomocą Lighthouse CI lub @bundle-analyzer, aby kompilacje, które pogarszają wydajność, kończyły się niepowodzeniem.
Szybki sprawdzian
Który wskaźnik Core Web Vitals mierzy nieoczekiwane przesunięcia wizualne podczas ładowania strony?
Podsumowanie: Core Web Vitals
LCP: szybkość ładowania największego elementu, docelowo poniżej 2,5 s. INP (wcześniej FID): responsywność, docelowo poniżej 200 ms. CLS: stabilność wizualna, docelowo poniżej 0,1. W środowisku produkcyjnym należy mierzyć te wskaźniki za pomocą pakietu web-vitals, a w CI używać Lighthouse. O pozycjonowaniu SEO decydują dane rzeczywiste, a nie laboratoryjne.
Często zadawane pytania
Czy lekcja „Core Web Vitals: LCP, FID, CLS” jest bezpłatna?
Tak — pełny tekst „Core Web Vitals: LCP, FID, CLS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Core Web Vitals: LCP, FID, CLS”?
Proszę zrozumieć, co mierzą Largest Contentful Paint, First Input Delay i Cumulative Layout Shift oraz dlaczego Google wykorzystuje je jako sygnały rankingowe. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Core Web Vitals: LCP, FID, CLS”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Core Web Vitals: LCP, FID, CLS
- Audytowanie i ocenianie za pomocą Lighthouse
- Optymalizacja obrazów: lazy loading i formaty WebP
- Dzielenie kodu i leniwe trasy