Hvad er Largest Contentful Paint (LCP)? Forklaring af betydningen af Largest Contentful Paint<\/h2>\n
Largest Contentful Paint er en pr\u00e6stationsmetrik, der m\u00e5ler, hvor lang tid det tager hovedindholdet p\u00e5 en webside at indl\u00e6se.<\/p>\n
Largest Contentful Paint er en del af Googles Core Web Vitals-metrikker<\/a> sammen med CLS (Cumulative Layout Shift)<\/a>.<\/p>\n P\u00e5 et mere teknisk plan m\u00e5ler Largest Contentful Paint, hvor lang tid der g\u00e5r fra brugeren starter indl\u00e6sningen af siden, til den st\u00f8rste tekstblok, det st\u00f8rste billede eller den st\u00f8rste video er gengivet i visningsomr\u00e5det.<\/p>\n Hvad betyder “main content” i forbindelse med LCP?<\/p>\n Det vigtigste indhold afh\u00e6nger af den p\u00e5g\u00e6ldende side, men det kan v\u00e6re et af f\u00f8lgende elementer:<\/p>\n Senere i dette indl\u00e6g f\u00e5r du at vide, hvordan du finder det n\u00f8jagtige Largest Contentful Paint-element for enhver side p\u00e5 dit websted.<\/p>\n\n Et almindeligt sp\u00f8rgsm\u00e5l, du m\u00e5ske har, er, hvad forskellen er p\u00e5 Largest Contentful Paint vs. First Contentful Paint<\/a>, en anden almindelig pr\u00e6stationsm\u00e5ling.<\/p>\n De to udtryk ligner hinanden, men den vigtigste forskel er, at Largest Contentful Paint m\u00e5ler, hvor lang tid det tager for sidens “main content” at indl\u00e6se, mens First Contentful Paint m\u00e5ler, hvor lang tid det tager for det “f\u00f8rste objekt” at indl\u00e6se (uanset om det er hovedindholdet eller ej<\/em>).<\/p>\n I princippet:<\/p>\n Som s\u00e5dan vil din LCP-tid n\u00e6sten altid v\u00e6re lidt h\u00f8jere end din FCP-tid, fordi “main content” normalt ikke er det f\u00f8rste element, der indl\u00e6ses.<\/p>\n Der er to hoved\u00e5rsager til, at dit websteds Largest Contentful Paint-tider er vigtige:<\/p>\n Den st\u00f8rste grund til, at du b\u00f8r bekymre dig om dit websteds Largest Contentful Paint-tider, er, at denne m\u00e5ling er en god indikator for at forst\u00e5 dine brugeres oplevelse af dit websteds ydeevne.<\/p>\n De fleste brugere er ligeglade med, hvor lang tid det tager dit websted at indl\u00e6se hvert enkelt script og element fuldt ud. I stedet bekymrer de sig om, hvor lang tid det tager for dem at begynde at f\u00e5 v\u00e6rdi fra dit websted.<\/p>\n Largest Contentful Paint g\u00f8r et godt stykke arbejde med at fors\u00f8ge at m\u00e5le dette “v\u00e6rdi”-\u00f8jeblik ved at se, hvor lang tid det tager hovedindholdet at indl\u00e6se.<\/p>\n Hvis du optimerer dit websted til at opn\u00e5 en hurtig Largest Contentful Paint-tid, kan du v\u00e6re ret sikker p\u00e5, at du tilbyder brugerne en solid oplevelse p\u00e5 dit websted, i det mindste n\u00e5r det g\u00e6lder ydeevne (du vil ogs\u00e5 gerne have et kundevenligt design<\/a> og god brugervenlighed<\/a>).<\/p>\n Det betyder selvf\u00f8lgelig ikke, at du skal ignorere andre pr\u00e6stationsm\u00e5linger. Vi anbefaler altid, at du tager et holistisk kig p\u00e5 din hjemmesides ydeevne og flaskehalse<\/a>, og derfor har vi skabt vores eget APM-v\u00e6rkt\u00f8j (Application Performance Monitoring<\/a>), som er gratis tilg\u00e6ngeligt, hvis du bruger Kinsta-hosting – Kinsta APM<\/a>.<\/p>\n P\u00e5 s\u00f8gemaskineoptimeringsfronten<\/a> er Largest Contentful Paint en del af Googles trio af Core Web Vitals-metrikker, som Google begyndte at bruge som en SEO-rangeringsfaktor<\/a> i sin 2022 Page Experience-algoritmeopdatering.<\/p>\n Det betyder, at d\u00e5rlige Largest Contentful Paint-tider kan v\u00e6re en h\u00e6msko for dit websteds pr\u00e6station i Googles s\u00f8geresultater.<\/p>\n Selv om andre faktorer som indholdskvalitet\/relevans<\/a> og backlinks stadig spiller en langt st\u00f8rre rolle for,<\/a> hvor dit websted rangerer<\/a>, er det vigtigt at optimere dit websteds Largest Contentful Paint-tider for at sikre, at du f\u00e5r mest muligt ud af dine SEO-indsatser.<\/p>\n Der er to “hovedtyper” af problemer, der kan p\u00e5virke en sides Largest Contentful Paint-tider:<\/p>\n Den f\u00f8rste type problem omhandler serverens svartid, ogs\u00e5 kaldet TTFB (Time to first byte)<\/a>. F\u00f8r en brugers browser overhovedet kan t\u00e6nke p\u00e5 at indl\u00e6se hovedindholdet, skal den f\u00f8rst f\u00e5 et svar fra serveren.<\/p>\n Her er nogle af de almindelige problemer, der p\u00e5virker dette:<\/p>\n Efter at dit websteds server har leveret det oprindelige HTML-dokument, kan der v\u00e6re yderligere flaskehalse, n\u00e5r det kommer til indl\u00e6sning af selve hovedindholdselementet.<\/p>\n Her er nogle af de almindelige problemer, der p\u00e5virker dette:<\/p>\n Afh\u00e6ngigt af dit websted kan du opleve flaskehalse p\u00e5 begge omr\u00e5der eller kun p\u00e5 et af omr\u00e5derne. Du vil l\u00e6re, hvordan du l\u00f8ser alle disse problemer lidt senere i dette indl\u00e6g.<\/p>\n Google definerer en “god” Largest Contentful Paint-tid som v\u00e6rende under 2,5 sekunder.<\/p>\n Hvis din sides st\u00f8rste 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\u00e5rlig”.<\/p>\n Her er en grafik fra Google, der viser dette visuelt:<\/p>\n Der findes en r\u00e6kke v\u00e6rkt\u00f8jer, du kan bruge til at teste dit websteds ydeevne<\/a> for Largest Contentful Paint – lad os gennemg\u00e5 nogle af de mest nyttige..<\/p>\n PageSpeed Insights<\/a> er et af de bedste v\u00e6rkt\u00f8jer til vurdering af Largest Contentful Paint, fordi det giver fire nyttige oplysninger:<\/p>\n S\u00e5dan kan du bruge det:<\/p>\n Google viser dig derefter resultater for b\u00e5de mobil og desktop – s\u00f8rg for at tjekke begge dele.<\/p>\n Hvis du vil finde det vigtigste element, som Google bruger til at beregne LCP, kan du rulle ned til afsnittet Diagnostics <\/strong>og udvide afsnittet Largest Contentful Paint element<\/strong>:<\/p>\n Igen skal du s\u00f8rge for at tjekke b\u00e5de mobil og desktop, da LCP-elementet kan v\u00e6re forskelligt for hver enkelt.<\/p>\n Du kan ogs\u00e5 teste Largest Contentful Paint time direkte fra Chrome Developer Tools<\/a> ved hj\u00e6lp af fanen Ydelse eller dens Lighthouse audit-funktion. Vi anbefaler, at du bruger fanen Ydeevne <\/strong>, fordi den giver dig flere oplysninger.<\/p>\n S\u00e5dan starter du:<\/p>\n Du b\u00f8r nu se en fuld analyse af dit websted.<\/p>\n Hvis du holder musen over LCP i fanen Netv\u00e6rk<\/strong>, kan du se tiden:<\/p>\n Hvis du holder musen over LCP i fanen Timings<\/strong>, kan du se det aktuelle LCP-element:<\/p>\n 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\u00e5 hele webstedet.<\/p>\n Hver side p\u00e5 dit websted vil have en anden LCP-tid, s\u00e5 du kan ikke bare teste din hjemmeside og kalde det en dag.<\/p>\n Med Google Search Console<\/a> kan du se, hvor hver enkelt side p\u00e5 dit websted falder i Googles kategoriseringer “God”, “Behov for forbedring” og “D\u00e5rlig”. Ydelsesdataene kommer fra Chrome UX-rapporten, s\u00e5 de er baseret p\u00e5 reelle brugerdata.<\/p>\n Hvis du ikke allerede har gjort det, skal du f\u00f8rst verificere dit websted med Google Search Console<\/a>.<\/p>\n N\u00e5r du har gjort det, kan du se her, hvordan du f\u00e5r adgang til LCP-rapporten:<\/p>\n *S\u00f8rg for at tjekke b\u00e5de desktop- og mobilresultaterne, da dataene kan v\u00e6re forskellige i de to tilf\u00e6lde.<\/em><\/p>\n WebPageTest<\/a> er en anden praktisk mulighed for at k\u00f8re simulerede ydelsestests<\/a>.<\/p>\n I mods\u00e6tning til PageSpeed Insights kan du med WebPageTest fuldt ud tilpasse forskellige testmetrikker, f.eks. testplacering, forbindelseshastighed, enhed og meget mere. Det er den st\u00f8rste fordel ved at bruge det frem for andre v\u00e6rkt\u00f8jer – det giver dig flere muligheder for at konfigurere testen.<\/p>\n Her er hvordan du k\u00f8rer en test:<\/p>\n P\u00e5 resultatsiden kan du se LCP-dataene sammen med masser af andre ydelsesm\u00e5linger (herunder en vandfaldsanalyse).<\/p>\n Hvis du \u00f8nsker at forbedre Largest Contentful Paint, kan det v\u00e6re meget nyttigt at vide pr\u00e6cis, hvilket element Google bruger til at beregne din LCP-tid.<\/p>\n Hvis du f.eks. ved, at Google bruger dit heltebillede som LCP-element p\u00e5 din hjemmeside, ved du, at du skal finde m\u00e5der at servere dette heltebillede s\u00e5 hurtigt som muligt, hvis du vil forbedre din hjemmesides LCP-tider.<\/p>\n Som vi n\u00e6vnte tidligere, kan du finde dit Largest Contentful Paint-element ved hj\u00e6lp af PageSpeed Insights eller Chrome Developer Tools.<\/p>\n S\u00f8rg for at tjekke b\u00e5de mobil og desktop-resultater, da dit LCP-element kan v\u00e6re forskelligt p\u00e5 forskellige enheder.<\/strong><\/p>\n Nu hvor du ved alt om Largest Contentful Paint, lad os komme ind p\u00e5 nogle handlingsorienterede tips til, hvordan du kan forbedre Largest Contentful Paint i WordPress.<\/p>\n Selv om vi vil fokusere p\u00e5 WordPress i disse tips, er alle tipsene universelle og g\u00e6lder for andre typer websites.<\/p>\n Caching<\/a> kan forbedre serverens svartid ved at reducere det behandlingsarbejde, som din server skal udf\u00f8re, f\u00f8r den kan levere det f\u00e6rdige HTML-dokument til de bes\u00f8gendes browsere.<\/p>\n Hvis du hoster dit WordPress-websted hos Kinsta, beh\u00f8ver du ikke at bekymre dig om at konfigurere caching, fordi Kinsta automatisk implementerer optimeret caching for dig<\/a>.<\/p>\n Hvis du hoster et andet sted, kan du aktivere caching p\u00e5 dit websted ved hj\u00e6lp af et gratis plugin som WP Super Cache<\/a> eller et betalt plugin som WP Rocket<\/a>.<\/p>\n For flere muligheder kan du tjekke vores indl\u00e6g med de bedste WordPress caching-plugins til WordPress<\/a>.<\/p>\n Mens alle taktikker p\u00e5 denne liste kan hj\u00e6lpe dig med at forbedre din LCP-tid, er der ikke noget at komme udenom:<\/p>\n Hvis du bruger langsom, ikke-optimeret WordPress-hosting<\/a>, vil dine LCP-tider altid blive begr\u00e6nset af kvaliteten af din host.<\/p>\n Du kan m\u00e5ske g\u00f8re tingene lidt bedre, men du vil altid k\u00e6mpe for at opn\u00e5 LCP-tider p\u00e5 under 2,5 sekunder, hvis din v\u00e6rt er langsom.<\/p>\n Hvis du vil have den nemmeste m\u00e5de at forbedre dine Largest Contentful Paint-tider p\u00e5, kan du migrere dit websted til Kinsta<\/a>. Kinsta tilbyder ikke kun en ydelsesoptimeret hostinginfrastruktur<\/a>, men vi har ogs\u00e5 indbyggede funktioner til at h\u00e5ndtere en masse af de andre optimeringer p\u00e5 denne liste.<\/p>\n Det betyder, at du kan fokusere p\u00e5 at udvikle dit websted i stedet for at rode rundt med optimering af Largest Contentful Paint-tider.<\/p>\n Hvis du er interesseret, vil Kinsta migrere ubegr\u00e6nsede websites fra enhver host gratis<\/strong> – l\u00e6s mere om gratis migration her<\/a>.<\/p>\n Hvis du stadig er i tvivl – s\u00e5 pr\u00f8v f\u00f8rst resten af tipsene p\u00e5 denne liste. Men hvis du stadig k\u00e6mper efter at have gjort alt p\u00e5 denne liste, har du m\u00e5ske bare brug for bedre hosting.<\/p>\n Uden et CDN skal alle bes\u00f8gende p\u00e5 dit websted downloade sidens HTML og statiske aktiver fra din hosting-server.<\/p>\n Hvis dine bes\u00f8gende befinder sig t\u00e6t p\u00e5 din server, er det normalt ikke noget problem. Men hvis dine bes\u00f8gende er spredt ud over hele verden, kan dette g\u00f8re dit websted langsommere p\u00e5 grund af den fysiske afstand mellem en bes\u00f8gende og dit webstedsserver.<\/p>\n Med et CDN kan du distribuere dit websteds statiske aktiver (eller endda dit websteds f\u00e6rdige HTML-sider) til CDN’s globale netv\u00e6rk. P\u00e5 den m\u00e5de kan de bes\u00f8gende downloade filer fra den n\u00e6rmeste placering af CDN’en, hvilket er meget hurtigere<\/a>.<\/p>\n Hvis du hoster hos Kinsta<\/a>, anbefaler vi, at du bruger Kinas Edge Caching-funktion<\/a> for at opn\u00e5 de bedste resultater.<\/p>\n Kinstas Edge Caching-funktion fungerer ved at cache dit websteds fulde HTML-sider og statiske aktiver til Cloudflares globale netv\u00e6rk<\/a> (istedet for kun at cache statiske aktiver som de fleste CDN-l\u00f8sninger<\/em>).<\/p>\n Det betyder, at de bes\u00f8gende p\u00e5 dit websted kan downloade hele siden fra den n\u00e6rmeste kantplacering, hvilket fremskynder b\u00e5de serverens svartid og<\/em> den tid, det tager din LCP-ressource at indl\u00e6se.<\/p>\n Hvis du vil aktivere Kinsta’s Edge Caching, skal du g\u00e5 til fanen Edge Caching<\/strong> p\u00e5 dit webstedets dashboard i MyKinsta<\/a>.<\/p>\n Hvis du har hosting et andet sted, kan du oprette et CDN til dit websteds statiske aktiver ved hj\u00e6lp af popul\u00e6re CDN-tjenester s\u00e5som KeyCDN, Bunny, og andre.<\/p>\n Render-blokerende JavaScript er JavaScript, der indl\u00e6ses f\u00f8r dit vigtigste LCP-element, selv om det ikke er n\u00f8dvendigt p\u00e5 det tidspunkt.<\/p>\n Ved at forsinke indl\u00e6sningen af LCP-elementet vil det s\u00e6nke dine LCP-indl\u00e6sningstider.<\/p>\n For at l\u00f8se dette er der et par strategier, som du kan implementere:<\/p>\n For de fleste mennesker er den nemmeste m\u00e5de at implementere denne funktionalitet p\u00e5 via plugins som Autoptimize<\/a> eller WP Rocket<\/a>.<\/p>\n For en komplet vejledning om, hvordan du g\u00f8r dette, har vi to meget detaljerede indl\u00e6g:<\/p>\n Ligesom uoptimeret JavaScript kan g\u00f8re dit websted langsommere, kan ikke-optimeret CSS ogs\u00e5 g\u00f8re det samme.<\/p>\n Du skal indl\u00e6se s\u00e5 lidt CSS som muligt. Og for den CSS, som du skal indl\u00e6se, skal du indl\u00e6se den p\u00e5 en optimal m\u00e5de. Det betyder typisk, at du vil indl\u00e6se vigtig CSS tidligt, mens du udskyder ikke-kritisk CSS til senere i indl\u00e6sningsprocessen.<\/p>\n Hvis du ikke er udvikler, er den nemmeste m\u00e5de at opn\u00e5 dette p\u00e5 ved at bruge plugins til optimering af ydeevne som Perfmatters<\/a>, WP Rocket<\/a> eller FlyingPress<\/a>.<\/p>\n WP Rocket tilbyder f.eks. indbyggede funktioner til at fjerne ubrugt CSS p\u00e5 sidevis og servere CSS p\u00e5 en optimal m\u00e5de.<\/p>\n Hvis du vil have et meget dybere kig p\u00e5, hvordan du g\u00f8r alt dette, kan du l\u00e6se vores komplette guide om hvordan du optimerer CSS<\/a>.<\/p>\n Ud over kodeoptimering-teknikkerne ovenfor, vil du ogs\u00e5 gerne formindske dit websteds HTML, CSS og JavaScript. Dette fjerner i det v\u00e6sentlige un\u00f8dvendige tegn og mellemrum fra dit websteds kode for at formindske st\u00f8rrelsen.<\/p>\n Du kan bruge et gratis plugin som Autoptimize til at formindske din kode<\/a> eller et af de premium omfattende plugins som Perfmatters, WP Rocket eller FlyingPress.<\/p>\n Eller se vores fulde kodeminificeringsvejledning<\/a> for at l\u00e6re mere. Selv om vejledningen fokuserer p\u00e5 JavaScript, kan du ogs\u00e5 bruge de samme metoder og plugins til at minificere anden kode.<\/p>\n Med komprimering p\u00e5 serverniveau kan du reducere st\u00f8rrelsen af dit websteds filer ved hj\u00e6lp af teknologier som Gzip eller Brotli<\/a>.<\/p>\n Den komprimering, som vi bruger til Kinsta-webstedet, reducerede f.eks. filst\u00f8rrelsen p\u00e5 Kinsta-hjemmesiden med 85,82%.<\/p>\n Hvis du hoster dit WordPress-websted hos Kinsta, beh\u00f8ver du ikke at bekymre dig om dette, fordi Kinsta aktiverer Brotli-komprimering for alle websteder automatisk.<\/p>\n Hvis du hoster dit websted et andet sted, kan du bruge dette gratis v\u00e6rkt\u00f8j fra GiftOfSpeed<\/a> til at kontrollere, om dit websted har Gzip eller Brotli aktiveret.<\/p>\n Hvis dit websted ikke bruger komprimering, kan du f\u00f8lge vores vejledning om, hvordan du aktiverer Gzip-komprimering for at konfigurere det<\/a>.<\/p>\n Hvis du bruger Cloudflare til at servere indholdet p\u00e5 dit websted, har Cloudflare ogs\u00e5 en indbygget indstilling til at aktivere Brotli-komprimering:<\/p>\n Hvis dit LCP-element er et billede, vil det at finde m\u00e5der at reducere st\u00f8rrelsen af denne billedfil p\u00e5 reducere den tid, det tager en brugers browser at downloade billedet (og dermed g\u00f8re din LCP-tid hurtigere).<\/p>\n For at reducere billedets st\u00f8rrelse b\u00f8r du \u00e6ndre st\u00f8rrelsen p\u00e5 billedet til de dimensioner, hvor du rent faktisk bruger det, komprimere det ved hj\u00e6lp af tabsgivende eller tabsfri komprimering<\/a> og servere det i et optimeret format som WebP<\/a>.<\/p>\n Denne fremgangsm\u00e5de er bare generelt en<\/em> bedste praksis for optimering af ydeevne<\/em><\/a> – den er ikke specifik for Largest Contentful Paint.<\/em><\/p>\n Hvis du vil have et mere omfattende kig, kan du l\u00e6se vores detaljerede vejledning om billedoptimering til websteder<\/a>.<\/p>\n Og \u00e5h ja – hvis du hoster dit WordPress-websted hos Kinsta, beh\u00f8ver du ikke at bekymre dig om dette, fordi Kinsta tilbyder en indbygget funktion til automatisk at optimere dit websteds billeder<\/a> uden behov for tredjepartsv\u00e6rkt\u00f8jer.<\/p>\n Her er hvordan du aktiverer denne funktion:<\/p>\n Hvis dit LCP-element er et billede, er en anden strategi til forbedring af LCP at forudindl\u00e6se det st\u00f8rste indholdsrige Paint-billede. Derfor kan du se en anbefaling som “Preload Largest Contentful Paint image” i PageSpeed Insights.<\/p>\n Med preload kan du fort\u00e6lle en brugers browser, at den skal prioritere downloading af visse ressourcer, f.eks. det specifikke billede, der er LCP-elementet p\u00e5 dit websted.<\/p>\n Den mest ikke-tekniske m\u00e5de at forh\u00e5ndsindl\u00e6se LCP-billeder p\u00e5 er at bruge et plugin som Perfmatters<\/a>, der tilbyder en dedikeret funktion Preload Critical Images (forh\u00e5ndsindl\u00e6s kritiske billeder)<\/strong>. Det eneste du skal g\u00f8re er at angive, hvor mange billeder der skal preloades – vi anbefaler, at du kun starter med \u00e9t, da preload af for mange aktiver kan have en negativ effekt.<\/p>\n Der er ogs\u00e5 nogle gratis plugins p\u00e5 WordPress.org til at opn\u00e5 dette, s\u00e5som WPZOOM’s Preload Featured Images plugin<\/a>, samt andre premium plugins, s\u00e5som FlyingPress<\/a>.<\/p>\n Et andet problem, der kan udl\u00f8se meddelelsen “Preload Largest Contentful Paint image” i PageSpeed Insights, er problemer med, hvordan dit WordPress-websted lazy loading-billeder<\/a>.<\/p>\n Eller dette kan ogs\u00e5 udl\u00f8se en advarsel “Largest Contentful Paint image was lazy loaded” i PageSpeed Insights.<\/p>\n Med lazy loading kan du fremskynde dit websteds indledende indl\u00e6sningstider ved at vente med at indl\u00e6se visse ressourcer (f.eks. billeder), indtil en bruger begynder at interagere med dit websted.<\/p>\n Selv om det normalt er en god ting, kan det s\u00e6nke dine LCP-tider, hvis dit websted fors\u00f8ger at lazy load det billede, der er dit LCP-element. Derfor skal du s\u00f8rge for, at dit websted ikke k\u00f8rer lazy loading p\u00e5 billeder, der er synlige i den oprindelige visningsflade.<\/p>\n Hvis du bruger den oprindelige browserfunktion til doven indl\u00e6sning, som WordPress introducerede i WordPress 5.5<\/a>, b\u00f8r du ikke opleve dette problem, fordi WordPress allerede automatisk udelukker det f\u00f8rste billede i indholdet fra WordPress 5.9<\/a>.<\/p>\n Hvis du \u00f8nsker at udelukke mere end det f\u00f8rste billede, kan du <\/em>bruge funktionen wp_omit_loading_attr_threshold<\/em><\/a> (men de fleste vil ikke have behov for at g\u00f8re noget her).<\/em><\/p>\n Hvis du bruger et JavaScript-drevet lazy loading-plugin, skal du dog muligvis manuelt ops\u00e6tte denne udelukkelse i plugin’ets indstillinger. Perfmatters-plugin’et indeholder f.eks. en mulighed for at lade dig udelukke de f\u00f8rste “X”-billeder fra lazy loading.<\/p>\n Hvis dit lazy loading-plugin ikke lader dig indstille denne type udelukkelse, kan du skifte til et andet plugin, der g\u00f8r det.<\/p>\n For eksempel udelukker WP Rocket<\/a> automatisk alle billeder over skillelinjen, inklusive LCP-billedet, fra lazy loading, hvilket hj\u00e6lper dig med at spare tid og besv\u00e6ret med at g\u00f8re det manuelt. Pluginet udf\u00f8rer optimeringen som standard lige ved aktivering, s\u00e5 du beh\u00f8ver ikke at markere nogle muligheder.<\/p>\n Hvis dit LCP-element er tekst, kan dit websteds indl\u00e6sningsproces af skrifttyper forsinke tekstens udseende, hvilket vil forsinke din LCP-tid.<\/p>\n Dette sker typisk, n\u00e5r der anvendes bruger tilpassede skrifttyper<\/a>. Hvis dit websted er konfigureret til at vente med at gengive tekst, indtil den brugerdefinerede skrifttype er indl\u00e6st, vil det g\u00f8re tingene langsommere, hvis filen med den brugerdefinerede skrifttype tager lang tid at indl\u00e6se.<\/p>\n For at l\u00f8se dette kan du bruge Font-Display: Valgfri CSS-deskriptor<\/a>.<\/p>\n Dette fort\u00e6ller browseren, at den skal bruge en fallback-skrifttype, hvis den tilpassede skrifttype ikke indl\u00e6ses inden for et lille vindue (normalt omkring 100 ms eller mindre).<\/p>\n I almindeligt sprog betyder det grundl\u00e6ggende, at browseren skal give den tilpassede skrifttype en chance for at blive indl\u00e6st. Men hvis den brugerdefinerede skrifttype ikke indl\u00e6ses hurtigt nok, skal browseren blot bruge en systemskrifttype, der kan bruges som fallback, for at undg\u00e5 at forsinke indholdet yderligere.<\/p>\n Alternativt kan du ogs\u00e5 bruge Font-Display: Swap, som indl\u00e6ser fallback-skrifttypen med det samme og derefter “bytter” den brugerdefinerede skrifttype ind, n\u00e5r den brugerdefinerede skrifttype er indl\u00e6st. Denne fremgangsm\u00e5de kan dog give problemer med Cumulative Layout Shift<\/a>, hvis skrifttyperne er af forskellig st\u00f8rrelse, s\u00e5 du skal v\u00e6re forsigtig.<\/p>\n Medmindre din brugerdefinerede skrifttype er absolut n\u00f8dvendig for dit websteds design, skal du bruge Font-Display: Optional er normalt den bedste l\u00f8sning ud fra et Core Web Vitals-perspektiv.<\/p>\n Hvis du er fortrolig med at bruge CSS direkte<\/a>, kan du manuelt redigere Font-Display-egenskaben i stylesheet’et for dit undertema<\/a>.<\/p>\n Hvis du ikke \u00f8nsker at bruge CSS, kan du ogs\u00e5 finde plugins, der kan hj\u00e6lpe dig med dette, selv om de fleste af dem er fokuseret p\u00e5 optimering til Google Fonts:<\/p>\n Hvis du bruger Elementor til at designe dit websted, indeholder Elementor ogs\u00e5 en indbygget indstilling, s\u00e5 du kan bruge dette til sider, som du opretter med Elementor:<\/p>\n Det er vigtigt at l\u00e6re at forbedre Largest Contentful Paint for at forbedre brugeroplevelsen af dit websted og maksimere din placering i s\u00f8gemaskinerne.<\/p>\n 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\u00e5 hurtigt som muligt.<\/p>\n Hvis du ikke \u00f8nsker at bekymre dig om langsom serverresponstid, kan du flytte dit WordPress-websted til Kinsta. Kinsta’s pr\u00e6stationsoptimerede arkitektur er specielt designet til at levere dit websted s\u00e5 hurtigt som muligt.<\/p>\n Med Kinstas Edge Caching-funktion kan du desuden cache dit websteds sider til Cloudflares globale netv\u00e6rk, hvilket betyder, at bes\u00f8gende fra hele verden vil nyde godt af lynhurtige serverresponstider (og dermed lynhurtige LCP-tider).<\/p>\n Hvis du vil vide mere, kan du tjekke disse sider for at f\u00e5 flere oplysninger om \n
St\u00f8rste Contentful Paint vs. F\u00f8rste Contentful Paint<\/h3>\n
\n
Hvorfor er dit websteds st\u00f8rste indholds malingstid vigtig?<\/h2>\n
\n
Brugeroplevelse<\/h3>\n
S\u00f8gemaskineoptimering (SEO)<\/h3>\n
Hvad kan p\u00e5virke Largest Contentful Paint-scoringer?<\/h2>\n
\n
\n
\n
Hvad er en god Largest Contentful Paint-tid?<\/h2>\n
![\"Anbefalede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/good-largest-contentful-paint-times-1024x253.jpg\")
S\u00e5dan m\u00e5ler du Largest Contentful Paint: Bedste LCP-testv\u00e6rkt\u00f8jer<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
\n
![\"LCP-tider](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-1024x682.jpg\")
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-2-1024x779.jpg\")
Chrome-udviklerv\u00e6rkt\u00f8jer<\/h3>\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-1-1024x694.jpg\")
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-2-1024x714.jpg\")
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-3-1024x861.jpg\")
Google Search Console<\/h3>\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-times-in-google-search-console-1024x860.jpg\")
<\/p>\nWebPageTest<\/h3>\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/webpagetest-lcp-test-1-1024x727.jpg\")
S\u00e5dan finder du et Largest Contentful Paint Element<\/h2>\n
S\u00e5dan forbedrer du Largest Contentful Paint i WordPress (eller andre platforme)<\/h2>\n
Ops\u00e6t Caching for at forbedre serverens svartid<\/h3>\n
Opgrader til hurtigere WordPress-hosting<\/h3>\n
Brug et Content Delivery Network (CDN)<\/h3>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-edge-caching-1024x704.jpg\")
Undg\u00e5 Render-blokerende JavaScript (uds\u00e6t eller fjern)<\/h3>\n
\n
\n
Undg\u00e5 render-blokerende CSS og optimering af CSS-levering<\/h3>\n
Minim\u00e9r din HTML, CSS og JavaScript<\/h3>\n
Brug komprimering p\u00e5 serverniveau (Gzip eller Brotli)<\/h3>\n
![\"Et](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/gzip-brotli-test-1024x624.jpg\")
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/cloudflare-brotli-compression-1024x865.jpg\")
Komprimering og \u00e6ndring af st\u00f8rrelsen p\u00e5 billeder<\/h3>\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-image-optimization-feature-1024x845.jpg\")
Forudindl\u00e6s Largest Contentful Paint-billede<\/h3>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/preload-critical-images-1024x685.jpg\")
Tjek for problemer med lazy loading<\/h3>\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/perfmatters-exclude-leading-images-1024x791.jpg\")
Optimering af indl\u00e6sning af skrifttyper med Font-Display: Valgfri<\/h3>\n
\n
\n
![\"S\u00e5dan](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/elementor-font-display-1024x795.jpg\")
Oversigt<\/h2>\n