Core Web Vitals & Programmatic

Core Web Vitals er et initiativ fra Googles side, med det formål at standardisere vigtige parametre, der kan fortælle hvorvidt der er tale om en god brugeroplevelse på et website.

Vi vil her forsøge at komme med et indledende overblik, og samtidig også nogle konkrete råd til hvordan Core Web Vitals og Programmatic fungerer i samspil.

Mange medier bruger KPI’er fra Core Web Vitals aktivt i siteoptimering, og de der endnu ikke gør bør ligeledes overveje det. Det er der et par grunde til:

  1. God rangering indikerer et brugervenligt site med god loadtid, dette vil betyde at man kan holde længere på brugeren, som forbruger éns indhold, og brugeren vil med større sandsynlighed blive til en loyal bruger.
  2. God rangering vil i stigende grad blive værdifuldt i relation til Search Engine Optimization (SEO). Sites der modtager en stor del af sine brugere fra Google søgninger har derfor ekstra meget på spil når Google inden længe begynder at lægge mere vægt på pageload.
  3. Et site der loader hurtigt, vil typisk også have annoncer der loader hurtigt og påvirker sitet i mindre grad. Det øger interaktionen med annoncerne (Viewability og CTR) og dermed i sidste ende omsætningen.

Hvad er Core Web Vitals

Core Web Vitals repræsenterer 3 forskellige områder af brugeroplevelsen, som er kritiske for en god brugeroplevelse.

Largest Contentful Paint (LCP)

LCP måler loading performance i forhold til hvornår det antages at den største og mest centrale del af et sites indhold er loadet. Det vil sige selve det content brugeren besøger sitet for, og ikke nødvendigvis omkringliggende moduler eller annoncer. En god score på dette parameter er max 2,5 sekunder. Hvis man her ligger over 2,5 sekunder bør man tænke over optimeringer, og er man over 4 sekunder så er det noget der aktivt skal arbejdes med.

First Input Delay (FID)

FID måler tiden fra en bruger interagerer med siden (klikker på et link eksempelvis) til hvornår browseren rent faktisk begynder at behandle denne handling. Altså den forsinkelse der er mellem klik, og hvornår processen starter – og ikke fra der klikkes til processen er slut.

En god score er under 100 millisekunder. Konkret anbefales det at 75% af éns brugere bør have en FID score under 100 millisekunder.

Cumulative Layout Shift (CLS)

CLS måler den visuelle stabilitet på en side. Det er udviklet for at få en stabil KPI, der netop kan måle den visuelle stabilitet på siden, som er afgørende for brugeroplevelsen.

Scoren måles ud fra ”impact fraction” og ”distance fraction”. Impact Fraction er hvor stor en del af brugerens viewport, som er påvirket af et ustabilt element (hvis 50% af viewport flyttes 25%, så vil det være 75% af viewport, der er påvirket). Distance fraction er hvor langt det ustabile element flyttes (hvis 50% flyttes fra at ligge langs toppen af viewport til at være centreret, vil det være flyttet 25% ned). Til sammen giver dette en CLS score på 0,75×0,25 = 0,1875. CLS påvirkes for hver gang dette sker i brugerens viewport.

Dette er et element hvor programmatic i høj grad kan have en påvirkning. Dette sker når adunits indlæses, hvis ikke de har en foruddefineret højde. Topscroll annoncer har en særligt negativ påvirkning på CLS, som dog skal stilles overfor den høje indtjening – formatet bør derfor bruges med måde.

Hvor skal man starte hvis man vil optimere?

  • Rapportering: Værktøjer som Googles Pagespeed Insights eller GTmetrix kan give stabile KPI’er man kan måle over tid.
  • Serveropsætning: En stærk serveropsætning bliver vigtigere og vigtigere. Vi stiller krav til både os selv og samarbejdspartnere om at benytte effektive CDN løsninger, og anbefaler at man som medie gør det samme.
  • Begrænse Javascript og CSS: Man kan over tid have bygget lag på lag for at håndtere løbende udfordringer. Med jævne mellemrum bør websitets kode kigges efter i sømmene således at den holdes så effektiv som muligt.
  • Prioriter serverside: Client side afvikling er tungere for brugeren, og påvirker brugerens oplevelse negativt. Teknologier, der kan afvikle serverside, bør derfor i så høj grad som muligt gøre dette.
  • Rækkefølgen scripts eksekveres: Rækkefølgen af scripts, der eksekveres er vigtig for indlæsningen af det første og vigtigste indhold. Indhold længere nede på sitet bør nedprioriteres loadmæssigt i forhold til indhold i de første skærmbilleder. Et eksempel på dette er vores prioritering af at lazyloade adunits, således at adunits først indlæses i takt med brugeren bevæger sig ned over siden.
  • Låse elementhøjder: Hvad enten det er adunits, billeder eller andre elementer på sitet, bør det reserveres/låses til en forventet højde. På adunits placeret i den øvre del af sitet, bør der være reserveret en højde på forhånd. Adunits længere nede på siden vil i mindre grad påvirke brugeroplevelsen negativt, hvis disse ikke er forhåndsdefinerede, da disse kan nå at loade før brugeren ser dem.

Hvad arbejder vi på?

  • Flytte løsninger til brugermålretning serverside: Serverside ID løsninger giver os adgang til at mindske påvirkningen på brugeroplevelsen client side, og stadig opnå effekt.
  • Begrænse tredjepartscookies: Vi arbejder kontinuerligt på at begrænse antallet af tredjepartsteknologier, der tillades. Dette intensiveres særligt frem mod Chromes udfasning af tredjepartscookies.
  • Tests af serverside header bidding: Serverside header bidding giver problemer med cookiematching, som sænker værdien af en visning, fordi annoncøren ikke ved hvem man annoncerer til. Men i takt med at SSP’er (annoncebørser) understøtter serverside teknologier, kan denne udfordring mindskes. Derfor er vi allerede nu i gang med tests af Serverside header bidding.
  • Et optimalt niveau for timeouts: Timeout er den tilladte svartid for SSP’er i Header Bidding. Højere timeouts sikrer bedre svarrate – lavere timeouts giver højere ”timeout rate” (annoncebørs når ikke at svare). Vi optimerer her mod en hårfin – og flydende – grænse, hvor vi accepterer en vis timeout rate, mod at vinde typisk et par hundrede millisekunder i den maksimalt tilladte svartid.
  • Låse adunit højde i forbindelse med reload: Vi arbejder på at sikre, at når annoncer reloades kaldes kun den samme størrelse, der allerede er. Dermed kan vi også låse højden på reload, og sikre dette ikke påvirker CLS negativt.
  • Mapping af teknologiers påvirkning på pageload: Vi samarbejder med en række markedsledende teknologier på alt fra Malware Protection til Header Bidding analytics. Alle disse teknologier påvirker hver især den samlede brugeroplevelse i varierende grad, og vi arbejder aktuelt på at få et stærkere overblik over netop dette, så vi kan tage mere kvalificerede beslutninger om hvilke teknologier vi afvikler på hvilke sites.

Ressourcer

Vi henviser til Googles eget indhold omkring emnet, her kan der findes både mere uddybende læsning (og webinars) samt konkrete tips og tricks til optimering: https://web.dev/learn-web-vitals

Kim Skovgaards Jørgensen
Programmatic Lead