Opdatering med fokus på brugeroplevelsen
Med Core Web Vitals-opdateringen fra Google sættes der mere fokus på en websides samlede brugeroplevelse. Core Web Vitals er en mængde af faktorer, der vil have en direkte indvirkning på en hjemmesides ranking. De bør derfor opfattes som ”vejledning til kvalitetsignaler, der er afgørende for at levere en god brugeroplevelse”, og vil blive kombineret med den eksisterende Google-algoritme.
Hvor stor en indvirkning denne opdatering vil have på placeringerne er ukendt, men det er rimeligt at antage, at virkningen vil svare til virkningen af de allerede eksisterende Web Vitals, såsom HTTPS.
Sådan tilgår du Core Web Vitals
De fire eksisterende Web Vitals består af mobilvenlighed, sikker browsing, HTTPS, og ”no intrusive interstitials” (pop-ups). Med Core Web Vitals får webudviklere og administratorer endelig svarene på de nøjagtige faktorer som Google vil omfatte som ranking faktorer.
Core Web Vitals er fokuseret på tre hovedområder:
- Loading
- Interaktivitet
- Visuel stabilitet
Disse hovedområder bliver vurderet ud fra følgende målepunkter:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP)
LCP måler load-tid og -performance – dvs. hvor lang tid det tager en side at blive indlæst fra en virkelig brugers synspunkt. Det er tiden fra at klikke på et link til at se det primære indhold på siden (den største blok af indhold, der vises i browserens synlige vindue). Typisk vil LCP bestå af et større hero-billede, en video eller en tekstblok. LCP bør forekomme inden for 2,5 sekunder for at få en “GOOD” score.
Sådan optimeres LCP:
- Optimer serveren: bedre hosting giver hurtigere indlæsningstider generelt
- Fjern unødvendige tredjepartsscripts
- Udskyd eller asynkronisér ikke-kritiske JavaScripts
- Inline kritisk CSS
- Fjern unødige elementer
- Opsæt lazy loading på alle billeder below-the-fold
- Minify CSS og JS
- Led brugere hen til et CDN i nærheden
- Cache dine elementer/aktiver
- Vis HTML-sider ”cache first”
- Preconnect eller prefetch vigtige tredjepartselementer
- Forudindlæs (preload) vigtige ressourcer
- Tekstkomprimering (GZip eller Brotli)
- Optimer billeder (billedkomprimering, tilpasning af billedstørrelse…)
- Konverter billeder til WebP, hvis browseren understøtter det (ellers JPG)
- På mobil skal du overveje kun at vise kontekstrelevante billeder
First Input Delay (FID)
FID måler den tid, det tager fra en bruger har interageret med en webside, til det tidspunkt browseren reagerer på dette. En interaktion kan være et klik på et link eller en knap, indtastning af en e-mailadresse i et felt, valg af en indstilling i en menu, osv.
FID er en feltdataværdi (data fra virkelige brugeres interaktioner med websider) og måler, hvor lang tid, det tager for noget at ske på en webside. FID bør forekomme inden for 100 millisekunder for at opnå en “GOOD” score.
Sådan optimeres FID:
- Reducér udførelsestiden (execution time) på JavaScript (evt. forsink udførelse af JS indtil brugerinteraktion)
- Minimer hovedtrådsarbejde (overvej at bruge mindre JS-payloads/opdele lange scripts i mindre stykker)
- Minimer eller udsæt JS og CSS
- Komprimér JS og CSS
- Fjern ikke-kritiske tredjepartsscripts
- Brug cachelagring i browseren
Cumulative Layout Shift (CLS)
CLS måler visuel stabilitet. For at få en god brugeroplevelse skal websiden være stabil mens den indlæses. Det betyder, at hvis elementerne på websiden bevæger sig rundt og er dynamiske mens siden indlæses, har du sandsynligvis en høj CLS, hvilket er dårligt.
Ofte er en høj CLS forårsaget af en annonce, et topbanner eller en menu, der indlæses senere end de andre elementer og ender med at flytte de allerede indlæste elementer rundt. Den rækkefølge, som elementerne indlæses i, har derfor en vigtig betydning for din websides visuelle stabilitet.
Sådan optimeres CLS:
- Sørg for, at annonceelementer har en reserveret plads
- Angiv dimensioner på alle medieelementer (video, billeder, GIF’er, infografik, annoncer, osv.)
- Alle nye elementer i brugergrænsefladen skal tilføjes under folden
- Undgå at bruge JS, der placerer HTML-elementer uden en reserveret plads
- Indsæt aldrig indhold over eksisterende indhold, undtagen som svar på en brugerinteraktion
- Undgå at vise nyt indhold, medmindre det udløses af brugerinteraktion
- Forudindlæs webskrifttyper, der forårsager FOIT/FOUT
- Overvej at bruge “font-display: swap” i CSS-filer (ADVARSEL: Kan forårsage layout shift)
- Overvej at bruge “font-display: optional” i kombination med forudindlæsning af webskrifttyper
- Brug ikke animationer, der udløser layoutændringer (brug i stedet CSS-egenskaben ”transform”)
Værktøjer til at måle Core Web Vitals
Core Web Vitals vil hovedsageligt være baseret på feltdata, dvs. historiske data indsamlet fra virkelige brugere. Det kan derfor tage tid for nogle websteder at akkumulere feltdataene, hvis de ikke får så meget trafik. Derfor er laboratoriedataværktøjer også nyttige og bør anvendes i kombination med feltdataværktøjer. Lab-dataværdierne er baseret på crawlerestimater og best practice.
Nyttige måleværktøjer omfatter:
- GTmetrix (laboratoriedata – betalt udgave anbefales, da den gratis version kun måler på desktop)
- Lighthouse (laboratoriedata – benyt hovedsagligt mobilvisning)
- Google PageSpeed Insights (felt- og laboratoriedata)
- Page Experience i Google Search Console (feltdata)
- Chrome DevTools (brug panelet Ydeevne/Performance)
Med Google’s Core Web Vitals har virksomheder altså nu mulighed for at forbedre deres websiders brugeroplevelse efter helt konkrete parametre, hver især med et udvalg af metoder til optimering. Tilføjelsen af officielle rankingfaktorer tillader også et endnu tættere sammenspil mellem forskellige områder inden for digital markedsføring.
