Core Web Vitals og overvåking
Forstå LCP, INP og CLS, mål dem hos faktiske brukere, og bruk Next.js-funksjoner og observability-verktøy for å holde produksjonsappen rask.
Core Web Vitals og overvåking er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hva er Core Web Vitals
Core Web Vitals er Googles brukersentrerte ytelsesmålinger som påvirker både brukeropplevelsen og SEO-rangeringen. De tre gjeldende målingene er:
- LCP — Largest Contentful Paint (innlasting)
- INP — Interaction to Next Paint (responsivitet)
- CLS — Cumulative Layout Shift (visuell stabilitet)
LCP: Innlastingshastighet
LCP måler når det største synlige elementet (ofte et heltebilde eller en overskrift) er ferdig gjengitt. Sikt mot under 2,5 sekunder. Forbedre dette med bildeoptimalisering, prioritert innlasting og gjengivelse på serveren.
import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />INP: Responsivitet
INP erstattet FID. Målingen viser forsinkelsen for brukerinteraksjoner gjennom hele besøket. Sikt mot under 200 ms. Lange JavaScript-oppgaver på hovedtråden påvirker INP mest.
CLS: Visuell stabilitet
CLS kvantifiserer uventede layoutforskyvninger. Sikt mot under 0,1. Angi alltid eksplisitt bredde og høyde på bilder, og reserver plass til annonser og innebygde elementer.
Labdata kontra feltdata
Labdata kommer fra en kontrollert kjøring (Lighthouse). Feltdata (RUM) kommer fra virkelige brukere på virkelige enheter. Feltdata er fasiten for rangering, mens labdata er utmerket til feilsøking.
Rapportere med useReportWebVitals
Next.js tilbyr useReportWebVitals for å samle inn målinger fra virkelige brukere og sende dem til analyseendepunktet ditt.
'use client';
import { useReportWebVitals } from 'next/web-vitals';
export function Vitals() {
useReportWebVitals((metric) => {
navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
});
return null;
}Gruppere en måling
Klassifiser verdien til en måling som god / trenger forbedring / dårlig. Ren logikk som kan kjøres hvor som helst.
function rateLCP(ms) {
if (ms <= 2500) return 'good';
if (ms <= 4000) return 'needs-improvement';
return 'poor';
}
console.log(rateLCP(1800));
console.log(rateLCP(3200));
console.log(rateLCP(5000));Redusere arbeid på hovedtråden
For å forbedre INP bør du sende mindre JavaScript og utsette arbeid som ikke er kritisk. Bruk dynamiske importer for å dele opp tunge klientkomponenter i separate kodebiter.
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./Chart'), { ssr: false });Serverkomponenter hjelper
React Server Components gjengis på serveren og sender ikke JavaScript til klienten for den delen av treet. Dette reduserer pakkestørrelsen direkte og forbedrer INP og LCP.
Verktøy for overvåking i produksjon
Sett opp kontinuerlig overvåking:
- Vercel Speed Insights for innebygd RUM.
- Vercel Analytics for trafikk.
- Sentry / OpenTelemetry for feil og spor.
Send varsler når en måling forverres og overskrider terskelen.
Fastsette et ytelsesbudsjett
Definer budsjetter (for eksempel LCP < 2,5 sekunder, JS < 170 KB), og håndhev dem i CI slik at regresjoner gjør at bygget mislykkes før de når brukerne.
Rask sjekk
Hvilken Core Web Vital måler responsiviteten til brukerinteraksjoner, og hva er målet?
Oppsummering
Du har lært å holde produksjonsmiljøet raskt:
- LCP (lasting), INP (responsivitet) og CLS (stabilitet) med tilhørende mål.
- Forskjellen mellom laboratoriedata og feltdata.
- Innsamling av RUM med
useReportWebVitals. - Redusere JS ved hjelp av kodedeling og Server Components, samt overvåking og budsjetter.
Lær deg TypeScript 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
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Core Web Vitals og overvåking» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Core Web Vitals og overvåking», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.
Hva lærer jeg i «Core Web Vitals og overvåking»?
Forstå LCP, INP og CLS, mål dem hos faktiske brukere, og bruk Next.js-funksjoner og observability-verktøy for å holde produksjonsappen rask. Du øver på Next.js 15 for fullstack-webapper 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 Next.js 15 for fullstack-webapper?
Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper 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 4 av 4.
Hvor lang tid tar leksjonen «Core Web Vitals og overvåking»?
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 Next.js 15 for fullstack-webapper-leksjonen?
Ja. Alle Next.js 15 for fullstack-webapper-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
- Distribusjon til Vercel og Netlify
- Optimalisering av bilder og skrifttyper
- Pakkeanalyse og ytelsesrevisjoner
- Core Web Vitals og overvåking