Ytelsen til et nettsted handler om mer enn hvor raskt en side lastes inn. Selv om innholdet vises i løpet av sekunder, kan knapper som reagerer tregt eller uventede endringer i oppsettet irritere besøkende og svekke opplevelsen deres. Hvordan kan du så vite om nettstedet ditt yter godt? Core Web Vitals er Googles sentrale ytelsesmålinger som måler innlastingshastighet, interaktivitet og visuell stabilitet. I denne veiledningen lærer du om de tre Core Web Vitals-målingene, de anbefalte terskelverdiene og verktøyene du kan bruke til å måle og forbedre ytelsen til nettstedet ditt.
Hva er Core Web Vitals?
Core Web Vitals er et sett med ytelsesmålinger som Google har innført for å måle viktige sider ved brukeropplevelsen på et nettsted. Disse målingene fokuserer på tre hovedfaktorer: innlastingsytelse, interaktivitet og visuell stabilitet. Med andre ord hjelper de nettstedseiere med å forstå hvor raskt en side lastes inn, hvor smidig brukerne kan samhandle med den, og om innholdet forblir stabilt under innlastingen.
Ytelsen til et nettsted handler ikke bare om hvor raskt en side åpnes. Et nettsted kan laste inn innholdet sitt på kort tid, men hvis brukerne må vente før de kan klikke på en knapp, eller hvis sideoppsettet endres uventet, kan den samlede opplevelsen likevel være dårlig. Core Web Vitals hjelper deg med å avdekke slike problemer og gir målbare mål for å forbedre ytelsen til nettstedet.
Google bruker i dag tre Core Web Vitals-målinger: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) og Cumulative Layout Shift (CLS). Hver måling vurderer en ulik del av brukeropplevelsen, så en forbedring av én av dem betyr ikke nødvendigvis at de to andre også blir bedre.
Hvorfor er Core Web Vitals viktige?
Et nettsted bør gi de besøkende en smidig og pålitelig opplevelse. Når en side bruker for lang tid på å laste inn, kan brukerne forlate den før de får tilgang til informasjonen de trenger. På samme måte kan besøkende bli frustrerte og få problemer med å fullføre oppgavene sine hvis knapper reagerer tregt eller elementer på siden flytter seg uventet.
Core Web Vitals hjelper nettstedseiere med å avdekke disse problemene ved hjelp av målbare ytelsesdata i stedet for bare personlige inntrykk. En utvikler kan for eksempel teste et nettsted på en kraftig datamaskin og oppleve at det lastes raskt. Besøkende som bruker eldre mobile enheter eller tregere internettforbindelser, kan derimot oppleve mye lengre lastetider.
Disse forskjellene gjør ytelsesovervåking viktig. Ved å analysere Core Web Vitals-data kan utviklere finne ut hvilke deler av et nettsted som må forbedres, og avgjøre om optimaliseringsarbeidet gir de forventede resultatene.
Core Web Vitals er også relevante for søkemotoroptimalisering (SEO). Google bruker signaler for sideopplevelse i rangeringssystemene sine, men gode Core Web Vitals-resultater garanterer ikke høyere rangering. Relevant innhold og mange andre faktorer er fortsatt viktige. Forbedring av disse målingene bør derfor ses som en del av en bredere strategi for å bygge et nyttig, tilgjengelig og pålitelig nettsted.
Hva er de tre Core Web Vitals-målingene?
Hver Core Web Vitals-måling fokuserer på et bestemt aspekt ved nettstedets ytelse. Når du forstår hvordan de fungerer, blir det enklere å avdekke ytelsesproblemer og velge riktige optimaliseringsteknikker.
Hva er Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) måler hvor lang tid det tar før det største bildet eller tekstblokken som er synlig i det første visningsområdet, vises. Denne målingen gir et anslag på når hovedinnholdet på en side blir synlig for brukeren.
Tenk deg for eksempel at en besøkende åpner en bloggartikkel. Sidens bakgrunn og navigasjonsmeny kan vises nesten umiddelbart, men hovedoverskriften eller det fremhevede bildet kan bruke flere sekunder på å laste inn. I en slik situasjon kan den besøkende oppleve at siden fortsatt lastes, selv om enkelte elementer allerede er synlige. En god LCP-verdi bør være 2,5 sekunder eller mindre. Ligger verdien mellom 2,5 og 4 sekunder, trenger siden forbedring. En LCP-verdi på over 4 sekunder regnes som dårlig.
Flere faktorer kan påvirke LCP, blant annet trege svartider fra serveren, store bilder, CSS og JavaScript som blokkerer gjengivelsen, og forsinkelser i oppdagelsen av hovedinnholdet.
For å forbedre LCP kan nettstedseiere gjøre følgende:
- Optimaliser bilder: Reduser filstørrelsen på bilder og bruk moderne formater som WebP eller AVIF når det passer.
- Forbedre serverens svartider: Bruk effektive hostingressurser, hurtigbufring og et innholdsleveringsnettverk (CDN) når det passer for nettstedet.
- Prioriter hovedinnholdet: Sørg for at nettleseren kan oppdage viktige bilder direkte i HTML-kilden, og prioriter innlastingen av dem ved behov.
- Reduser ressurser som blokkerer gjengivelsen: Optimaliser CSS- og JavaScript-filer som hindrer nettleseren i å vise hovedinnholdet.
- Unngå lat innlasting av LCP-bildet: Hvis et bilde sannsynligvis er LCP-elementet, kan en forsinket innlasting få siden til å virke tregere.
Disse teknikkene kan redusere tiden brukerne venter på at hovedinnholdet skal vises. Den mest effektive løsningen avhenger imidlertid av årsaken til forsinkelsen, så det er viktig å måle siden før du gjør endringer.
Hva er Interaction to Next Paint (INP)?
Interaction to Next Paint (INP) måler hvor responsivt et nettsted oppleves når brukerne samhandler med det. Den vurderer forsinkelsen mellom en brukerhandling, for eksempel et klikk på en knapp eller et tastetrykk, og den neste visuelle oppdateringen nettleseren viser.
Tenk deg en nettbutikk der en besøkende klikker på knappen Legg i handlekurven. Hvis nettleseren bruker merkbart lang tid på å oppdatere handlekurven, kan den besøkende tro at knappen ikke fungerte, og klikke på den igjen. Dette kan skape forvirring og til og med føre til dobbelthandlinger.
INP hjelper deg med å avdekke slike problemer ved å måle hvor responsiv en side er gjennom hele brukerens besøk. I motsetning til First Input Delay (FID), som bare målte forsinkelsen før nettleseren begynte å behandle den første interaksjonen, tar INP hensyn til den bredere interaksjonsopplevelsen gjennom hele sidens levetid. En god INP-verdi er 200 millisekunder eller mindre. Verdier over 200 millisekunder og opptil 500 millisekunder trenger forbedring, mens verdier over 500 millisekunder regnes som dårlige.
JavaScript er en vanlig årsak til dårlig INP, fordi nettleseren kan måtte kjøre skript før den kan reagere på brukerens handlinger og vise en oppdatering. Langvarige oppgaver kan hindre nettleseren i å behandle interaksjoner raskt.
For å forbedre INP kan utviklere bruke flere teknikker:
- Reduser unødvendig JavaScript: Fjern ubrukt kode og unngå å laste inn skript som ikke trengs på den aktuelle siden.
- Del opp lange oppgaver: Del store JavaScript-oppgaver inn i mindre oppgaver, slik at nettleseren får flere muligheter til å behandle brukerinteraksjoner.
- Optimaliser hendelsesbehandlere: Hold funksjoner knyttet til interaksjoner så enkle og effektive som mulig.
- Unngå unødvendige DOM-oppdateringer: Å oppdatere for mange elementer samtidig kan øke gjengivelsestiden og forsinke den neste visuelle oppdateringen.
- Reduser tredjepartsskript: Analyseverktøy, annonseskript og innebygde tjenester kan bruke prosesseringsressurser og påvirke responsiviteten.
Å forbedre INP krever mer enn å redusere den samlede størrelsen på JavaScript-filene. Utviklere må også forstå når skriptene kjøres, og hvor mye arbeid nettleseren må utføre etter en interaksjon.
Hva er Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) måler den visuelle stabiliteten til en nettside. Den fokuserer på uventede endringer i plasseringen av synlige elementer mens siden vises.
Tenk deg for eksempel at en besøkende leser en artikkel og plutselig ser teksten flytte seg nedover fordi en annonse har dukket opp over den. Hvis den besøkende var i ferd med å klikke på en lenke, kan den uventede bevegelsen føre til at vedkommende klikker på et annet element. Slike endringer i oppsettet kan gjøre et nettsted vanskelig å bruke, særlig på mobile enheter der det synlige området er begrenset. En god CLS-verdi er 0,1 eller mindre. Verdier over 0,1 og opptil 0,25 trenger forbedring, mens verdier over 0,25 regnes som dårlige.
Flere vanlige problemer kan føre til uventede forskyvninger i oppsettet. Bilder uten angitte dimensjoner, dynamisk innsatte annonser, innhold som lastes sent, og nettfonter som endrer tekstens utseende, kan alle påvirke den visuelle stabiliteten.
Følgende teknikker kan bidra til å forbedre CLS:
- Angi bildedimensjoner: Oppgi bredde og høyde på bilder, eller bruk CSS-sideforhold for å reservere den nødvendige plassen før et bilde lastes inn.
- Reserver plass til annonser: Sett av nok plass til annonsebeholdere, slik at innholdet rundt ikke flytter seg når annonsene vises.
- Unngå å sette inn innhold over eksisterende innhold: Hvis nye elementer må vises, plasser dem der de ikke uventet flytter innholdet brukerne allerede ser på.
- Optimaliser innlastingen av fonter: Bruk egnede strategier for innlasting av fonter og reservefonter for å redusere uventede endringer i tekstoppsettet.
- Bruk egnede CSS-animasjoner: Velg om mulig animasjoner basert på egenskaper som transform og opacity fremfor egenskaper som fører til endringer i oppsettet.
Det er viktig å forstå at ikke alle forskyvninger i oppsettet er skadelige. En endring som skjer direkte som svar på en brukerhandling, kan være forventet. CLS fokuserer på uventet visuell ustabilitet og bruker en poengberegning basert på hvor stor innvirkning og avstand forskyvningene har.
Hva er de anbefalte terskelverdiene for Core Web Vitals?
Google har fastsatt bestemte terskelverdier som hjelper nettstedseiere med å avgjøre om sidene deres gir en god brukeropplevelse. Disse terskelverdiene deler ytelsen inn i tre kategorier: god, trenger forbedring og dårlig.
Disse terskelverdiene hjelper utviklere med å vurdere hver måling for seg. Én enkelt test er likevel ikke nok til å avgjøre om et nettsted gir en god opplevelse over tid.
Google anbefaler å vurdere Core Web Vitals ved 75-persentilen av sidebesøkene, og å vurdere resultatene for mobil og datamaskin hver for seg. Det betyr at minst 75 % av de målte besøkene bør oppfylle terskelverdien for god for hver måling.
Anta for eksempel at et nettsted har en LCP-verdi på 2 sekunder ved 75-persentilen. Det betyr at 75 % av de målte sidebesøkene har en LCP på 2 sekunder eller mindre, noe som oppfyller den anbefalte terskelverdien.
Et nettsted bør ha som mål å oppfylle terskelverdiene for god på alle tre målingene i stedet for bare å fokusere på det beste resultatet.
Hvilke verktøy kan brukes til å måle Core Web Vitals?
Core Web Vitals kan måles med flere verktøy fra Google. Disse verktøyene hjelper utviklere med å forstå hvordan et nettsted yter, og med å finne områder som trenger forbedring.
PageSpeed Insights
PageSpeed Insights er et av de mest nyttige verktøyene for å sjekke Core Web Vitals. Det gir både data fra virkelige brukere, når slike data er tilgjengelige, og laboratoriedata samlet inn gjennom en simulert test. Verktøyet gir også forslag til hvordan sidens ytelse kan forbedres.
Google Search Console
Google Search Console inneholder en Core Web Vitals-rapport som viser hvilke grupper av sider som gir en god brukeropplevelse, og hvilke som trenger forbedring. Rapporten bruker data fra virkelige brukere for å hjelpe nettstedseiere med å finne ytelsesproblemer på tvers av flere sider.
Chrome DevTools og Lighthouse
Chrome DevTools og Lighthouse hjelper utviklere med å teste sidens ytelse i et kontrollert miljø. De kan avdekke problemer knyttet til kjøring av JavaScript, innlasting av bilder, forskyvninger i oppsettet og andre faktorer som påvirker Core Web Vitals.
Hva er forskjellen mellom feltdata og laboratoriedata?
Core Web Vitals kan vurderes ved hjelp av to typer data: feltdata og laboratoriedata. Når du forstår forskjellen, blir det enklere å tolke testresultater og velge riktig tilnærming for å forbedre nettstedets ytelse.
Feltdata
Feltdata samles inn fra virkelige brukere mens de surfer på et nettsted. Dataene gjenspeiler faktiske bruksforhold, inkludert ulike enheter, nettverksforbindelser og brukerinteraksjoner.
Disse dataene er særlig nyttige for å forstå om et nettsted oppfyller Googles anbefalte terskelverdier for Core Web Vitals i virkelige situasjoner.
Laboratoriedata
Laboratoriedata samles inn i et kontrollert testmiljø ved hjelp av verktøy som Lighthouse. Slike data hjelper utviklere med å gjenskape ytelsesproblemer og undersøke mulige årsaker.
I motsetning til feltdata gjenspeiler ikke laboratoriedata alle brukeropplevelser i virkeligheten. Et nettsted kan derfor få ulike resultater i laboratorietester og i målinger fra virkelige brukere.
Slik forbedrer du Core Web Vitals
For å forbedre Core Web Vitals må du finne problemene som påvirker innlastingshastighet, interaktivitet og visuell stabilitet. Riktig løsning avhenger av hvilken måling som gir dårlige resultater.
Forbedre Largest Contentful Paint (LCP)
For å forbedre LCP bør utviklere sørge for at det største synlige innholdselementet lastes inn så raskt som mulig. Vanlige forbedringer er å optimalisere bilder, velge en pålitelig webhotelltjeneste, redusere serverens svartider, aktivere hurtigbufring og unngå unødvendige forsinkelser i innlastingen av viktige ressurser.
Forbedre Interaction to Next Paint (INP)
INP kan forbedres ved å redusere langvarige JavaScript-oppgaver og begrense unødvendig arbeid på hovedtråden. Utviklere bør også optimalisere hendelsesbehandlere og unngå at nettleseren må utføre for mye arbeid etter at en bruker klikker, trykker eller skriver.
Forbedre Cumulative Layout Shift (CLS)
For å redusere CLS bør utviklere reservere plass til bilder, videoer, annonser og andre elementer før de lastes inn. Unngå å sette inn nytt innhold uventet over eksisterende innhold, og bruk faste dimensjoner for visuelle elementer når det er mulig.
Oppsummering
Core Web Vitals hjelper utviklere med å forstå hvordan brukerne opplever et nettsted når det gjelder innlastingsytelse, interaktivitet og visuell stabilitet. Ved å måle LCP, INP og CLS kan nettstedseiere avdekke ytelsesproblemer og prioritere forbedringer som gjør sidene enklere å bruke.
Jevnlig overvåking, data fra virkelige brukere og målrettet optimalisering kan hjelpe nettsteder med å opprettholde gode Core Web Vitals-resultater over tid
Ofte stilte spørsmål
1. Hva er forskjellen mellom feltdata og laboratoriedata?
Feltdata kommer fra virkelige brukere som besøker et nettsted, mens laboratoriedata samles inn i et kontrollert testmiljø. Feltdata gjenspeiler faktiske brukeropplevelser, mens laboratoriedata hjelper utviklere med å gjenskape og diagnostisere ytelsesproblemer.
2. Hvordan kan jeg forbedre Core Web Vitals-resultatene mine?
Du kan forbedre Core Web Vitals ved å optimalisere bilder, redusere unødvendig JavaScript, forbedre serverens svartider, aktivere hurtigbufring og forhindre uventede forskyvninger i oppsettet.
