fbpx

Hvad et LCP? Largest Contentful Paint

Læsetid

Sidst opdateret

Indholdsfortegnelse

Hvad er LCP?

LCP eller Largest Contentful Paint som det også er kaldt, er på dansk den største udfyldning af indhold, er kort sagt indlæsningstiden, det tager hjemmesiden at vise de største elementer. Værdien måler brugertilfredsheden, ligesom de to andre core web vitals måleværdier gør.

LCP er en måling af hvor lang tid det tager det primære indhold af en side at downloade og blive klar til, at der skal interageres med det. Det der måles, er det største billede eller indholdsstykke inde i brugeres viewport (det som burgeren ser) og kun det som findes i viewporten. Andre elementer på siden tæller ikke med i denne måling. Typisk vil der være tale om billeder, videoer, baggrundsbilleder eller store tekststykker i eksempelvis en paragraf.

Hvorfor måler Google på LCP?

LPC viser meget præcist, hvor hurtigt en hjemmeside kan bruges af en bruger. Herudover er det nemt at optimere imod. Sektionselementer, overskrifter og formelementer kan alle være elementer, der bruges til at udregne LCP og det kunne faktisk i realiteten være et hvilket som helst HTML-element, der indeholder tekst. Så længe det er det største element.

Så, hvad er god LCP?

En god LCP giver en god brugeroplevelse, og for at opnå en god LCP-score skal du forsøge at få vist de største elementer eller det første vindue på hjemmesiden inden for de første 2,5 sekunder. De største elementer kan eksempelvis være din forside slider med video eller billede, hvilket betragtes som et stort element.

Billedet her til venstre viser hvad der skal til for at have en god eller dårlig LCP

 

Hvorfor er det vigtigt med en god LCP?

En god LPC er meget vigtigt, det det er den fordi når dine kunder besøger din hjemmeside, vægter de fleste mennesker meget højt at det ikke går langsomt når man trykker videre på din hjemmeside – det kender vi jo alle sammen til at tålmodigheden ikke altid har god tid. Derudover vægter de fleste også højt at hele hjemmesiden spiller og at den ser godt og pæn ud.

Med god LCP fører gladere kunder og besøgende på hjemmesiden, hvilket højst sandsynligt giver flere køb. Derfor giver det god mening at kigge ind i om ens LCP er god og indenfor de 2,5 sekunder.

Hvordan forbedrer man sin LCP?

Herunder finder du en række af de punkter, du kan forbedre, hvis du vil sænke din LCP.

Langsomme serversvar

Jo længere tid det tager browseren at modtage indhold fra serveren, desto længere tid tager det at opfatte noget som helst på skærmen. Jo hurtigere serversvar desto lavere LCP.

Gengivelsesblokerende Javascript og CSS

Før end at en browser kan rendere noget indhold, skal HTML-markup parses ind i et DOM-træ, parseren pauser hvis den møder eksterne stylesheets (CSS) eller synkroniserede JavaScript tags.

Både CSS og scripts er gengivelsesblokerende og de forsinker FCP og dermed også LCP. For at forbedre disse elementer, kan man udsætte ikke kritisk CSS og benytte sig af inline kritisk CSS (Kritisk CSS der bruges til at loade above the fold indhold, kan inkluderes i head), samt minificere CSS (Fjerne alle overflødige karakterer så som: mellemrum, kommentarer mv. disse er alle overflødige for en browser, men fylder). Generelt set handler det dog om at få minimeret mængden af blokerende CSS, nu mindre, nu hurtigere load.

Langsomme ressourcer

Udover CSS og Javascripts blokeringstid er der også andre mange andre former for ressourcer der kan påvirke LCP eksempelvis <img>-elementer, <video>-elementer og <image>-elementer og elementer der indeholder tekststrenge eller andre inline tekstelementer.

Alle disse elementer påvirker LCP, hvis de renderes above-the-fold. Derfor bør du arbejde på at optimere og komprimere billeder, komprimere tekstfiler, prøve på at preloade vigtige ressourcer og levere forskellige aktiver baseret på netværksforbindelse (Adaptive serving).

Herudover kan brugen af service workers forbedre LCP voldsomt.

Hvordan finder jeg frem til min LCP?

Selve resultaterne leverer Google til dig både i deres Search Console, hvor de løbende måler på denne værdi, sammen med de to andre Core Web Vitals, men du kan også få gradueringen igennem Google PageSpeed Insights.

For at finde oversigten i Search Console skal du blot logge ind på din konto, vælge dit websted og herefter navigere til ”Vigtige netstatistikker” under ”Forbedringer”.
Du får nu en oversigt over henholdsvis dårlige webadresser, gode webadresser og webadresser der skal forbedres.

Tak fordi du læste med, jeg håber du blev klogere på emnet og at du fik lyst til at kigge ind i LCP på din egen hjemmeside. God arbejdslyst 🙂

Shopping Basket