← Tilbage til guides

Core Web Vitals guide

21 sep 2021

Se video

Indhold

  1. Google Sarch Console
  2. Pagespeed Insights
  3. CrUX dashboard
  4. Chrome Dev Tool

I denne guide giver vi dig en detaljeret gennemgang af, hvordan du kan arbejde med Core Web Vitals i de forskellige værktøjer.

Google Search Console

  1. Core Web Vitals

    I Google Search Console skal du ind i det punkt under forbedringer, der hedder “vigtige netstatistikker”. Som på engelsk og normalvis kaldes Core Web Vitals. Den finder du i menuen i venstre side.

    Her finder du en rapport, som viser dine Core Web Vitals for både mobil- og computerversionen af dine webadresser. Disse vil højst sandsynligt være forskellige, da det er forskellige scenarier, der udspiller sig på hver – både i forhold til LCP og CLS. Rapporten kan ses i eksemplet længere nede.

  2.  Forskellige scores af webadresser

    I de forskellige rapporter er det de dårlige webadresser, og dem der skal forbedres, som du skal ind og kigge på. Som det fremgår i nedenstående eksempel for computerversionen, er der ingen dårlige, men en del som skal forbedres, hvilket er næsten lige så slemt.

    I eksemplet med mobilversionen nedenunder fremgår det, at de webadresser, der skal forbedres, forsvinder længere henne. Det er fordi CLS-fejlene er blevet rettet og er blevet valideret af Google. Når en fejl er blevet rettet, sendes de til validering hos Google, så de ved at webadresserne er blevet forbedret, og de kan dermed vurdere hjemmesiden på ny.

    I nedenstående eksempel ses det, som vi nævnte tidligere, at computerversionen har nogle fejl, som skal forbedres. Den gule linje viser webadresser, der skal forbedres, og her er der 55 fejl.

  3. Rapporten

    For at finde fejlene, der skal rettes, skal du gå ind i rapporten ved at trykke åben rapport i højre hjørne. Som det ses i eksemplet nedenunder, skal vi bruge den gule, som er “skal forbedres”. Det giver et overblik over de forskellige webadresser, og hvor mange fejl der er.

  4. Detaljer

    Inde i rapporten har du mulighed for at scrolle ned til detaljer, for at se hvor fejlene ligger. I vores eksempel nedenfor er der et LCP-problem, som ikke længere er tilgængeligt. Det skyldes, at det allerede er blevet rettet. Ovenover det, ses det, at der et CLS-problem, hvor valideringen ikke er startet. Det er først muligt at starte en validering, når fejlene er rettet. Så giver man nemlig Google besked om, at fejlene er blevet rettet, så de kan opdatere ens data.

  5. Eksempler

    Har du problemer, kan du klikke på dem og komme ind til eksempler. I vores eksempel kigger vi nærmere på CLS-problemet. Her vises det, at en bestemt adresse har et problem.

    Det fremgår også, som du ser på billedet nedenfor, at der er 58 andre webadresser, som har en lignende fejl. Det betyder, at der er en generel fejl, som giver problemer flere steder. Har du lignende fejl, skal de findes, så de kan blive rettet.

  6. Ret fejlene og send til validering

    Når du har rettet de fejl, der måtte være, sendes de til validering. Denne fejl, som ses i eksemplet, er allerede blevet rettet, så den skal valideres. Som det fremgår, er valideringen allerede startet og er færdigbehandlet inden for 28 dage.

    Når du har rettet dine webadressers fejl, og de har været til validering, er du færdig inde i rapporten, og din side er nu opdateret og giver en bedre brugeroplevelse for kunden.

Pagespeed Insights

Pagespeed Insights fokuserer på alle URL’ers hastighed, da dette er en stor faktor i forhold til arbejdet med Core Web Vitals. Vi vil derfor gennemgå, hvordan du kan anvende PageSpeed Insights til at få mere data ud af de unikke URL’er, som der ønskes forbedret i forhold til Core Web Vitals.

På siden kan du indtaste den URL, som du ønsker skal testes og derefter klikke analysér.

PageSpeed Insights giver dig også en del information i forhold til de andre web vitals, men her er det bedst at fokusere på Core Web Vitals, da de typisk også løser nogle af de andre problemer, som der kan være med hastighed, loading osv.

Så hvad skal du bruge PageSpeed Insights til?

Når du har fundet en side, det kan f.eks. være en side, som du også har fundet med fejl i Google Search Console, kan du med fordel også køre den igennem Pagespeed Insights. Pagespeed Insights giver nemlig et indblik i den enkelte side, og de fejl som findes på den, og du får derfor et overblik over, hvad det er på siden, som giver problemer.

  1. Feltdata

    Når URL’en er gennemgået i programmet, viser den en samlet score, som viser om siden har bestået vurderingen af Core Web Vitals. Her har du mulighed for både at få vist for mobil- og desktopversion. Det er en god ide at kigge på begge versioner, da de oftest er forskellige. I eksemplet ser vi på mobilversionen. Den side, som er anvendt i eksemplet, har fået en score på 12, hvilket betyder, at siden ikke er bestået. For at se, hvor problemerne ligger, skal vi se på feltdataen. De kommer frem nedenunder scoren.  FCP er ikke en del af Core Web Vitals, men det er LCP  (det ses på det blå flag). Det vil sige, at FID og CLS også er en del af Core Web Vitals.

    Hvis vi går ud fra eksemplet ovenover, fremgår det, at FID er blevet godkendt, hvilket betyder, at der ikke er problemer med “Frst Input Delay”, så denne er der ikke grund til at kigge nærmere på. Dog er der problemer med CLS, som er “Cumulative Layout Shift”, der måler hvor stabilt en hjemmesides layout er. Det måles for at undgå, at siden giver en dårlig brugeroplevelse. Den skal vi derfor ind og se nærmere på.

    LCP, som er “Largest Contentful Paint”, er heller ikke bestået. Det skyldes, at det primære indhold tager for lang tid om at downloade, og blive klar til, at en bruger kan interagere med det. Samlet set er hele siden derfor ikke bestået, da der er flere problemer på nogle af parametrene.

  2. Data for prøvefunktioner

    Det næste som er interessant at se nærmere på er data for prøvefunktioner, som ligger under feltdata. Under data for prøvefunktioner, finder du data for laptests, som i højere grad anvendes til benchmarking, som betyder at du kan se ændringerne, som du foretager med det samme. Det er i modsætning til feltdaten, hvor der går op til 28 dage, før ændringerne er valideret. De resultater, der kommer frem her, giver nogle gode forslag til, hvad man kan gøre for at forbedre de forskellige faktorer.



  3. LCP og CLS muligheder

    For at se, hvor der kan laves forbedringer på siden, kan du se på mulighederne. Dem finder du længere nede i rapporten under data for prøvefunktioner. Da der tages udgangspunkt i Core Web Vitals, skal du ind og kigge på LCP og CLS. I toppen vil de muligheder med størst tidsbesparelse ligge, så du kan med fordel starte med dem.

    I vores eksempel fremgår det, at det kan være en mulighed at fjerne JavaScript, da programmet vurderer, at det ikke bliver brugt. Hvis det bliver fjernet, vil det forbedre vores LCP med 5,12 sekunder, hvilket vil gøre en stor forskel for loadingtiden.

Når du har været inde og kigge på de forskellige webadresser, kan du begynde at arbejde på de eventuelle fejl derinde.

CrUX dashboard

Når du arbejder med Core Web Vitals kan du med fordel opstille et CrUX dashboard. Det giver dig nemlig mulighed for at holde øje med dine Core Web Vitals og deres udvikling.

Her er en guide til, hvordan du får opstillet dit CrUX dashboard:

  1. Lav en kopi

    Først skal du starte med at lave en kopi af dette Google Data Studio dashboard. Det har du mulighed for at gøre øverst i højre hjørne. Her er det vigtigt, at du også tilføjer en datakilde. Den datakilde, som du skal anvende er “Chrome UX Report”.

  2. Opret forbindelse -> tilføj til rapport

Når datakilden er fundet og aktiveret, kan du kopiere rapporten. I rapporten får du et overblik over din virksomheds Core Web Vitals. I venstre side er der en menu over de forskellige kapitler i rapporten, så du kan holde øje med de forskellige parametre.

Chrome Developer Tool

Chrome Developer tool er et Google-værktøj, som typisk anvendes til at arbejde med design og layout. Værktøjet kan gøre dit arbejde med Core Web Vitals en smule nemmere. Vi vil her tage dig igennem, hvordan du anvender det.

  1. Undersøg

    For at åbne programmet skal du inde på den side, som du ønsker at teste, højreklikke og derefter trykke undersøg.

    Når du kommer ind i programmet, kan det godt se ret forvirrende ud. Vi vil derfor gennemgå, hvad du kan se i værktøjet, og hvad du kan få ud af det.

  2. Klik på performance

    Det vi skal se nærmere på er performance. Husk også at slå Web Vitals til, da det er de faktorer, som vi er interesserede i.

  3. Tryk på reload knappen

    Herefter skal du reloade siden ved at trykke på reload-knappen. Den laver så en optagelse af hele siden, hvor den definerer de problemer, der måtte være.
    Her vil du få en masse forskellig data ud. Vi er interesserede i vores Web Vitals. 

  4. LCP

    Begynd med at kigge på LCP. I vores eksempel kommer LCP’en efter 2,9 sek. Det betyder, at der går 2,9 sekunder før det største element er loadet. Det er for langsomt, så derfor skal den forbedres.

    Under experience, som er oplevelsen med siden, kan vi i vores eksempel se, at der sker nogle layout skift. Det er her, man kan se hvilke tidspunkter, de loader på.

    Under timings kan du se LCP, og hvis du holder musen hen over, vises det hvilket indhold, som er det vi kalder “largest contentful paint”. I eksemplet er det et stort billede.

    I eksemplet under ses det, at “layout shifts” timestamp er det samme som LCP’en. For at kunne optimere loadingtiden, skal der gøres noget ved dette problem.

    Du skal ikke gå ind og optimere på alle layout shifts, da dette ikke er nødvendigt. Grænsen ligger på 0,1 sekunder, så ligger de over det, skal du gøre noget ved dem. I eksemplet er den på 0,12, og den skal derfor forbedres.

    Chrome Developer Tool er en god måde at få et overblik over, hvor henne på siden de forskellige ting sker og hvilke elementer, som udløser fejl. Dog kan det godt være lidt indviklet, så hvis du ikke selv har helt styr på det, kan det være en god ide at få en udvikler til at hjælpe.

  5. Lighthouse

    Du kan med fordel også tjekke fanen, der hedder lighthouse. Det giver et mere virkeligt billede af, hvad der sker. Det er dog stadig sat op i en laptest, altså et miljø, som betyder at resultatet ikke bliver påvirket af, om du har god internet forbindelse eller ej.

    • Rapport

      Start med at trykke på generate report, så reloader siden og der laves en optagelse af, hvordan siden loader og hvilke problemer, der opstår.

      I rapporten måles der på fire forskellige parametre. I dette eksempel fokuseres der på effektivitet, da det er her Core Web Vitals ligger.

    • LCP

      De ting som er interessante at kigge på er igen LCP og CLS. I eksemplet herunder er LCP’en på 3 sekunder, hvor den derfor er over grænsen, som ligger på 2,5. Det er derfor en god ide at gå ind og se, hvor der kan laves forbedringer herunder.

    • CLS

      CLS ligger på 0,2 sekunder, hvor grænsen er på 0,1. Den skal derfor også formindskes, så den kommer på et acceptabelt niveau.

    • Muligheder

      Under muligheder ses de faktorer, som der kan arbejdes med for at få LCP’en bragt ned. Laver du nogle ændringer, så kan du teste det med det samme og se om det har gjort en forskel.

      Nu skulle du gerne have lidt mere styr på dine Core Web Vitals og hvilke programmer, som du kan anvende til både at holde øje med dem, men også til at få styr på de fejl, som måtte komme.

      Er du mere interesseret, så kan du se vores Core Web Vitals webinar.

Tilmeld vores nyhedsbrev