Det skal du vide om LCP – Largest Contentful Paint
Indholdsfortegnelse
Hvad er LCP?
LCP eller Largest Contentful Paint, som det også er kaldt, er på dansk den største udfyldning af indhold, og 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 hurtig 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 vigtig, 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 du gladere kunder og besøgende ind 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 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 🙂
Er du ikke færdig med at blive klogere? Se flere spændende indlæg her
Få adgang til kurset
Er du en del af kurset, kan du logge direkte ind på knappen herunder.
Nissen Group ApS (CVR: 43240676)
Tlf. +45 2064 5786
C. A. Olesens Gade 4, 1.
9000 Aalborg
Find rundt på siden
Følg mig på de sociale medier
