Angular Academy · Lektion

Mäta Core Web Vitals

Mät och förbättra prestandamått.

Lektion 4 av 413 steg

Mäta Core Web Vitals är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför webbprestandamåtten är viktiga

Core Web Vitals är Googles användarcentrerade prestandamått. De kvantifierar inläsning, interaktivitet och visuell stabilitet och påverkar både användarupplevelsen och sökrankningen.

De tre måtten

Trion består av LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) och INP (Interaction to Next Paint). Varje mått fokuserar på en annan aspekt av den upplevda prestandan.

LCP

LCP mäter när det största synliga elementet (en hero-bild eller rubrik) har renderats färdigt. Ett bra resultat är under 2,5 sekunder. SSR hjälper genom att leverera innehållet i den initiala HTML:en.

CLS

CLS mäter oväntade layoutförskjutningar medan sidan läses in. Ett bra resultat är under 0,1. Reservera utrymme för bilder och annonser och undvik att infoga innehåll ovanför befintligt innehåll.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP mäter responsiviteten vid användarinteraktioner under sidans hela livslängd och ersätter det äldre FID. Ett bra resultat är under 200 ms. Tung JS på huvudtråden försämrar INP.

Så hjälper SSR webbprestandamåtten

SSR förbättrar LCP genom att visa innehåll tidigare och kan minska CLS genom att leverera en stabil layout tidigt. Inkrementell hydrering förbättrar INP genom att leverera mindre JavaScript från början.

Labdata jämfört med fältdata

Labdata kommer från syntetiska verktyg som Lighthouse i en kontrollerad miljö. Fältdata (CrUX, RUM) kommer från verkliga användare. Optimera med hjälp av båda; det är fältdata som används för rankningen.

Mät med Lighthouse

Kör Lighthouse i Chrome DevTools eller CI för att få LCP, CLS och en proxy för INP i labbmiljö, samt åtgärdbara diagnoser.

// npx lighthouse https://example.com --view

Biblioteket web-vitals

Samla in webbprestandamått från verkliga användare i webbläsaren med biblioteket web-vitals och skicka dem till er analysslutpunkt.

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

Minska mängden JavaScript

Mindre paket förbättrar INP och tid till interaktivitet. Använd lazy loading på routenivå, @defer, inkrementell hydrering och tree-shaking för att minska mängden levererad JS.

Iterera och verifiera

Prestandaarbete innebär att mäta, ändra och mäta igen. När ni har aktiverat SSR, hydrering eller defer ska ni köra Lighthouse igen och följa trenden i fältdata under flera veckor för att bekräfta verkliga förbättringar.

Snabbkontroll

Kontrollera era kunskaper om Core Web Vitals.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt er om Core Web Vitals (LCP, CLS, INP), hur SSR och inkrementell hydrering förbättrar dem, skillnaden mellan labb- och fältdata samt hur ni mäter med Lighthouse och biblioteket web-vitals och sedan itererar genom nya mätningar.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Mäta Core Web Vitals” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Mäta Core Web Vitals”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mäta Core Web Vitals”?

Mät och förbättra prestandamått. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Mäta Core Web Vitals”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy