Largest contentful paint forklaret: Sådan forbedrer du din tid

Har du problemer med at forbedre Largest Contentful Paint på dit websted? Eller er du ikke sikker på, hvad Largest Contentful Paint betyder, og hvorfor du overhovedet skal bekymre dig om det?

Uanset hvor du starter fra, er dette indlæg for dig, fordi du vil lære alt det, du har brug for at vide om Largest Contentful Paint.

Det omfatter, hvad Largest Contentful Paint betyder, hvorfor det er vigtigt, hvordan du måler det, og hvordan du kan forbedre det.

Du kan bruge indholdsfortegnelsen nedenfor til at springe til et specifikt afsnit baseret på dit nuværende vidensniveau. Eller du kan fortsætte med at læse videre for at starte fra begyndelsen.

Hvad er Largest Contentful Paint (LCP)? Forklaring af betydningen af Largest Contentful Paint

Largest Contentful Paint er en præstationsmetrik, der måler, hvor lang tid det tager hovedindholdet på en webside at indlæse.

Largest Contentful Paint er en del af Googles Core Web Vitals-metrikker sammen med CLS (Cumulative Layout Shift).

På et mere teknisk plan måler Largest Contentful Paint, hvor lang tid der går fra brugeren starter indlæsningen af siden, til den største tekstblok, det største billede eller den største video er gengivet i visningsområdet.

Hvad betyder “main content” i forbindelse med LCP?

Det vigtigste indhold afhænger af den pågældende side, men det kan være et af følgende elementer:

• Tekst – mere specifikt alle elementer på blokniveau, der indeholder tekstnoder eller andre tekstelementer på inline-niveau.
• Billede – elementer inden for et <img>-element eller <image>-elementer inden for et <svg>-element.
• Video – alle <video>-elementer (det bruger plakatbilledet).
• Et element med et baggrundsbillede – kun når det indlæses via CSS url()-funktionen (det gælder ikke for CSS-gradienter).

Senere i dette indlæg får du at vide, hvordan du finder det nøjagtige Largest Contentful Paint-element for enhver side på dit websted.

Største Contentful Paint vs. Første Contentful Paint

Et almindeligt spørgsmål, du måske har, er, hvad forskellen er på Largest Contentful Paint vs. First Contentful Paint, en anden almindelig præstationsmåling.

De to udtryk ligner hinanden, men den vigtigste forskel er, at Largest Contentful Paint måler, hvor lang tid det tager for sidens “main content” at indlæse, mens First Contentful Paint måler, hvor lang tid det tager for det “første objekt” at indlæse (uanset om det er hovedindholdet eller ej).

I princippet:

• LCP = kun main content
• FCP = første stykke indhold, uanset hvad dette indhold er

Som sådan vil din LCP-tid næsten altid være lidt højere end din FCP-tid, fordi “main content” normalt ikke er det første element, der indlæses.

Hvorfor er dit websteds største indholds malingstid vigtig?

Der er to hovedårsager til, at dit websteds Largest Contentful Paint-tider er vigtige:

1. Brugeroplevelse
2. Søgemaskineoptimering

Brugeroplevelse

Den største grund til, at du bør bekymre dig om dit websteds Largest Contentful Paint-tider, er, at denne måling er en god indikator for at forstå dine brugeres oplevelse af dit websteds ydeevne.

De fleste brugere er ligeglade med, hvor lang tid det tager dit websted at indlæse hvert enkelt script og element fuldt ud. I stedet bekymrer de sig om, hvor lang tid det tager for dem at begynde at få værdi fra dit websted.

Largest Contentful Paint gør et godt stykke arbejde med at forsøge at måle dette “værdi”-øjeblik ved at se, hvor lang tid det tager hovedindholdet at indlæse.

Hvis du optimerer dit websted til at opnå en hurtig Largest Contentful Paint-tid, kan du være ret sikker på, at du tilbyder brugerne en solid oplevelse på dit websted, i det mindste når det gælder ydeevne (du vil også gerne have et kundevenligt design og god brugervenlighed).

Det betyder selvfølgelig ikke, at du skal ignorere andre præstationsmålinger. Vi anbefaler altid, at du tager et holistisk kig på din hjemmesides ydeevne og flaskehalse, og derfor har vi skabt vores eget APM-værktøj (Application Performance Monitoring), som er gratis tilgængeligt, hvis du bruger Kinsta-hosting – Kinsta APM.

Søgemaskineoptimering (SEO)

På søgemaskineoptimeringsfronten er Largest Contentful Paint en del af Googles trio af Core Web Vitals-metrikker, som Google begyndte at bruge som en SEO-rangeringsfaktor i sin 2022 Page Experience-algoritmeopdatering.

Det betyder, at dårlige Largest Contentful Paint-tider kan være en hæmsko for dit websteds præstation i Googles søgeresultater.

Selv om andre faktorer som indholdskvalitet/relevans og backlinks stadig spiller en langt større rolle for, hvor dit websted rangerer, er det vigtigt at optimere dit websteds Largest Contentful Paint-tider for at sikre, at du får mest muligt ud af dine SEO-indsatser.

Hvad kan påvirke Largest Contentful Paint-scoringer?

Der er to “hovedtyper” af problemer, der kan påvirke en sides Largest Contentful Paint-tider:

1. Hvor lang tid det tager din server at svare med det oprindelige HTML-dokument.
2. Hvor lang tid det tager den faktiske LCP-ressource at indlæse.

Den første type problem omhandler serverens svartid, også kaldet TTFB (Time to first byte). Før en brugers browser overhovedet kan tænke på at indlæse hovedindholdet, skal den først få et svar fra serveren.

Her er nogle af de almindelige problemer, der påvirker dette:

• Manglende brug af sidecaching – manglende brug af sidecaching tvinger serveren til at udføre mere “arbejde”, før den kan svare med HTML-dokumentet.
• Langsom hosting – en langsom hostingudbyder vil altid have en langsom TTFB, uanset hvad du gør.
• Ikke at bruge et CDN – et content delivery network (CDN) kan fremskynde TTFB ved at servere sider fra sit globale netværk i stedet for at kræve, at brugerne henter dem fra dit websteds origin-server.

Efter at dit websteds server har leveret det oprindelige HTML-dokument, kan der være yderligere flaskehalse, når det kommer til indlæsning af selve hovedindholdselementet.

Her er nogle af de almindelige problemer, der påvirker dette:

• Render-blokerende JavaScript eller CSS (eller ikke-optimeret/unødvendig kode generelt) – hvis brugerens browser skal downloade og/eller behandle unødvendigt JavaScript eller CSS, før den kan indlæse hovedelementet, vil det gøre din LCP langsommere.
• Ikke-optimerede billeder – hvis LCP-elementet er et billede, vil brugen af ikke-optimerede billeder gøre din tid langsommere, fordi større billeder tager længere tid at downloade.
• Ikke-optimeret indlæsning af skrifttyper – hvis LCP-elementet er tekst, kan indlæsning af brugerdefinerede skrifttyper på en ikke-optimeret måde gøre, at det tager længere tid for teksten at blive vist.
• Ukomprimerede filer – hvis du ikke bruger komprimeringsteknologier som Gzip eller Brotli, vil det tage længere tid for brugerens browser at downloade filerne på dit websted.

Afhængigt af dit websted kan du opleve flaskehalse på begge områder eller kun på et af områderne. Du vil lære, hvordan du løser alle disse problemer lidt senere i dette indlæg.

Hvad er en god Largest Contentful Paint-tid?

Google definerer en “god” Largest Contentful Paint-tid som værende under 2,5 sekunder.

Hvis din sides største Contentful Paint-tid er mellem 2,5 og 4,0 sekunder, klassificerer Google den som “Behov for forbedring”. Og hvis din sides tid er over 4,0 sekunder, definerer Google den som “dårlig”.

Her er en grafik fra Google, der viser dette visuelt:

Sådan måler du Largest Contentful Paint: Bedste LCP-testværktøjer

Der findes en række værktøjer, du kan bruge til at teste dit websteds ydeevne for Largest Contentful Paint – lad os gennemgå nogle af de mest nyttige..

PageSpeed Insights

PageSpeed Insights er et af de bedste værktøjer til vurdering af Largest Contentful Paint, fordi det giver fire nyttige oplysninger:

1. Du kan se dit websteds Largest Contentful Paint-tider med rigtige brugere fra Chrome UX-rapporten(hvis dit websted har nok trafik til at blive inkluderet i rapporten).
2. Du kan køre simulerede tests for at se, hvordan dit websted klarer sig.
3. Google fortæller dig det faktiske LCP-element, der bruges til testen, så du kan vide, hvilket element du skal optimere.
4. Google vil give forslag til, hvordan du kan forbedre din LCP-tid.

Sådan kan du bruge det:

1. Gå til webstedet PageSpeed Insights.
2. Indtast URL’en for den side, du vil teste.
3. Klik på Analyser.

Google viser dig derefter resultater for både mobil og desktop – sørg for at tjekke begge dele.

Hvis du vil finde det vigtigste element, som Google bruger til at beregne LCP, kan du rulle ned til afsnittet Diagnostics og udvide afsnittet Largest Contentful Paint element:

Igen skal du sørge for at tjekke både mobil og desktop, da LCP-elementet kan være forskelligt for hver enkelt.

Chrome-udviklerværktøjer

Du kan også teste Largest Contentful Paint time direkte fra Chrome Developer Tools ved hjælp af fanen Ydelse eller dens Lighthouse audit-funktion. Vi anbefaler, at du bruger fanen Ydeevne , fordi den giver dig flere oplysninger.

Sådan starter du:

1. Åbn den side, du vil teste.
2. Åbn Chrome Developer Tools.
3. Gå til fanen Ydeevne.
4. Sørg for, at feltet Web Vitals er markeret.
5. Klik på knappen Genindlæsning (se nedenfor).

Du bør nu se en fuld analyse af dit websted.

Hvis du holder musen over LCP i fanen Netværk, kan du se tiden:

Hvis du holder musen over LCP i fanen Timings, kan du se det aktuelle LCP-element:

Google Search Console

Mens Google Search Console ikke giver dig mulighed for at teste en individuel side for dens Largest Contentful Paint-tid, er det virkelig nyttigt til at vurdere ydeevnen på hele webstedet.

Hver side på dit websted vil have en anden LCP-tid, så du kan ikke bare teste din hjemmeside og kalde det en dag.

Med Google Search Console kan du se, hvor hver enkelt side på dit websted falder i Googles kategoriseringer “God”, “Behov for forbedring” og “Dårlig”. Ydelsesdataene kommer fra Chrome UX-rapporten, så de er baseret på reelle brugerdata.

Hvis du ikke allerede har gjort det, skal du først verificere dit websted med Google Search Console.

Når du har gjort det, kan du se her, hvordan du får adgang til LCP-rapporten:

1. Åbn Google Search Console for dit websted.
2. Gå til Core Web Vitals under fanen Experience (oplevelse).
3. Klik på Åbn rapport ved siden af diagrammet Mobil eller Desktop.
4. Kig efter eventuelle problemer i afsnittet Hvorfor URL’er ikke anses for gode. Hvis du klikker på problemet, kan du se flere oplysninger om, hvilke URL’er der er årsag til problemerne.

*Sørg for at tjekke både desktop- og mobilresultaterne, da dataene kan være forskellige i de to tilfælde.

WebPageTest

WebPageTest er en anden praktisk mulighed for at køre simulerede ydelsestests.

I modsætning til PageSpeed Insights kan du med WebPageTest fuldt ud tilpasse forskellige testmetrikker, f.eks. testplacering, forbindelseshastighed, enhed og meget mere. Det er den største fordel ved at bruge det frem for andre værktøjer – det giver dig flere muligheder for at konfigurere testen.

Her er hvordan du kører en test:

1. Gå til WebPageTest.
2. Tilføj den side-URL, som du vil teste.
3. Udvid indstillingerne for avanceret konfiguration for at konfigurere din test fuldt ud.

På resultatsiden kan du se LCP-dataene sammen med masser af andre ydelsesmålinger (herunder en vandfaldsanalyse).

Sådan finder du et Largest Contentful Paint Element

Hvis du ønsker at forbedre Largest Contentful Paint, kan det være meget nyttigt at vide præcis, hvilket element Google bruger til at beregne din LCP-tid.

Hvis du f.eks. ved, at Google bruger dit heltebillede som LCP-element på din hjemmeside, ved du, at du skal finde måder at servere dette heltebillede så hurtigt som muligt, hvis du vil forbedre din hjemmesides LCP-tider.

Som vi nævnte tidligere, kan du finde dit Largest Contentful Paint-element ved hjælp af PageSpeed Insights eller Chrome Developer Tools.

Sørg for at tjekke både mobil og desktop-resultater, da dit LCP-element kan være forskelligt på forskellige enheder.

Sådan forbedrer du Largest Contentful Paint i WordPress (eller andre platforme)

Nu hvor du ved alt om Largest Contentful Paint, lad os komme ind på nogle handlingsorienterede tips til, hvordan du kan forbedre Largest Contentful Paint i WordPress.

Selv om vi vil fokusere på WordPress i disse tips, er alle tipsene universelle og gælder for andre typer websites.

Opsæt Caching for at forbedre serverens svartid

Caching kan forbedre serverens svartid ved at reducere det behandlingsarbejde, som din server skal udføre, før den kan levere det færdige HTML-dokument til de besøgendes browsere.

Hvis du hoster dit WordPress-websted hos Kinsta, behøver du ikke at bekymre dig om at konfigurere caching, fordi Kinsta automatisk implementerer optimeret caching for dig.

Hvis du hoster et andet sted, kan du aktivere caching på dit websted ved hjælp af et gratis plugin som WP Super Cache eller et betalt plugin som WP Rocket.

For flere muligheder kan du tjekke vores indlæg med de bedste WordPress caching-plugins til WordPress.

Opgrader til hurtigere WordPress-hosting

Mens alle taktikker på denne liste kan hjælpe dig med at forbedre din LCP-tid, er der ikke noget at komme udenom:

Hvis du bruger langsom, ikke-optimeret WordPress-hosting, vil dine LCP-tider altid blive begrænset af kvaliteten af din host.

Du kan måske gøre tingene lidt bedre, men du vil altid kæmpe for at opnå LCP-tider på under 2,5 sekunder, hvis din vært er langsom.

Hvis du vil have den nemmeste måde at forbedre dine Largest Contentful Paint-tider på, kan du migrere dit websted til Kinsta. Kinsta tilbyder ikke kun en ydelsesoptimeret hostinginfrastruktur, men vi har også indbyggede funktioner til at håndtere en masse af de andre optimeringer på denne liste.

Det betyder, at du kan fokusere på at udvikle dit websted i stedet for at rode rundt med optimering af Largest Contentful Paint-tider.

Hvis du er interesseret, vil Kinsta migrere ubegrænsede websites fra enhver host gratis – læs mere om gratis migration her.

Hvis du stadig er i tvivl – så prøv først resten af tipsene på denne liste. Men hvis du stadig kæmper efter at have gjort alt på denne liste, har du måske bare brug for bedre hosting.

Brug et Content Delivery Network (CDN)

Uden et CDN skal alle besøgende på dit websted downloade sidens HTML og statiske aktiver fra din hosting-server.

Hvis dine besøgende befinder sig tæt på din server, er det normalt ikke noget problem. Men hvis dine besøgende er spredt ud over hele verden, kan dette gøre dit websted langsommere på grund af den fysiske afstand mellem en besøgende og dit webstedsserver.

Med et CDN kan du distribuere dit websteds statiske aktiver (eller endda dit websteds færdige HTML-sider) til CDN’s globale netværk. På den måde kan de besøgende downloade filer fra den nærmeste placering af CDN’en, hvilket er meget hurtigere.

Hvis du hoster hos Kinsta, anbefaler vi, at du bruger Kinas Edge Caching-funktion for at opnå de bedste resultater.

Kinstas Edge Caching-funktion fungerer ved at cache dit websteds fulde HTML-sider og statiske aktiver til Cloudflares globale netværk (istedet for kun at cache statiske aktiver som de fleste CDN-løsninger).

Det betyder, at de besøgende på dit websted kan downloade hele siden fra den nærmeste kantplacering, hvilket fremskynder både serverens svartid og den tid, det tager din LCP-ressource at indlæse.

Hvis du vil aktivere Kinsta’s Edge Caching, skal du gå til fanen Edge Caching på dit webstedets dashboard i MyKinsta.

Hvis du har hosting et andet sted, kan du oprette et CDN til dit websteds statiske aktiver ved hjælp af populære CDN-tjenester såsom KeyCDN, Bunny, og andre.

Undgå Render-blokerende JavaScript (udsæt eller fjern)

Render-blokerende JavaScript er JavaScript, der indlæses før dit vigtigste LCP-element, selv om det ikke er nødvendigt på det tidspunkt.

Ved at forsinke indlæsningen af LCP-elementet vil det sænke dine LCP-indlæsningstider.

For at løse dette er der et par strategier, som du kan implementere:

• Fjern unødvendigt JavaScript, hvis det er muligt.
• Udskyd JavaScript, så det ikke blokerer for indlæsning af dit websteds hovedelement.
• Forsink JavaScript, indtil en bruger interagerer med dit websted.

For de fleste mennesker er den nemmeste måde at implementere denne funktionalitet på via plugins som Autoptimize eller WP Rocket.

For en komplet vejledning om, hvordan du gør dette, har vi to meget detaljerede indlæg:

• Sådan fjerner du render-blokerende ressourcer på WordPress
• Sådan udskyder du parsing af JavaScript

Undgå render-blokerende CSS og optimering af CSS-levering

Ligesom uoptimeret JavaScript kan gøre dit websted langsommere, kan ikke-optimeret CSS også gøre det samme.

Du skal indlæse så lidt CSS som muligt. Og for den CSS, som du skal indlæse, skal du indlæse den på en optimal måde. Det betyder typisk, at du vil indlæse vigtig CSS tidligt, mens du udskyder ikke-kritisk CSS til senere i indlæsningsprocessen.

Hvis du ikke er udvikler, er den nemmeste måde at opnå dette på ved at bruge plugins til optimering af ydeevne som Perfmatters, WP Rocket eller FlyingPress.

WP Rocket tilbyder f.eks. indbyggede funktioner til at fjerne ubrugt CSS på sidevis og servere CSS på en optimal måde.

Hvis du vil have et meget dybere kig på, hvordan du gør alt dette, kan du læse vores komplette guide om hvordan du optimerer CSS.

Minimér din HTML, CSS og JavaScript

Ud over kodeoptimering-teknikkerne ovenfor, vil du også gerne formindske dit websteds HTML, CSS og JavaScript. Dette fjerner i det væsentlige unødvendige tegn og mellemrum fra dit websteds kode for at formindske størrelsen.

Du kan bruge et gratis plugin som Autoptimize til at formindske din kode eller et af de premium omfattende plugins som Perfmatters, WP Rocket eller FlyingPress.

Eller se vores fulde kodeminificeringsvejledning for at lære mere. Selv om vejledningen fokuserer på JavaScript, kan du også bruge de samme metoder og plugins til at minificere anden kode.

Brug komprimering på serverniveau (Gzip eller Brotli)

Med komprimering på serverniveau kan du reducere størrelsen af dit websteds filer ved hjælp af teknologier som Gzip eller Brotli.

Den komprimering, som vi bruger til Kinsta-webstedet, reducerede f.eks. filstørrelsen på Kinsta-hjemmesiden med 85,82%.

Hvis du hoster dit WordPress-websted hos Kinsta, behøver du ikke at bekymre dig om dette, fordi Kinsta aktiverer Brotli-komprimering for alle websteder automatisk.

Hvis du hoster dit websted et andet sted, kan du bruge dette gratis værktøj fra GiftOfSpeed til at kontrollere, om dit websted har Gzip eller Brotli aktiveret.

Hvis dit websted ikke bruger komprimering, kan du følge vores vejledning om, hvordan du aktiverer Gzip-komprimering for at konfigurere det.

Hvis du bruger Cloudflare til at servere indholdet på dit websted, har Cloudflare også en indbygget indstilling til at aktivere Brotli-komprimering:

1. Åbn dit websted i Cloudflare-dashboardet.
2. Gå til Hastighed → Optimering i menuen i sidebaren.
3. Aktiver Brotli-omskifteren.

Komprimering og ændring af størrelsen på billeder

Hvis dit LCP-element er et billede, vil det at finde måder at reducere størrelsen af denne billedfil på reducere den tid, det tager en brugers browser at downloade billedet (og dermed gøre din LCP-tid hurtigere).

For at reducere billedets størrelse bør du ændre størrelsen på billedet til de dimensioner, hvor du rent faktisk bruger det, komprimere det ved hjælp af tabsgivende eller tabsfri komprimering og servere det i et optimeret format som WebP.

Denne fremgangsmåde er bare generelt en bedste praksis for optimering af ydeevne – den er ikke specifik for Largest Contentful Paint.

Hvis du vil have et mere omfattende kig, kan du læse vores detaljerede vejledning om billedoptimering til websteder.

Og åh ja – hvis du hoster dit WordPress-websted hos Kinsta, behøver du ikke at bekymre dig om dette, fordi Kinsta tilbyder en indbygget funktion til automatisk at optimere dit websteds billeder uden behov for tredjepartsværktøjer.

Her er hvordan du aktiverer denne funktion:

1. Åbn dit webstedets instrumentbræt i MyKinsta.
2. Gå til fanen CDN-fanen.
3. Klik på Indstillinger ved siden af Billedeoptimering.
4. Vælg dit foretrukne niveau af billedoptimering, og gem indstillingerne – hvis du bruger Lossy, giver det de største hastighedsforbedringer, selvom det kan have en lille effekt på billedkvaliteten.

Forudindlæs Largest Contentful Paint-billede

Hvis dit LCP-element er et billede, er en anden strategi til forbedring af LCP at forudindlæse det største indholdsrige Paint-billede. Derfor kan du se en anbefaling som “Preload Largest Contentful Paint image” i PageSpeed Insights.

Med preload kan du fortælle en brugers browser, at den skal prioritere downloading af visse ressourcer, f.eks. det specifikke billede, der er LCP-elementet på dit websted.

Den mest ikke-tekniske måde at forhåndsindlæse LCP-billeder på er at bruge et plugin som Perfmatters, der tilbyder en dedikeret funktion Preload Critical Images (forhåndsindlæs kritiske billeder). Det eneste du skal gøre er at angive, hvor mange billeder der skal preloades – vi anbefaler, at du kun starter med ét, da preload af for mange aktiver kan have en negativ effekt.

Der er også nogle gratis plugins på WordPress.org til at opnå dette, såsom WPZOOM’s Preload Featured Images plugin, samt andre premium plugins, såsom FlyingPress.

Tjek for problemer med lazy loading

Et andet problem, der kan udløse meddelelsen “Preload Largest Contentful Paint image” i PageSpeed Insights, er problemer med, hvordan dit WordPress-websted lazy loading-billeder.

Eller dette kan også udløse en advarsel “Largest Contentful Paint image was lazy loaded” i PageSpeed Insights.

Med lazy loading kan du fremskynde dit websteds indledende indlæsningstider ved at vente med at indlæse visse ressourcer (f.eks. billeder), indtil en bruger begynder at interagere med dit websted.

Selv om det normalt er en god ting, kan det sænke dine LCP-tider, hvis dit websted forsøger at lazy load det billede, der er dit LCP-element. Derfor skal du sørge for, at dit websted ikke kører lazy loading på billeder, der er synlige i den oprindelige visningsflade.

Hvis du bruger den oprindelige browserfunktion til doven indlæsning, som WordPress introducerede i WordPress 5.5, bør du ikke opleve dette problem, fordi WordPress allerede automatisk udelukker det første billede i indholdet fra WordPress 5.9.

Hvis du ønsker at udelukke mere end det første billede, kan du bruge funktionen wp_omit_loading_attr_threshold (men de fleste vil ikke have behov for at gøre noget her).

Hvis du bruger et JavaScript-drevet lazy loading-plugin, skal du dog muligvis manuelt opsætte denne udelukkelse i plugin’ets indstillinger. Perfmatters-plugin’et indeholder f.eks. en mulighed for at lade dig udelukke de første “X”-billeder fra lazy loading.

Hvis dit lazy loading-plugin ikke lader dig indstille denne type udelukkelse, kan du skifte til et andet plugin, der gør det.

For eksempel udelukker WP Rocket automatisk alle billeder over skillelinjen, inklusive LCP-billedet, fra lazy loading, hvilket hjælper dig med at spare tid og besværet med at gøre det manuelt. Pluginet udfører optimeringen som standard lige ved aktivering, så du behøver ikke at markere nogle muligheder.

Optimering af indlæsning af skrifttyper med Font-Display: Valgfri

Hvis dit LCP-element er tekst, kan dit websteds indlæsningsproces af skrifttyper forsinke tekstens udseende, hvilket vil forsinke din LCP-tid.

Dette sker typisk, når der anvendes bruger tilpassede skrifttyper. Hvis dit websted er konfigureret til at vente med at gengive tekst, indtil den brugerdefinerede skrifttype er indlæst, vil det gøre tingene langsommere, hvis filen med den brugerdefinerede skrifttype tager lang tid at indlæse.

For at løse dette kan du bruge Font-Display: Valgfri CSS-deskriptor.

Dette fortæller browseren, at den skal bruge en fallback-skrifttype, hvis den tilpassede skrifttype ikke indlæses inden for et lille vindue (normalt omkring 100 ms eller mindre).

I almindeligt sprog betyder det grundlæggende, at browseren skal give den tilpassede skrifttype en chance for at blive indlæst. Men hvis den brugerdefinerede skrifttype ikke indlæses hurtigt nok, skal browseren blot bruge en systemskrifttype, der kan bruges som fallback, for at undgå at forsinke indholdet yderligere.

Alternativt kan du også bruge Font-Display: Swap, som indlæser fallback-skrifttypen med det samme og derefter “bytter” den brugerdefinerede skrifttype ind, når den brugerdefinerede skrifttype er indlæst. Denne fremgangsmåde kan dog give problemer med Cumulative Layout Shift, hvis skrifttyperne er af forskellig størrelse, så du skal være forsigtig.

Medmindre din brugerdefinerede skrifttype er absolut nødvendig for dit websteds design, skal du bruge Font-Display: Optional er normalt den bedste løsning ud fra et Core Web Vitals-perspektiv.

Hvis du er fortrolig med at bruge CSS direkte, kan du manuelt redigere Font-Display-egenskaben i stylesheet’et for dit undertema.

Hvis du ikke ønsker at bruge CSS, kan du også finde plugins, der kan hjælpe dig med dette, selv om de fleste af dem er fokuseret på optimering til Google Fonts:

• Asset CleanUp – understøtter Google Fonts gratis og brugerdefinerede lokale skrifttyper med Pro-versionen.
• Perfmatters – tilbyder en funktion til Google Fonts.

Hvis du bruger Elementor til at designe dit websted, indeholder Elementor også en indbygget indstilling, så du kan bruge dette til sider, som du opretter med Elementor:

1. Gå til Elementor → Indstillinger.
2. Åbn fanen Avanceret.
3. Indstil rullemenuen Google Fonts Load lig med Optional (Valgfrit).

Oversigt

Det er vigtigt at lære at forbedre Largest Contentful Paint for at forbedre brugeroplevelsen af dit websted og maksimere din placering i søgemaskinerne.

Der er generelt to dele til at forbedre Largest Contentful Paint – at fremskynde serverens svartid og derefter optimere dit websteds kode til at gengive LCP-elementet så hurtigt som muligt.

Hvis du ikke ønsker at bekymre dig om langsom serverresponstid, kan du flytte dit WordPress-websted til Kinsta. Kinsta’s præstationsoptimerede arkitektur er specielt designet til at levere dit websted så hurtigt som muligt.

Med Kinstas Edge Caching-funktion kan du desuden cache dit websteds sider til Cloudflares globale netværk, hvilket betyder, at besøgende fra hele verden vil nyde godt af lynhurtige serverresponstider (og dermed lynhurtige LCP-tider).

Hvis du vil vide mere, kan du tjekke disse sider for at få flere oplysninger om Kinsta’s administrerede WordPress-hosting eller Kinsta’s administrerede WooCommerce-hosting.

Hvis du gerne vil have en professionel til at hjælpe dig med nogle brugerdefinerede LCP-performanceoptimeringer, kan du også finde en udbyder i Kinsta Agency Directory.