Hvordan Core Web Vitals påvirker sideopplevelsen og SEO

De fleste markedsførere vet allerede at for å få trafikk og potensielle leads til nettstedet ditt, må du tiltrekke en betydelig andel av dem organisk gjennom kongen av søkemotorer: Google. Og denne bragden oppnås ved å følge søkemotoroptimalisering-prinsipper, og deres stadig utviklende praktiske anvendelse.

Når vi snakker om utvikling, har Google nå introdusert et nytt sett med måleparametere for det de anser som et sunt nettsted, nemlig Core Web Vitals. Hva er de? Hvordan måler du dem? Og hvilken innvirkning vil de sannsynligvis ha?

Hva er Core Web Vitals?

Nøkkelordmanipulering og URL-håndtering er ikke lenger de avgjørende faktorene i SEO-verdenen. Brukeropplevelsen, inkludert fluktfrekvens og gjennomsnittlig tid på siden, blir stadig viktigere.

Men hvordan måler man kvaliteten på brukeropplevelsen? I Chromium Blog presenterer Ilya Grigorik, Web Performance Engineer hos Google, et sett faktorer kalt “Core Web Vitals.” Disse faktorene anses som kritiske for alle nettopplevelser, og tar for seg f.eks. lastetid, interaktivitet og visuell stabilitet av sideinnholdet.

Core Web Vitals er delt inn i tre kategorier:

Largest Contentful Paint (LCP)

Dette settet med faktorer måler den opplevde lastetiden på siden din, men markerer også punktet i lastetidlinjen når hovedinnholdet mest sannsynlig ble lastet. Kort sagt: hvor raskt laster siden innholdet brukerne virkelig bryr seg om?

Generelt, jo raskere LCP, jo større sannsynlighet er det for at siden vurderes av Google som nyttig for besøkende. Les mer tekniske detaljer om LCP på web.dev.

First Input Delay (FID)

FID måler lastrespons ved å kvantifisere opplevelsen brukerne føler når de først prøver å interagere med siden. Mens LCP kan sammenlignes med hvor raskt en side maler sine piksler, kan FID sammenlignes med hvor raskt brukerne kan interagere med nevnte piksler.

En tommelfingerregel er at jo lavere FID, jo mer brukbar er siden i Googles øyne. For mer teknisk dybde, se web.dev.

Cumulative Layout Shift (CLS)

Dette tredje settet med faktorer måler den visuelle stabiliteten til en side, og hjelper til med å kvantifisere hyppigheten av brukere som opplever uventede layoutskift, for eksempel hvis en knapp plutselig flytter seg i siste sekund av lastetiden.

Den generelle regelen her er at jo lavere CLS, jo større sannsynlighet er det for at siden oppfattes som brukervennlig. Les alle tekniske detaljer på web.dev.

Se også: Enonic: En fleksibel plattform for fremtiden »

Hvordan måle CWV

Den enkleste måten å komme raskt i gang med å måle Core Web Vitals er å teste URL-en din på Google PageSpeed Insights. Denne tjenesten tester alle de nevnte faktorene under CWV, i tillegg til First Contentful Paint. Du kan se de forskjellige resultatene for både mobil og desktop, og dykke inn i diagnostikken.

I skjermbildet nedenfor testet vi Enonic.com etter å ha utført flere forbedringer:

Se også: Hvordan Enonic kan være knutepunktet for dine digitale opplevelser »

Hvordan forbedre CWV

Å forbedre dine Core Web Vitals vil føre til en bedre score av Google og dermed høyere rangering, hvis du samtidig har en gjennomtenkt SEO-strategi, komplett med nøkkelordoptimalisering.

Forbedring av LCP

I følge Google er dette de vanligste årsakene til dårlig LCP, og forslag til hvordan du kan optimalisere dem:

• Treg serverrespons
  • Optimaliser serveren din
  • Rute brukere til en nærliggende CDN
  • Cache ressurser
  • Server HTML-sider cache-first
  • Etabler tredjepartskoblinger tidlig
• Render-blokkerende CSS og JavaScript
  • Minimer CSS
  • Utsett ikke-kritisk CSS
  • Inline kritisk CSS
  • Minimer og komprimer JavaScript-filer
  • Utsett ubrukt JavaScript
  • Minimer ubrukt polyfills
• Treg ressurslasting
  • Optimaliser og komprimer bilder
  • Forhåndslast viktige ressurser
  • Komprimer tekstfiler
  • Lever forskjellige ressurser basert på nettverkstilkobling (adaptiv servering)
  • Cache ressurser ved hjelp av en service worker
• Klientside-rendering
  • Minimer kritisk JavaScript
  • Bruk serverside-rendering
  • Bruk forhåndsrendering

Se flere detaljer om forbedring av LCP på web.dev og YouTube.

Forbedring av FID

For å forbedre din First Input Delay, kan du gjøre følgende:

• Del opp lange oppgaver
• Optimaliser siden din for interaksjonsberedskap
  • Kjøring av førstepartsskript kan forsinke interaksjonsberedskap
  • Datainnhenting kan påvirke mange aspekter av interaksjonsberedskap
  • Kjøring av tredjepartsskript kan forsinke interaksjonslatens
• Bruk en web worker
• Reduser JavaScript-runtime
  • Utsett ubrukt JavaScript
  • Minimer ubrukte polyfills

Se flere tekniske detaljer om forbedring av FID på web.dev.

Forbedring av CLS

Forbedring av Cumulative Layout Shift kan oppnås ved å optimalisere følgende årsaker til dårlig CLS:

• Bilder uten dimensjoner
  • Inkluder alltid bredde- og høydeattributter på bildene og videoelementene dine
  • Hvert bilde bør bruke samme størrelsesforhold
• Reklamer, innebygginger og iframes uten dimensjoner
  • Reserver statisk plass for annonseplasseringen
  • Vær forsiktig når du plasserer ikke-sticky reklamer nær toppen av visningsområdet
  • Unngå å kollapse den reserverte plassen hvis det ikke er noen annonse returnert når annonseplasseringen er synlig ved å vise en plassholder
  • Eliminer skifter ved å reservere den største mulige størrelsen for annonseplasseringen
  • Velg den mest sannsynlige størrelsen for annonseplasseringen basert på historiske data
  • Skaff deg høyden på den endelige innebyggingen ved å inspisere den med nettleserens utviklerverktøy
  • Når innebyggingen lastes, vil dens inneholdte iframe justeres for å passe slik at innholdet passer
• Dynamisk injisert innhold
  • Unngå å sette inn nytt innhold over eksisterende innhold, med mindre det er som svar på en brukerinteraksjon
  • Reservere tilstrekkelig plass i visningsområdet
• Nettfonter som forårsaker FOIT/FOUT
  • Endre renderingadferden til egendefinerte fonter med font-display (med forholdsregler)
  • Font Loading API kan redusere tiden det tar å få nødvendige fonter
  • Bruk <link rel=preload> på nøkkelnettfonter
• Animasjoner
  • Foretrekk transform-animasjoner fremfor animasjoner av egenskaper som utløser layoutendringer

For mer informasjon om forbedring av CLS, se web.dev.

Når vil CWV tre i kraft?

Google har annonsert på X at Core Web Vitals vil tre i kraft i mai 2021.

Dette betyr at CWV vil bli kombinert med følgende faktorer:

• Mobilvennlighet
• Sikker surfing
• HTTPS-sikkerhet
• Retningslinjer for påtrengende mellomliggende elementer

Når det gjelder virkningen av CWV, er det for tidlig å si. Som SEO-ekspert Neil Patel påpeker, vet vi ikke nøyaktig hvor mye innvirkning Core Web Vitals vil ha på sideplassering. Vi vet bare at Google legger mye mer vekt på brukeropplevelse enn før, og at sider med bedre brukeropplevelser sannsynligvis vil rangere høyere i søkeresultatene enn sider med dårlige brukeropplevelser.