Måle Core Web Vitals i React-apper
Bruk Lighthouse, WebPageTest og web-vitals-biblioteket til å samle inn verdier for LCP, INP og CLS.
Måle Core Web Vitals i React-apper er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.
Hva er Core Web Vitals?
Core Web Vitals er Googles målinger av brukeropplevelsen som påvirker SEO-rangeringen: LCP (Largest Contentful Paint – innlasting), INP (Interaction to Next Paint – responsivitet) og CLS (Cumulative Layout Shift – visuell stabilitet).
Gode terskelverdier
Målverdier: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Verdier over grensen for «dårlig» (LCP > 4s, INP > 500ms, CLS > 0.25) svekker brukeropplevelsen og SEO-en betydelig.
web-vitals-biblioteket
npm-pakken web-vitals måler CWV i ekte nettlesere med et enkelt 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));Sende måledata til analyseverktøy
Send måledata til analyseendepunktet for overvåking av ekte brukere (RUM) – Lighthouse måler ytelse i et testmiljø, mens RUM viser hva ekte brukere opplever.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Innebygde målinger i Next.js
Next.js instrumenterer Core Web Vitals automatisk. Eksporter en reportWebVitals-funksjon fra _app.js (Pages), eller bruk den innebygde støtten i App Router.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse i Chrome DevTools
Kjør en Lighthouse-revisjon i Chrome DevTools (Lighthouse-fanen) for laboratoriebaserte CWV-målinger. Bruk inkognitomodus for å unngå forstyrrelser fra utvidelser, og strup nettverket for å simulere mobil.
WebPageTest
WebPageTest.org tilbyr detaljerte waterfall-diagrammer, videoopptak og CWV-målinger fra ekte enheter på ulike geografiske steder – mer realistisk enn lokal Lighthouse.
Chrome User Experience Report (CrUX)
Googles CrUX-datasett samler CWV-data fra ekte brukere på millioner av nettsteder. Du kan få tilgang til det via Google Search Console, PageSpeed Insights eller CrUX API.
PerformanceObserver for LCP
Bruk det innebygde PerformanceObserver-API-et til å observere LCP-oppføringer og finne ut hvilket element som er Largest Contentful Paint.
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 });Feilsøking av CLS
Bruk Layout Shift Regions i Chrome DevTools (i Rendering-panelet) for å fremheve elementer som forårsaker layoutforskyvninger, med røde overlegg.
Attribusjonsdata
web-vitals-biblioteket tilbyr attribusjonsdata som identifiserer hva som forårsaket den dårlige målingen – LCP-elementet, INP-interaksjonen eller elementet som forårsaket CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Kort sjekk
Hvilken Core Web Vital måler responsivitet – nærmere bestemt hvor raskt siden reagerer på brukerinteraksjoner?
Oppsummering
Mål CWV med web-vitals-biblioteket eller Lighthouse. Send målingene til analyseverktøyet for overvåking av ekte brukere. Sikt mot LCP ≤ 2.5s, INP ≤ 200ms og CLS ≤ 0.1. Bruk attribusjonsdata til å identifisere de konkrete elementene eller interaksjonene som gir dårlige resultater.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Måle Core Web Vitals i React-apper» gratis?
Ja – hele teksten i «Måle Core Web Vitals i React-apper» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Måle Core Web Vitals i React-apper»?
Bruk Lighthouse, WebPageTest og web-vitals-biblioteket til å samle inn verdier for LCP, INP og CLS. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Måle Core Web Vitals i React-apper»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Måle Core Web Vitals i React-apper
- Buntanalyse og strategi for kodedeling
- Optimalisering av bilder og skrifter i React
- Redusere INP: optimalisering av event handlers