Pomiar Core Web Vitals w aplikacjach React
Używanie Lighthouse, WebPageTest i biblioteki web-vitals do zbierania wyników LCP, INP i CLS.
Pomiar Core Web Vitals w aplikacjach React to bezpłatna lekcja React 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym są Core Web Vitals?
Core Web Vitals to metryki Google dotyczące doświadczenia użytkownika, które wpływają na pozycję w wynikach SEO: LCP (Largest Contentful Paint — ładowanie), INP (Interaction to Next Paint — responsywność) oraz CLS (Cumulative Layout Shift — stabilność wizualna).
Dobre wartości progowe
Wartości docelowe to: LCP ≤ 2.5s, INP ≤ 200ms i CLS ≤ 0.1. Wartości powyżej progu „słabego wyniku” (LCP > 4s, INP > 500ms, CLS > 0.25) znacznie pogarszają doświadczenie użytkownika i SEO.
Biblioteka web-vitals
Pakiet npm web-vitals mierzy CWV w rzeczywistych przeglądarkach za pomocą prostego API.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Wysyłanie wskaźników do analityki
Należy wysyłać wskaźniki do endpointu analitycznego na potrzeby monitorowania rzeczywistych użytkowników (RUM) — Lighthouse mierzy wydajność w warunkach laboratoryjnych, natomiast RUM pokazuje, czego doświadczają rzeczywiści użytkownicy.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Wbudowane wskaźniki Next.js
Next.js automatycznie instrumentuje Core Web Vitals. Należy eksportować funkcję reportWebVitals z _app.js (Pages) lub użyć wbudowanej obsługi App Routera.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse w Chrome DevTools
Należy uruchomić audyt Lighthouse w Chrome DevTools (karta Lighthouse), aby uzyskać laboratoryjne pomiary CWV. Należy użyć trybu incognito, aby uniknąć zakłóceń powodowanych przez rozszerzenia, oraz ograniczyć przepustowość, aby zasymulować urządzenie mobilne.
WebPageTest
WebPageTest.org udostępnia szczegółowe wykresy kaskadowe, nagrywanie wideo i pomiary CWV z rzeczywistych urządzeń w różnych lokalizacjach geograficznych — wyniki są bardziej realistyczne niż lokalny audyt Lighthouse.
Chrome User Experience Report (CrUX)
Zbiór danych CrUX firmy Google agreguje dane CWV od rzeczywistych użytkowników milionów stron internetowych. Można uzyskać do niego dostęp za pośrednictwem Google Search Console, PageSpeed Insights lub API CrUX.
PerformanceObserver dla LCP
Należy użyć natywnego API PerformanceObserver, aby obserwować wpisy LCP i ustalić, który element odpowiada za największe wyrenderowanie treści.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Debugowanie CLS
Należy użyć funkcji Layout Shift Regions w Chrome DevTools (w panelu Rendering), aby wyróżnić czerwonymi nakładkami elementy powodujące przesunięcia układu.
Dane atrybucji
Biblioteka web-vitals udostępnia dane atrybucji wskazujące, co spowodowało słaby wynik — element LCP, interakcję INP lub element powodujący CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Szybki sprawdzian
Która metryka Core Web Vital mierzy responsywność — a konkretnie szybkość, z jaką strona reaguje na interakcje użytkownika?
Podsumowanie
Wartości CWV należy mierzyć za pomocą biblioteki web-vitals lub Lighthouse. Metryki należy wysyłać do systemu analitycznego na potrzeby monitorowania rzeczywistych użytkowników. Wartości docelowe to LCP ≤ 2.5s, INP ≤ 200ms i CLS ≤ 0.1. Należy używać danych atrybucji, aby identyfikować konkretne elementy lub interakcje powodujące słabe wyniki.
Często zadawane pytania
Czy lekcja „Pomiar Core Web Vitals w aplikacjach React” jest bezpłatna?
Tak — pełny tekst „Pomiar Core Web Vitals w aplikacjach React” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pomiar Core Web Vitals w aplikacjach React”?
Używanie Lighthouse, WebPageTest i biblioteki web-vitals do zbierania wyników LCP, INP i CLS. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 „Pomiar Core Web Vitals w aplikacjach React”?
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 React Academy?
Tak. Każda lekcja React 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
- Pomiar Core Web Vitals w aplikacjach React
- Analiza bundle'a i strategia dzielenia kodu
- Optymalizacja obrazów i fontów w React
- Zmniejszanie INP: optymalizacja handlerów zdarzeń