Hvad er Largest Contentful Paint? (LCP) og hvorfor er det så vigtigt?

Går du op I dit website og dets synlighed, har du med garanti bidt mærke I at Google har introduceret ”Largest Contentful Paint” forkortet LCP, som et af deres tre ”Core Web Vitals”. De tre core web vitals, bliver deciderede rankingfaktorer i 2021. Men hvad er LCP egentligt? Og hvordan kan du forbedre det?

Videointroduktion til emnet

Se videoen og få en hurtig opsummering eller spring videoen over og læs artiklen efter videoen.

Hvad er LCP?

LCP står som sagt for Largest Contentful Paint, på dansk ville man nok oversætte det til største indholdsmæssige udfyldning. Værdien måler brugertilfredshed, ligesom de to andre core web vitals måleværdier gør.

LCP er en måling af hvor lang tid det tager for det primære indhold af en side at downloade og blive klar til, at der kan interageres med det. Det der måles, er det største billede eller indholdsstykke inde i brugeres viewport (det som brugeren 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?

LCP viser meget præcist, hvor hurtigt en hjemmeside kan bruges af en bruger. Herudover er det nemt og enkelt målepunkt, som er 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.

Modsat mange andre målepunkter er LCP nem at forstå og handle på. Alt du skal gøre, er at se på dit website og lokalisere den største blok tekst eller billede og herefter optimere det, ved at gøre det mindre eller eliminere elementer der kunne forhindre det i at blive downloadet hurtigt.

Herunder kan du se, hvordan hjemmesiden billig-bredbånd.nu arbejder med deres LCP. Selvom hjemmesiden konkurrerer mod nogle af de største leverandører af bredbånd som Fastspeed, Hiper, Telenor, YouSee osv., så rangerer de højt på Google grundet deres holistiske arbejde OG fordi LCP bare spiller. Tjek websitet ud her.

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 rendere noget som helst på skærmen. Jo hurtigere serversvar desto lavere LCP. Det er med andre ord værdien TTFB (Time to first Byte) du skal kigge efter i de forskellige hastighedsmålingsværktøjer, som Google Pagespeed og Pingdom Tools. Jo lavere TTFB des bedre.

Elementer der kunne forbedre serverens svar, kunne udover at få en bedre og hurtigere server, være at servere HTML-siders cache som det første og prøve at etablere tredjepartsforbindelser tidligt i forløbet (Rel=Preconnect og DNS-Prefetch).

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.

Herudover kan du reducere brugen af CSS generelt set, langt de fleste temaer, kommer med en masse CSS der ikke benyttes. Du kan bruge dækningstabben i Google Chromes DevTools til at finde frem til ubenyttet CSS, som du kan fjerne fra dine temafiler.

Ift. Javascript kan du igen gøre brug af minimering og komprimering, forsinke ikke benytte javascript og minimere ubenyttede polyfills (moderne kode til moderne browsere).

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.

Klik nu på åben rapport og kig under detaljer, hvor følgende oversigtsvindue kommer frem:

Herfra kan du klikke dig videre ind og trække en liste over sider, der skal forbedres.

Du kan også bruge Lighthouse, som er samme værktøj, som der benyttes i PageSpeed Insights.