Core Web Vitals er i dag en utrolig vigtig ting at optimere på. Måske er du havnet her, fordi du har taget Pagespeed Insights testen af Google, og derfor gerne vil vide lidt mere om hvad du kan gøre, for at optimere din score. Måske er du havnet her, fordi din SEO konsulent har fortalt dig, at i skal have fokus på CWV. Uanset årsagen bag, så kan du blive meget klogere på CWV og de forskellige elementer herunder, i dette indlæg.

Hvad består CWV af?

Hvis du eksempelvis kører din hjemmeside igennem Googles Pagespeed test, så får du en score fra 0-100. Denne score er en overordnet score, som bliver baseret på nogle forskellige underelementer, så at sige.

Hvis man kigger nærmere på testen, så består den nemlig af nogle forskellige metrics. Bl.a. CLS (cumulative layout shift) og andre parametre.

First Contentful Paint (FCP)

FCP er en vigtig metric som bruges til at måle, hvor lang tid der går, før brugeren får vist noget på skærmen. En hurtig FCP sikrer at brugeren kan se, at siden er i gang med at loade.

Mange store tøjsider sørger for at have en hurtig FCP ved eksempelvis at vise en grå kasse, der hvor produktet kommer til at være. På den måde loader en del af siden hurtigt, så brugerne kan se, at der sker noget.

First Input Delay (FID)

FID er en vigtig metric som bruges til at måle, hvor længe der går, før siden er klar til at reagere. En lav FID vil derfor lade brugere intragere med din hjemmeside hurtigt, og en høj FID kan medføre at dine brugere klikker på elementer hvis funktionalitet ikke virker endnu, da siden (primært JavaScript) stadig er i gang med at loade.

Largest Contentful Paint (LCP)

LCP er en vigtig metric som bruges til at måle den opfattede loadtime. LCP markerer det punkt i indlæsning, hvor sidens hovedindhold er loaded. Det vil altså sige, at en lav LCP er godt og noget som du bør stræbe efter. Det er nemlig hvor hurtigt din side kan loade og vise landingsidens hovedindhold. Det kunne eksempelvis være et hero banner eller lign.

Cumulative Layout Shift (CLS)

CLS er en vigtig metric som bruges til at måle hvor meget din side ‘hopper’ når den loader. Du har helt sikkert selv oplevet det. Hvis du er gået ind på en side, og du med det samme ved hvad du skal klikke på, så du klikker lynhurtigt et bestemt sted på siden. Men lige i det du klikker, så hopper siden en smule, fordi den loader noget nyt indhold et eller andet sted, og du klikker derfor det forkerte sted.

Det er en meget god beskrivelse på, hvad CLS er. Du vil gerne have en så lav CLS som muligt, så din side ikke hopper og danser, når den begynder at loade. Det forringer brugeroplevelsen, og kan for det meste forhindres ved at loade CSS korrekt. Generelt skal du altid loade dine ressourcer i den rigtige rækkefølge.

Hvordan optimerer jeg CWV?

Alt afhængigt af hvilket underpunkt du gerne vil optimere, kræver det formentligt nogle forskellige teknikker for at optimere den specifikke metric.

Generelt kommer du rigtig langt, ved at undgå alt for mange eksterne requests og widgets. Eksempelvis vil det næsten altid tage nogle point af din score og forringe forskellige metrics, hvis du tilføjer Emærket på din hjemmeside. Det samme gælder med Trustpilot. Det samme gælde med Google Analytics osv. osv.

Men man kan jo ikke undvære alle de smarte værktøjer og widgets som der tilbydes i dag. Det er der heldigvis en løsning på for det meste. Måske kan du nøjes med et simpelt SVG af Emærket, i stedet for deres JavaScript widget. Måske kan du loade din livechat on click i stedet for on load. Der er for det meste gode muligheder for at anvende forskellige værktøjer, uden at påvirke CWV betydeligt.

Vi har for nyligt lavet en lille tilføjelse for en kunde, på deres webshop. Vi gjorde det muligt at loade Produktvideoer on click i stedet for on load, og det rykkede altså Pagespeed scoren fra 49 -> 83 på mobil.

FAQ til Web Core Vitals