Largest Contentful Paint förklarat: Hur du förbättrar din tid

Har du problem med hur du ska förbättra Largest Contentful Paint på din webbplats? Eller är du inte säker på vad Largest Contentful Paint betyder och varför du ens behöver bry dig om detta?

Oavsett vilket så är det här inlägget till för dig. Du kommer nämligen att lära dig allt som du behöver veta om Largest Contentful Paint.

Detta inkluderar vad Largest Contentful Paint betyder, varför det är viktigt, hur man mäter det och hur man förbättrar det.

Du kan använda innehållsförteckningen nedan för att hoppa till ett specifikt avsnitt baserat på din nuvarande kunskapsnivå. Eller så fortsätter du att läsa för att börja från början.

Vad är Largest Contentful Paint (LCP)? Vi förklarar vad det betyder

Largest Contentful Paint är ett prestandamått som mäter hur lång tid som det tar för huvudinnehållet på en webbsida att laddas.

Det är en del av Google’s mätvärden för Core Web Vitals, tillsammans med Cumulative Layout Shift (CLS).

På en mer teknisk nivå så börjar Largest Contentful Paint att mäta från att användaren initierar sidladdningen. Den mäter sedan hur lång tid det tar tills det största textblocket, den största bilden eller videon återges i visningsfönstret.

Vad betyder ”huvudinnehåll” när det gäller LCP?

Huvudinnehållet beror på den aktuella sidan i fråga, men det kan vara något av följande:

• Text – närmare bestämt alla element på blocknivå som innehåller textnoder eller andra textelement på inline-nivå.
• Bild – element inom ett <img>-element eller <image>-element inom ett <svg>-element.
• Video – alla <video>-element (den använder posterbilden).
• Ett element med en bakgrundsbild – endast när det laddas via CSS url()-funktionen (detta gäller inte CSS-gradienter).

Senare i det här inlägget får du veta hur du hittar det exakta elementet Largest Contentful Paint för vilken sida som helst på din webbplats.

Largest Contentful Paint vs First Contentful Paint

En vanlig fråga du kanske har är vad som är skillnaden mellan Largest Contentful Paint och First Contentful Paint, ett annat vanligt prestandamått.

Även om de två termerna liknar varandra så är den viktigaste skillnaden att Largest Contentful Paint mäter hur lång tid som det tar för sidans ”huvudinnehåll” att laddas. First Contentful Paint mäter hur lång tid som det tar för det ”första objektet” att laddas (oavsett om det är huvudinnehållet eller inte).

I princip:

• LCP = endast huvudinnehåll
• FCP = första delen av innehållet, oavsett vad det innehållet är

Din LCP-tid kommer nästan alltid att vara något högre än din FCP-tid eftersom huvudinnehållet vanligtvis inte är det första som laddas.

Varför är det viktigt med tiden för Largest Contentful Paint på din webbplats?

Det finns två huvudskäl till att tiden för din webbplats Largest Contentful Paint är viktig:

1. Användarupplevelse
2. Sökmotoroptimering

Användarupplevelse

Den största anledningen till att du bör bry dig om tiden på Largest Contentful Paint på din webbplats? Det är att detta mått är en bra indikator för att förstå användarnas upplevelse när det gäller webbplatsens prestanda.

De flesta användare bryr sig inte om hur lång tid som det tar för din webbplats att ladda alla skript och element fullständigt. Det bryr sig snarare om hur lång tid som det tar för dem att börja få värde från din webbplats.

Largest Contentful Paint gör ett bra jobb med att försöka mäta detta ”värde”-ögonblick genom att se hur lång tid som det tar för huvudinnehållet att laddas.

Se till att optimera din webbplats för att uppnå en snabb Largest Contentful Paint-tid. Som ett resultat kan du nämligen vara ganska säker på att du erbjuder användarna en bra upplevelse på din webbplats. Åtminstone när det gäller prestanda (du bör även ha en kundvänlig design och god användbarhet).

Detta betyder naturligtvis inte att du ska ignorera andra prestandamätningar. Vi rekommenderar alltid att du tar en helhetsbild av webbplatsens prestanda och flaskhalsar. Detta är anledningen till att vi skapade vårt eget verktyg för övervakning av applikationsprestanda (APM). Det finns tillgängligt kostnadsfritt om du använder Kinsta’s hosting – Kinsta APM.

Sökmotoroptimering (SEO)

På sökmotoroptimeringsfronten är Largest Contentful Paint en del av Google’s trio av Core Web Vitals-metriker. Google började använda detta som en SEO-rankningsfaktor i sin algoritmuppdatering 2022 Page Experience.

Detta innebär att dåliga tider för Largest Contentful Paint kan dra ner på din webbplats prestanda i Google’s sökresultat.

Andra faktorer som innehållskvalitet/relevans och bakåtlänkar spelar fortfarande en mycket större roll för var din webbplats rankas. Det är dock viktigt att optimera webbplatsens Largest Contentful Paint-tider för att se till att du får ut så mycket som möjligt av dina SEO-insatser.

Vad kan påverka Largest Contentful Paint-poängen?

Två ”huvudsakliga” typer av problem kan påverka en sidas Largest Contentful Paint-tider:

1. Hur lång tid som det tar för servern att svara med det första HTML-dokumentet.
2. Hur lång tid som det tar för själva LCP-resursen att laddas.

Den första typen av problem handlar om serverns svarstid, även kallad time to first byte (TTFB). Innan en användares webbläsare ens kan tänka på att ladda huvudinnehållet så måste den först få ett svar från servern.

Här är några av de vanligaste problemen som påverkar detta:

• Om man inte använder sidcachelagring – Då tvingas servern att göra mer ”arbete” innan den kan svara med HTML-dokumentet.
• Långsam hosting – en långsam hostingleverantör kommer alltid att ha en långsam TTFB, oavsett vad du gör.
• Om du inte använder ett CDN – Ett CDN-nätverk (Content Delivery Network) kan snabba upp TTFB genom att servera sidor från sitt globala nätverk. Som ett resultat så krävs det inte att användarna laddar ner dem från webbplatsens ursprungsserver.

Efter att webbplatsens server har levererat det ursprungliga HTML-dokumentet så kan det uppstå ytterligare flaskhalsar när det gäller att ladda det faktiska huvudinnehållet.

Några av de vanligaste problemen som påverkar detta:

• Renderblockerande JavaScript eller CSS (eller ooptimerad/onödig kod i allmänhet) – Användarens webbläsare kanske måste ladda ner och/eller bearbeta onödig JavaScript eller CSS innan den kan ladda huvudelementet. Detta kommer att sakta ner din LCP.
• Icke-optimerade bilder – om LCP-elementet är en bild så kommer användningen av icke-optimerade bilder att sakta ner din tid eftersom större bilder tar längre tid att ladda ner.
• Icke-optimerad laddning av teckensnitt – om LCP-elementet är text så kan laddning av anpassade teckensnitt på ett icke-optimerat sätt göra att det tar längre tid för texten att visas.
• Okomprimerade filer – om du inte använder komprimeringsteknik som Gzip eller Brotli så kommer detta att göra att det tar längre tid för användarens webbläsare att ladda ner filerna på din webbplats.

Beroende på din webbplats så kan du uppleva flaskhalsar på båda områdena eller bara på ett av områdena. Du får veta hur du löser alla dessa problem lite senare i det här inlägget.

Vad är en bra Largest Contentful Paint?

Google definierar en ”bra” Largest Contentful Paint-tid som mindre än 2,5 sekunder.

Om din sidas Largest Contentful Paint-tid ligger mellan 2,5 och 4,0 sekunder så klassificerar Google den som ”behöver förbättras”. Om din sidas tid är över 4,0 sekunder så definierar Google den som ”dålig”.

Här är en grafik från Google som visar detta visuellt:

Hur man mäter Largest Contentful Paint: Bäst LCP-testverktyg

Det finns ett antal verktyg som du kan använda för att testa din webbplats prestanda för Largest Contentful Paint – låt oss gå igenom några av de mest användbara…

PageSpeed Insights

PageSpeed Insights är ett av de bästa verktygen för att bedöma Largest Contentful Paint eftersom det erbjuder fyra användbara delar av informationen:

1. Du kan se din webbplats Largest Contentful Paint-tid med riktiga användare från Chrome UX-rapporten (om din webbplats har tillräckligt med trafik för att ingå i rapporten).
2. Du kan köra simulerade tester för att se hur din webbplats presterar.
3. Google meddelar dig det faktiska LCP-elementet som används för testet. Som ett resultat så vet du vilket element som du ska optimera.
4. Google kommer att ge förslag på hur du kan förbättra din LCP-tid.

Så här använder du detta verktyg:

1. Gå till webbplatsen för PageSpeed Insights.
2. Ange webbadressen för den sida som du vill testa.
3. Klicka på Analysera.

Google visar dig sedan resultat för både mobil och dator – se till att kontrollera båda.

För att hitta det huvudsakliga elementet som Google använder för att beräkna LCP så kan du bläddra ner till avsnittet Diagnostik och expandera avsnittet Largest Contentful Paint element:

Återigen, se till att kontrollera både mobil och dator eftersom LCP-elementet kan vara annorlunda för båda.

Verktyg för Chrome-utvecklare

Du kan även testa Largest Contentful Paint-tid direkt från Chrome’s utvecklarverktyg med hjälp av fliken Prestanda eller dess granskningsfunktion Lighthouse. Vi rekommenderar att du använder fliken Prestanda eftersom den ger dig mer information.

Så här kan du börja:

1. Öppna sidan som du vill testa.
2. Öppna Chrome’s utvecklarverktyg.
3. Gå till fliken Prestanda.
4. Kontrollera att rutan Web Vitals är markerad.
5. Klicka på knappen Ladda om (se nedan).

Du bör nu se en fullständig analys av din webbplats.

Om du håller muspekaren över LCP på fliken Nätverk så kan du se tiden:

Om du håller muspekaren över LCP på fliken Timings så kan du se det faktiska LCP-elementet:

Google Search Console

Google Search Console låter dig visserligen inte testa en enskild sida med avseende på dess tid för Largest Contentful Paint. Det är dock verkligen användbart för att bedöma prestandan för hela webbplatsen.

Varje sida på din webbplats kommer att ha en annan LCP-tid. Du kan alltså inte bara testa hemsidan och sluta där.

Med Google Search Console så kan du se var varje sida på din webbplats hamnar i Google’s kategoriseringar. Dessa är: ”Bra”, ”Behöver förbättras” och ”Dåligt”. Prestandadatan kommer från Chrome UX-rapporten, så den är baserad på riktiga användardata.

Om du inte redan har gjort detta så måste du först verifiera din webbplats med Google Search Console.

Hur du får tillgång till LCP-rapporten:

1. Öppna Google Search Console för din webbplats.
2. Gå till Core Web Vitals under fliken Upplevelse.
3. Klicka på Öppna rapport bredvid diagrammet Mobil eller Dator.
4. Leta efter eventuella problem i avsnittet Varför webbadresser inte anses vara bra. Om du klickar på problemet så kan du se mer information om vilka webbadresser som orsakar problem.

*Se till att kontrollera både resultaten för dator och mobil, eftersom uppgifterna kan skilja sig åt i båda fallen.

WebPageTest

WebPageTest är ett annat praktiskt alternativ för att köra simulerade prestandatester.

Till skillnad från PageSpeed Insights så kan WebPageTest helt och hållet anpassa olika testmått. Detta inkluderar exempelvis testplats, anslutningshastighet, enhet med mera. Det är den största fördelen med att använda detta jämfört med andra verktyg – du får fler alternativ för att konfigurera testet.

Så här gör du för att köra ett test:

1. Gå till WebPageTest.
2. Lägg till sidans webbadress som du vill testa.
3. Utöka alternativen för avancerad konfiguration för att konfigurera testet fullt ut.

På resultatsidan så ser du LCP-data tillsammans med massor av andra prestandamätningar (inklusive en vattenfallsanalys).

Så här hittar du Largest Contentful Paint-elementet

Om du vill förbättra Largest Contentful Paint så kan det vara till stor hjälp att veta exakt vilket element som Google använder för att beräkna din LCP-tid.

Vet du exempelvis att Google använder din hjältebild som LCP-element på din startsida? Då vet du att du måste hitta sätt att servera hjältebilden så snabbt som möjligt om du vill förbättra startsidans LCP-tider.

Som vi nämnde tidigare så kan du hitta ditt Largest Contentful Paint-element med hjälp av PageSpeed Insights eller Chrome’s utvecklarverktyg.

Se till att kontrollera både mobila och stationära resultat, eftersom ditt LCP-element kan vara annorlunda på olika enheter.

Så här förbättrar du Largest Contentful Paint i WordPress (eller andra plattformar)

Nu vet du allt om Largest Contentful Paint. Det är dags att gå in på några användbara tips för hur du kan förbättra Largest Contentful Paint i WordPress.

Även om vi kommer att fokusera på WordPress för dessa tips så är alla tips universella och gäller för andra typer av webbplatser.

Ställ in cachelagring för att förbättra serverns svarstid

Cachelagring kan förbättra serverns svarstid. Den gör detta genom att minska det bearbetningsarbete som din server måste göra innan den kan leverera det färdiga HTML-dokumentet till besökarnas webbläsare.

Om du hostar din WordPress-webbplats hos Kinsta så behöver du inte oroa dig för att konfigurera cachelagring. Kinsta implementerar nämligen optimerad cachelagring åt dig automatiskt.

Om du hostas någon annanstans så kan du aktivera cachelagring på din webbplats med hjälp av ett kostnadsfritt plugin som WP Super Cache eller ett betalt plugin som WP Rocket.

Om du vill ha fler alternativ så kan du läsa vårt inlägg om de bästa cachelagrings-pluginen för WordPress.

Uppgradera till snabbare WordPress-hosting

Även om alla taktiker på den här listan kan hjälpa dig att förbättra din LCP-tid, så är det ingen idé att hymla om följande:

Om du använder en långsam, icke-optimerad WordPress-hosting kommer dina LCP-tider alltid att begränsas av kvaliteten på din host.

Du kanske kan göra saker och ting lite bättre, men du kommer alltid att kämpa för att uppnå LCP-tider under 2,5 sekunder om din host är långsam.

Om du vill hitta det enklaste sättet att förbättra dina Largest Contentful Paint-tider så kan du migrera din webbplats till Kinsta. Kinsta erbjuder inte bara en prestandaoptimerad hostinginfrastruktur. Vi har även inbyggda funktioner för att hantera många av de andra optimeringarna på den här listan.

Detta innebär att du kan fokusera på att utveckla din webbplats istället för att krångla till optimeringen av Largest Contentful Paint-tider.

Om du är intresserad så kommer Kinsta att migrera ett obegränsat antal webbplatser från vilken host som helst kostnadsfritt – läs mer om kostnadsfri migrering här.

Om du fortfarande är tveksam – prova resten av tipsen på den här listan. Men om du fortfarande kämpar efter att ha gjort allt på den här listan så kanske du bara behöver en bättre hosting-leverantör.

Använd ett CDN-nätverk (Content Delivery Network)

Utan ett CDN så måste alla besökare på din webbplats ladda ner HTML-sidans HTML och statiska tillgångar från din hosting-server.

Om dina besökare befinner sig nära din server så är det vanligtvis inget problem. Men om dina besökare är utspridda över hela världen kan detta sakta ner din webbplats. Detta beror på det fysiska avståndet mellan en besökare och din webbplats server.

Med en CDN så kan du distribuera din webbplats statiska tillgångar (eller till och med webbplatsens färdiga HTML-sidor) till CDN: ets globala nätverk. Som ett resultat så kan besökarna ladda ner filer från CDN: ets närmaste plats, vilket är mycket snabbare.

Om du hostas av Kinsta så rekommenderar vi att du använder Kinsta’s Edge Caching-funktion för bästa resultat.

Kinsta’s Edge Caching-funktion fungerar genom att den cachenagrar din webbplats fullständiga HTML-sidor och statiska tillgångar till Cloudflares globala nätverk (istället för att bara cachelagra statiska tillgångar som de flesta andra CDN-lösningar).

Detta innebär att besökarna på din webbplats kan ladda ner hela sidan från närmaste edge-plats. Som ett resultat så blir både serverns svarstid och tiden som det tar för din LCP-resurs att laddas betydligt snabbare..

För att aktivera Kinsta’s Edge Caching går du till fliken Edge Caching på din webbplats instrumentpanel i MyKinsta.

Om du hostas någon annanstans så kan du konfigurera ett CDN för webbplatsens statiska tillgångar. Du kan göra detta med hjälp av populära CDN-tjänster som KeyCDN, Bunny, och andra.

Undvik JavaScript som blockerar rendering (skjuta upp eller ta bort)

Renderingsblockerande JavaScript är JavaScript som laddas före ditt huvudsakliga LCP-element trots att det inte behövs för tillfället.

Som ett resultat av att laddningen av LCP-elementet fördröjs så laddningstiderna för din LCP att fördröjas.

För att åtgärda detta så finns det några strategier som du kan genomföra:

• Ta bort onödig JavaScript om möjligt.
• Fördröj JavaScript så att det inte blockerar laddningen av webbplatsens huvudelement.
• Fördröj JavaScript tills en användare interagerar med din webbplats.

För de flesta så är det enklaste sättet att implementera denna funktionalitet via plugins som Autoptimize eller WP Rocket.

För en fullständig guide om hur du gör detta så har vi två mycket detaljerade inlägg:

• Hur man eliminerar renderingsblockerande resurser på WordPress
• Hur man skjuter upp analyseringen av JavaScript

Undvik renderingsblockerande CSS och optimera CSS-leveransen

Icke-optimerat JavaScript kan ju sakta ner din webbplats och icke-optimerad CSS kan göra detsamma.

I princip så bör du ladda så lite CSS som möjligt. Den CSS som du behöver ladda in bör du ladda in på ett optimalt sätt. Detta innebär vanligtvis att du bör ladda viktig CSS tidigt och fördröja icke-kritisk CSS till senare i laddningsprocessen.

Om du inte är utvecklare så är det enklaste sättet att uppnå detta på att använda prestandaplugins för optimering som Perfmatters, WP Rocket eller FlyingPress.

WP Rocket erbjuder exempelvis inbyggda funktioner för att ta bort oanvänd CSS på en sida och servera CSS på ett optimalt sätt.

Om du vill ha en mycket djupare titt på hur du gör allt detta så kan du läsa vår kompletta guide om hur du optimerar CSS.

Minimera din HTML, CSS och JavaScript

Förutom kodoptimeringsteknikerna ovan bör du även förminska webbplatsens HTML, CSS och JavaScript. I huvudsak tar detta bort onödiga tecken och vitt utrymme från webbplatsens kod för att krympa dess storlek.

Du kan använda ett kostnadsfritt plugin som Autoptimize för att förminska din kod eller ett av marknadens omfattande premiumplugins som Perfmatters, WP Rocket eller FlyingPress.

Det går även att läsa mer i vår fullständiga handledning om kodminifiering. Även om handledningen fokuserar på JavaScript så kan du även använda samma metoder och plugins för att minifiera annan kod.

Använd komprimering på servernivå (Gzip eller Brotli)

Med komprimering på servernivå så kan du minska storleken på webbplatsens filer med hjälp av tekniker som Gzip eller Brotli.

Den komprimering som vi använder för Kinsta-webbplatsen minskade exempelvis filstorleken på Kinsta’s hemsida med 85,82 %.

Om du hostar din WordPress-webbplats hos Kinsta så behöver du inte oroa dig för detta eftersom Kinsta aktiverar Brotli-komprimering för alla webbplatser automatiskt.

Om du hostar din webbplats någon annanstans så kan du använda det här kostnadsfria verktyget från GiftOfSpeed för att kontrollera om din webbplats har Gzip eller Brotli aktiverat.

Om din webbplats inte använder komprimering så kan du följa vår guide om hur du aktiverar Gzip-komprimering för att ställa in detta.

Om du använder Cloudflare för att servera innehållet på din webbplats så har Cloudflare också en inbyggd inställning för att aktivera Brotli-komprimering:

1. Öppna din webbplats i Cloudflare-instrumentpanelen.
2. Gå till Hastighet → Optimering i sidomenyn.
3. Aktivera Brotli-komprimering.

Komprimera och ändra storlek på bilder

Om ditt LCP-element är en bild, så kan du hitta sätt att minska storleken på den bildfilen. Som ett resultat så minskar du den tid som det tar för en användares webbläsare att ladda ner bilden (och därmed snabba upp din LCP-tid).

För att minska bildstorleken så bör du ändra storleken på bilden till de dimensioner som du faktiskt använder den i. Komprimera den med hjälp av förstörande komprimering eller förlustfri komprimering och servera den i ett optimerat format, exempelvis WebP.

Detta tillvägagångssätt är bara generellt en bästa praxis för prestandaoptimering – det är inte specifikt för Largest Contentful Paint.

Om du vill ha en mer omfattande titt så kan du läsa vår detaljerade guide om bildoptimering för webbplatser.

Och ja – om du hostar din WordPress-webbplats hos Kinsta så behöver du inte oroa dig för det här. Kinsta erbjuder nämligen en inbyggd funktion för att optimera webbplatsens bilder automatiskt. Som ett resultat så slipper du använda några verktyg från tredje part.

Så här gör du för att aktivera den här funktionen

1. Öppna din webbplats instrumentpanel i MyKinsta.
2. Gå till fliken CDN.
3. Klicka på Inställningar bredvid Bildoptimering.
4. Välj önskad nivå av bildoptimering och spara inställningarna – att använda Förstörande ger de största hastighetsförbättringarna, även om det kan ha en liten effekt på bildkvaliteten.

Förinställ Largest Contentful Paint-bilden

Om ditt LCP-element är en bild så är en annan strategi för att förbättra LCP att förinläsa Largest Contentful Paint-bilden. Det är därför som du kan se en rekommendation som ”Förladda Largest Contentful Paint-bilden” i PageSpeed Insights.

Med förladdning så kan du tala om för en användares webbläsare att prioritera nedladdning av vissa resurser. Detta kan exempelvis gälla den specifika bild som är webbplatsens LCP-element.

Det mest icke-tekniska sättet att förladda LCP-bilder är att använda ett plugin som Perfmatters. Det erbjuder en särskild funktion Förladda Kritiska Bilder. Allt som du behöver göra är att ange hur många bilder som ska förladdas – vi rekommenderar att du bara börjar med en. Förladdning av för många tillgångar kan nämligen ha en negativ effekt.

Det finns även några kostnadsfria plugins på WordPress.org för att uppnå detta. Exempelvis WPZOOM’s plugin Preload Featured Images, samt andra premium-plugins, exempelvis FlyingPress.

Kontrollera om det finns problem med lat laddning

Ett annat problem som kan utlösa meddelandet ”Förladda Largest Contentful Paint-bild” i PageSpeed Insights är problem med hur din WordPress-webbplats laddar bilder på ett trögt sätt.

Detta kan även utlösa varningen ”Largest Contentful Paint-bilden laddades trögt” i PageSpeed Insights.

Med lat laddning så kan du snabba upp webbplatsens initiala laddningstider genom att vänta med att ladda vissa resurser (t.ex. bilder) tills en användare börjar interagera med webbplatsen.

Även om det normalt sett är bra så kan detta sakta ner dina LCP-tider. Webbplatsen kanske försöker latladda bilden som är ditt LCP-element. Du bör därför se till att din webbplats inte laddar in bilder som är synliga i den första visningsfönstret.

Om du använder funktionen för lat laddning i den inbyggda webbläsaren som WordPress införde i WordPress 5.5 så bör du inte uppleva det här problemet. WordPress utesluter nämligen den första bilden i innehållet automatiskt, från och med WordPress 5.9.

Om du vill utesluta fler än den första bilden så kan du använda funktionen wp_omit_loading_attr_threshold (men de flesta behöver inte göra något här).

Om du använder ett JavaScript-drivet plugin för lat laddning så kan du dock behöva ställa in denna uteslutning manuellt i pluginets inställningar. Perfmatters-pluginet innehåller exempelvis ett alternativ som låter dig utesluta de första ”X”-bilderna från lat laddning.

Om ditt plugin för lat laddning inte låter dig ställa in den här typen av uteslutning så kan du byta till ett annat plugin som gör det.

WP Rocket utesluter exempelvis automatiskt alla bilder ovanför vecket, inklusive LCP, från lazyloading. Detta hjälper dig att spara tid och gör att du slipper besväret med att göra detta manuellt. Pluginet gör optimeringen som standard direkt vid aktivering, så du behöver inte kryssa i några alternativ.

Optimera laddning av teckensnitt med Font-Display, valfritt

Om ditt LCP-element är text så kan webbplatsens process för att ladda teckensnittet fördröja textens utseende. Som ett resultat så blir din LCP-tid långsammare.

Detta händer vanligtvis när du använder anpassade typsnitt. Webbplatsen kanske är konfigurerad så att den väntar med att återge text tills det anpassade teckensnittet har laddats. Då kommer detta att sakta ner saker och ting om filen med det anpassade teckensnittet tar lång tid att ladda.

För att åtgärda detta så kan du använda Font-Display: Optional CSS descriptor.

Detta talar om för webbläsaren att den ska använda ett reservtypsnitt om det anpassade typsnittet inte laddas inom ett litet fönster (vanligtvis cirka 100 ms eller mindre).

Detta betyder i princip att webbläsaren ska ge det anpassade teckensnittet en chans att laddas. Om det anpassade teckensnittet inte laddas tillräckligt snabbt så ska webbläsaren dock bara använda ett systemteckensnitt som reserv för att undvika att innehållet försenas ytterligare.

Alternativt så kan du även använda Font-Display: Byte, som laddar reservtypsnittet direkt och sedan ”byter” in det anpassade typsnittet när det anpassade typsnittet laddas. Det här tillvägagångssättet kan dock orsaka problem med Cumulative Layout Shift om teckensnitten är olika stora. Du bör med andra ord vara försiktig.

Om ditt anpassade typsnitt inte är absolut nödvändigt för webbplatsens utformning så bör du använda Font-Display: Valfritt är vanligtvis det bästa alternativet ur ett Core Web Vitals-perspektiv.

Om du är bekväm med att använda CSS direkt så kan du redigera Font Display-egenskapen manuellt i ditt barntemas formatmall.

Om du inte vill använda CSS så kan du även hitta plugins som hjälper dig att göra detta. De flesta av dem är dock inriktade på att optimera för Google Fonts:

• Asset CleanUp – stöder Google Fonts kostnadsfritt och anpassade lokala teckensnitt med Pro-versionen.
• Perfmatters – erbjuder en funktion för Google Fonts.

Om du använder Elementor för att utforma din webbplats så innehåller Elementor även ett inbyggt alternativ som låter dig använda detta för sidor som du skapar med Elementor:

1. Gå till Elementor → Inställningar.
2. Öppna fliken Avancerat.
3. Ställ in rullgardinsmenyn Google Fonts Laddning lika med Valfritt.

Sammanfattning

Att lära sig att förbättra Largest Contentful Paint är viktigt för att förbättra användarupplevelsen på din webbplats och maximera din sökmotorrankning.

Det krävs generellt två saker när det gäller att förbättra Largest Contentful Paint – att snabba upp serverns svarstid och sedan optimera koden på webbplatsen så att LCP-elementet återges så snabbt som möjligt.

Om du inte vill oroa dig för långsam serversvarstid så kan du flytta din WordPress-webbplats till Kinsta. Kinsta’s prestandaoptimerade arkitektur är särskilt utformad för att leverera din webbplats så snabbt som möjligt.

Med Kinsta’s Edge Caching-funktion kan du dessutom cachelagra sidorna på din webbplats till Cloudflare’s globala nätverk. Som ett resultat så kan besökare från hela världen ta del av blixtsnabba serverresponstider (och därmed blixtsnabba LCP-tider).

Om du vill veta mer så kan du kolla in de här sidorna för mer information om Kinsta’s hanterade WordPress-hosting eller Kinsta’s hanterade WooCommerce-hosting.

Om du vill att en professionell person ska hjälpa dig med några anpassade optimeringar av LCP-prestanda kan du även hitta en leverantör i Kinsta’s Agenturskatalog.