Den som driver en WordPress-webbplats kan inte undvika att titta på Googles Core Web Vitals. Särskilt ett av de tre mätvärdena är värt en närmare titt: Den största Contentful Paint spelar en viktig roll inte bara för laddningstiden utan också för din Google-ranking. Om du vill veta vad som ligger bakom detta mått och hur du kan förbättra din Largest Contentful Paint , har du kommit till rätt ställe. I den här artikeln klargör vi alla viktiga frågor och visar vilka åtgärder webbplatsoperatörer kan vidta för att uppnå bra värden.

Vilken är den största Contentful Paint? 

När en webbplats öppnas tar det i regel bara några sekunder innan den är helt installerad i webbläsaren. Under denna tid pågår många processer som är osynliga för besökaren. Largest Contentful Paint (LCP) avser en av de sista händelserna innan webbplatsen är helt laddad: den beskriver hur lång tid det tar tills det största elementet på sidan är helt laddat och synligt . Detta är vanligtvis ett textblock, en bild eller en video.

Detta gör Largest Contentful Paint till ett av de viktigaste måtten för webbplatsens laddningstid. Tillsammans med First Input Delay (FID) och Cumulative Layout Shift (CLS) är det också en av de Core Web Vitalssom Google använder för att utvärdera användarupplevelsen (sidupplevelse).

Största innehållsrika färg vs. första innehållsrika färg

En term som också ofta används i samband med laddningstider och webbplatsens prestanda och som lätt kan förväxlas är First Contentful Paint (FCP). Vi skiljer därför uttryckligen mellan de två mätvärdena igen för bättre förståelse:

• Largest Contentful Paint mäter hur lång tid det tar för det största elementet, dvs. huvudinnehållet på en sida, att laddas helt.
• Med First Contentful Paint avses hur lång tid det tar innan det första elementet på sidan visas - oavsett vilket innehåll det handlar om.

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

Varför är Largest Contentful Paint så viktigt?

Du frågar dig säkert varför du ska ta en närmare titt på den största innehållsrika färgen? Vi har två bra anledningar till det. Båda kommer att hjälpa din webbplats (och ditt företag) att få synlighet och öka din konverteringsfrekvens.

1. förbättrad användarupplevelse

Largest Contentful Paint är en viktig indikator på hur andra upplever din webbplats. Även om dina besökare vanligtvis inte bryr sig om hur lång tid det tar för varje skript och element på sidan att laddas helt, bryr de sig om hur lång tid det tar för dem att använda webbplatsen och se det viktigaste innehållet. Däremot bryr de sig om hur lång tid det tar att förstå webbplatsen och se det viktigaste innehållet.

Om du optimerar din webbplats så att din LCP är så bra som möjligt (mer om detta senare), kommer du att ge dina besökare en solid användarupplevelse. Om du låter dem vänta fem sekunder eller mer på huvudinnehållet på din webbplats kommer de att hoppa av och leta någon annanstans. De är alltså långt ifrån att ladda ner innehåll, prenumerera, anmäla sig till dina kanaler, kontakta dig eller köpa dina produkter.

2. optimerad Google-ranking

Innehåll är och förblir den viktigaste rankingfaktorn för Google. Men om två webbplatser presterar lika bra när det gäller innehåll, kommer den med bättre Core Web Vitals att flyttas upp i rankingen. Detta beror på att mätvärdena betraktas som officiella rankingfaktorer av Google. LCP påverkar poängen mest: I Google Lighthouse Performance Rating står värdet för cirka 25 procent.

Därför kan solida Core Web Vitals - och särskilt ett solitt LCP - hjälpa dig att få bättre ranking i sökmotorerna.

Hur man mäter den största Contentful Paint

Du kan mäta din LCP på olika sätt. En bra utgångspunkt är verktygen från Google: Google Search Console, Google PageSpeed Insights och Lighthouse. Dessutom erbjuder WebPageTest bra avancerade analysalternativ.

Googles sökkonsol

Google Search Console ger dig en översikt över prestandan för hela din webbplats. Du hittar information om Core Web Vitals via det vänstra navigeringsfältet. Om du öppnar fliken får du en grafisk översikt över dina webbadresser och kan relativt snabbt se vilka webbadresser som är problematiska. Du kan sedan titta närmare på dessa i nästa steg.

Om du inte har konfigurerat Google Search Console för din webbplats kan du också få all information via Lighthouse eller PageSpeed Insights.

Google PageSpeed Insights

Förutom de rena LCP-värdena ger Google PageSpeed Insights dig också användbara tips och råd om hur du kan förbättra Largest Contentful Paint. Google berättar också vilket specifikt element som användes för testet. Så att du direkt kan se var du kan börja optimera.

Du kan använda verktyget i tre enkla steg:

1. Ring PageSpeed Insights på.
2. Ange URL-adressen till den sida du vill kontrollera.
3. Starta testet genom att klicka på Analysera.

Google visar dig sedan alla Core Web Vitals på ett ögonblick, både för stationära och mobila enheter. Du bör definitivt ta en titt på båda versionerna.

För att hitta Largest Contentful Paint-elementet, scrolla ner på resultatsidan till avsnittet Diagnostics. Där, i avsnittet Largest Contentful Paint-element, listas det största elementet i viewporten.

Observera: Elementet kan vara olika för mobila enheter och stationära datorer. Därför bör du alltid kontrollera båda här också.

Fyren

Med Lighthouse kan du testa och analysera LCP i din egen webbläsare. Verktyget är redan integrerat i Google Chromes utvecklarverktyg.

Så här går du vidare i webbläsaren:

1. Öppna den URL du vill kontrollera (helst i ett inkognitofönster).
2. Öppna Chrome Developer Tools (DevTools). Det snabbaste sättet att göra detta är att högerklicka var som helst på sidan och sedan klicka på Utforska i menyn som öppnas.
3. Gå sedan till Utvecklarverktyg och välj fliken Fyren.
4. Välj om LCP ska testas för skrivbords- eller mobilvyn. Under Kategorier räcker det med en bock för Prestanda.
5. Starta analysen med ett klick på Generera rapport.

Testet tar 15 till 20 sekunder, beroende på vilken webbplats det gäller. Efteråt kan du se och utvärdera alla värden och t.ex. jämföra dem med resultaten från Search Console (om du har konfigurerat detta).

WebPageTest

WebPageTest är särskilt användbart om du vill konfigurera testet individuellt och gå djupare in i prestandaanalysen. Här kan du också definiera mätvärden som testplats, anslutningshastighet eller själva enheten i de avancerade alternativen.

Resultaten är också något mer omfattande med WebPageTest: verktyget visar dig exakt hur din webbplats laddas, vilka element som laddas och hur snabbt det hela går. Förutom LCP-värdena innehåller rapporten också många andra mätvärden - inklusive ett vattenfallsdiagram. Exakt vad det är och hur du analyserar det på rätt sätt kan du läsa om i vår artikel Optimera WordPress: Så analyserar du din webbplats på 7 sekunder.

Vad är ett bra LCP-värde?

Google dikterar i stort sett hur LCP bedöms:

• En Largest Contentful Paint på under 2,5 sekunder anses vara bra och önskvärd.
• Värden mellan 2,5 och 4 sekunder är fortfarande tillfredsställande, men kan optimeras.
• Om LCP-värdet är över 4 sekunder klassificeras det som dåligt och bör definitivt förbättras.

Var kommer en svag LCP ifrån? 

Largest Contentful Paint för varje webbplats kan delas upp i fyra delelement, som tillsammans ger hela LCP-tiden:

• Time to First Byte (TTFB): Detta är tiden från användarens begäran till serverns första svar, dvs. till den första inlästa databyten. Idealt sett bör TTFB utgöra ca 40 procent av LCP-tiden.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Resource Load Time: Detta värde beskriver den tid som krävs för att ladda själva LCP-elementet. Eftersom detta, precis som med TTFB, är en nätverksförfrågan, kan denna process också ta cirka 40 procent av den totala LCP-tiden.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Var och en av dessa delkomponenter påverkas av andra faktorer - listan över möjliga orsaker till en svag LCP är därför praktiskt taget oändlig. För det mesta är det dock en (eller flera) av följande fyra orsaker som ligger bakom:

• Din server svarar för långsamt (TTFB).
• JavaScript och CSS blockerar inläsningen av sidan (resource load delay).
• Du har många stora resurser eller visuellt krävande innehåll på din sida som tar lång tid att ladda (resursladdningstid).
• Rendering på klientsidan gör att det tar längre tid för LCP-elementet att visas helt (Element Render Delay).

Hur man förbättrar den största Contentful Paint

Du vet nu vad Largest Contentful Paint består av och vad som kan orsaka att den är dålig. Låt oss nu ta en titt på vad du kan göra om du vill förbättra Largest Contentful Paint för din WordPress-webbplats. Det här är de viktigaste tipsen och åtgärderna:

Förlita dig på snabb WordPress-hosting

Grunden för ett bra LCP är korta laddningstider, eller mer exakt en kort TTFB. En högpresterande hosting kan göra hela skillnaden. Kontrollera därför om din nuvarande hosting saktar ner dig i onödan. Om så är fallet bör du överväga att byta till en specialiserad hanterad WordPress-hosting som är skräddarsydd för dina behov.

När du hostar din webbplats på Raidboxes kan du förvänta dig en heltäckande infrastruktur som är skräddarsydd för WordPress och som lönar sig: Efter en flytt till våra servrar laddas WordPress-webbplatser vanligtvis upp till fyra gånger snabbare - utan ytterligare optimering.

Aktivera cachning

Om du vill att din WordPress-webbplats ska ha en bra LCP och laddas snabbt finns det nästan ingen väg runt en anständig WordPress-cachelagring. Det förbättrar serverns svarstid genom att cachelagra filer som används ofta och hämta dem snabbare nästa gång. Du kan antingen använda ett plugin för detta eller välja ett webbhotell med cachelagring på serversidan, som Raidboxes erbjuder.

Eliminera JavaScript och CSS som blockerar renderingen

Varje webbplats består av HTML-element, JavaScript och CSS. Det senare reglerar presentationen av webbplatsen, JavaScript ansvarar för de dynamiska elementen (t.ex. animationer eller formulär). Om JavaScript och/eller CSS laddas före LCP-elementet, trots att de ännu inte behövs, komplicerar och fördröjer de renderingen.

Du bör därför ta bort onödigt JavaScript och CSS och hålla filerna så kompakta som möjligt. Du kan också flytta både nedåt på sidan eller fördröja skripten så att de inte blockerar huvudinnehållet. Det enklaste sättet att göra detta är med plugins som Autoptimize eller WP Rocket.

Du kan läsa mer om JavaScript och CSS i vår artikel om att minska CSS, HTML och JavaScript.

Optimera bilder

Ju större bilderna på din webbplats är, desto större är risken att de har en dålig LCP. Därför bör du alltid komprimera dina bilder så bra som möjligt. Se dock till att kvalitetsförlusten inte är för hög. Om du kan avgöra vad ditt LCP-element är och det är en bild, kan du specifikt minska dess storlek. På så sätt behöver webbläsaren mindre tid för att ladda ner den och ditt LCP-värde minskar.

Vad som är den perfekta storleken och i vilket format du ska ladda upp bilderna kan du läsa om i artikeln WordPress-bildstorlekar: Hur bilder fungerar i WordPress & bästa praxis för din webbplats. Dessutom hittar du en översikt över 6 populära Plugins för bildkomprimering i vår tidning.

Prioritera det största elementet

Det största elementet på en sida bör vara lätt att hitta och bör laddas så tidigt som möjligt. Som standard är detta dock vanligtvis inte fallet med till exempel bilder. Du kan dock använda fetchpriority-attributet för att ange för webbläsaren att vissa element ska hämtas med högre prioritet.

Det kan se ut på följande sätt:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Obs: infoga detta kommando i WordPress som ett block "Kod" och välj HTML under blockalternativen för "Långt öga"), då kommer det att formateras på lämpligt sätt

Men var försiktig: Du bör inte prioritera mer än en eller två bilder framåt, annars förlorar signalen sin effekt. Omvänt kan du också sänka prioriteten för bilder. Detta är till exempel användbart för bilder i karusellreglage som finns i början av sidan men som inte är direkt synliga i början. Genom att ge dem lägre prioritet frigör du bandbredd för viktiga resurser.

Slutsats: Förbättra svarstiden och optimera koden

Slutsatsen är att Largest Contentful Paint kan vara en avgörande faktor när det gäller din Google-ranking och användarupplevelse. Så det är värt att ta en närmare titt och förstå detta mått.

Ju mer detaljerat man går in på Largest Contentful Paint, desto tydligare blir det att det finns ett nästan oändligt antal mindre och större skruvar som man kan vrida på för att optimera LCP. Vissa av dem kan hittas snabbare, andra kräver djupare tekniskt kunnande. Den här artikeln ger därför bara en första överblick och du kan koncentrera dig på två saker till att börja med:

1. Förkorta svarstiden på din server.
2. Optimera koden på din webbplats så att LCP-elementet visas så snabbt som möjligt.

Den viktigaste faktorn för svarstiden är din hosting. Med en högpresterande WordPress-hosting, som den vi erbjuder på Raidboxes , behöver du inte oroa dig för långa väntetider tills servern svarar. Så det kan vara värt att byta.