Hur man optimerar Core Web Vitals för WordPress (Ultimate Guide)

Ingen vill besöka en webbplats som laddar långsamt eller svarar långsamt när du klickar på en länk eller knapp. Det är därför vi mäter prestandan på vår WPBeginner-webbplats med hjälp av Googles Core Web Vitals. Det är som ett rapportkort för vår webbplats användarupplevelse.

Google testar hur snabbt dina sidor laddas, hur smidigt de reagerar på interaktioner och hur stabilt innehållet är på skärmen. Dessa signaler är viktiga för användarupplevelsen och SEO.

Den goda nyheten är att du inte behöver vara en teknisk trollkarl för att optimera Core Web Vitals för WordPress. I den här guiden visar vi dig enkla, praktiska steg för att optimera din WordPress-webbplats för en snabbare, smidigare och roligare användarupplevelse.

Här är en snabb översikt över vad vi kommer att täcka i den här guiden:

Vad är Googles Core Web Vitals?

Google Core Web Vitals är metrics för webbplatsens prestanda som Google anser vara viktiga för en webbplats totala användarupplevelse. Dessa web vital-poäng kommer att vara en del av Googles övergripande poäng för page experience som kommer att påverka din sökmotorsoptimering ranking.

Sanningen är att ingen gillar en website som hämtar långsamt, inte ens Google.

Även om din website i WordPress hämtar information snabbt kanske den inte är fullt funktionell så att användarna kan göra det de vill eller få tillgång till den information de behöver.

Core Web Vitals hjälper dig att mäta hur snabbt din website hämtar data, hur snabbt den blir synlig och hur snart den är redo för dina användare.

För att göra det använder Google tre kvalitetstester:

• Largest Contentful Paint (LCP)
• Interaktion till nästa målning (INP)
• Cumulative Layout Shift (CLS)

Note: Fram till mars 2024 använde Google testet First Input Delay (FID) istället för INP. Detta resultat rapporteras fortfarande i många WordPress hastighets- och prestandatester.

Namnen på dessa tester kanske låter för tekniska, men vad de gör är ganska lätt att förstå.

Låt oss se hur varje Core Web Vitals-test fungerar, vad de mäter och hur you kan förbättra your score.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) tittar på hur snabbt huvudinnehållet (om det är en image, artikel eller description) blir synligt för användarna.

Din website kan t.ex. laddas snabbt, men det största innehållet kanske inte visas på vyn lika snabbt som resten av page.

Andra tools för hastighetstest ger you en hög poäng, men ur användarens view är sidan fortfarande långsam.

Det är därför Google mäter LCP som en del av sin webbvitalpoäng, så att webbplatsägare kan få en mer clear förståelse.

Interaktion till nästa målning (INP)

Interaction to Next Paint (INP) mäter den tid det tar för your website att göra en visuell update som respons på att en användare interagerar med den, t.ex. genom att clicka på något. Denna visuella update anropas ”next paint”.

I klartext kan vi tänka oss att en användare fyller i ett kontaktformulär och klickar på knappen ”Submit”. INP kommer att mäta den tid det tar mellan att användaren utför dessa interaktioner och faktiskt ser det uppdaterade innehållet på din website.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) mäter den tid det tar för en website att bli visuellt stabil.

När en website hämmas tar vissa element längre tid att ladda än andra. Under denna tid kan din websites content fortsätta att röra sig på vyn.

Om en användare till exempel läser ett stycke på en mobil device och en videoklipp embed hämtar ovanför det, flyttas hela innehållet nedåt.

Detta kan vara riktigt frustrerande om en användare försöker utföra en action, till exempel lägga till en produkt i cart där knappen flyttas ner på grund av att andra objekt flyttas på sidan.

Så här testar du din Google Core Web Vitals Score

Det enklaste sättet att testa din Google Core Web Vitals-poäng är att använda PageSpeed Insights-verktyget. Du behöver bara enter den URL du vill testa och clicka på knappen ”Analyze”.

Resultaten för vitala organ i core visas under section ”Core Web Vitals Assessment”.

Om din website klarar bedömningen kommer detta att obs/observeras med grön färg bredvid head.

I diagrammet under kan du view den faktiska poängen för all tre core vitals och några andra anmärkningsvärda metrics. Här är de tider du behöver för att klara Core Web Vitals-testerna för varje objekt.

• Largest Contentful Paint (LCP): 2,5 sekunder eller mindre
• Interaktion till nästa målning (INP): 200 millisekunder eller mindre
• Cumulative Layout Shift (CLS): 0,1 eller mindre

Så här viewar du Google Core Web Vitals för hela webbplatsen

Nu tillåter Page Speed Insights tool you att kontrollera en enskild page. Om den page du kontrollerar är roten till ditt domain name kan du också click the ”Origin” tabs.

Detta kommer att visa dig poängen för alla pages som serveras från detta ursprung.

Men för att verkligen gå på djupet kan du också komma åt Core Web Vitals-rapporten i din Google Search Console dashpanel.

This allows you to see how many URLs on your website passed the tests, which URLs need improvement, and which pages have poor scores.

För att få ännu mer detaljerade rapporter för Core Web Vitals kan du använda Lighthouse hastighetstest genom att gå till Web.dev Measure tool, eller genom att använda det built-in testet i webbläsaren Chrome.

Öppna helt enkelt en website i Chrome, högerklicka var som helst på vyn och välj sedan alternativet ”Inspect”. I tabs kommer du att se ett alternativ som heter ”Lighthouse”.

Därefter klickar du på knappen ”Generate Report”.

Varför är det viktigt med Core Web Vitals?

Core Web Vitals är viktiga eftersom de speglar hur din website utförs för användarna. Det handlar inte bara om hur snabbt en website hämtar data, utan också om hur snabbt användarna faktiskt kan använda den.

Enligt en senaste studie kan en 1 sekunds fördröjning av sidans laddningstid lead till en 7% förlust i konverteringar, 11% färre pages views och en 16% minskning av kundnöjdheten.

Det är därför det är så viktigt att optimera din website för hastighet och prestanda. De flesta tools för prestandamätning tar dock inte riktigt hänsyn till kvaliteten på upplevelsen för användarna.

En snabbare website med dålig användarupplevelse kostar dig fortfarande konverteringar, färre page views och dålig kundnöjdhet. Förbättring av Core Web Vitals hjälper you att åtgärda detta.

Användarnas upplevelse är också en viktig faktor i sökmotorsoptimeringens ranking. Sedan maj 2021 har Googles sökalgoritm inkluderat page experience som en av faktorerna för ranking.

Med det sagt, låt oss se hur du enkelt kan förbättra dina Core Web Vitals för att erbjuda en bättre användarupplevelse på din website.

Så här förbättrar du din core-webbvärld i WordPress (7 tips)

Att förbättra din Core Web Vitals-poäng i WordPress är inte så svårt. Med hjälp av några viktiga tips för prestandaoptimering kan du enkelt klara Core Web Vitals-poängen.

1. Optimera ditt WordPress webbhotell

Ditt WordPress webbhotell spelar den viktigaste rollen för din websites prestanda.

De har möjlighet att optimera sina servrar för WordPress, vilket ger din website en stabil plattform att bygga vidare på.

Vi rekommenderar att du använder SiteGround för en högpresterande website. De är ett av de officiellt rekommenderade webbhotellen för WordPress, och vi använder SiteGround för WPBeginners website.

För att ge din website den prestandaförbättring den behöver använder SiteGround Google Cloud Platform för sina servrar tillsammans med ultrasnabb PHP.

Deras plugin SG Optimizer används av över en miljon websites. Det gör automatiskt ytterligare prestandaförbättringar och aktiverar built-in caching, som gör allt WP Rocket gör och mer därtill.

Det är viktigt att notera att deras SG Optimizer plugin endast fungerar på SiteGround webbhotell konton, och dessa prestandaoptimeringar är tillgängliga för alla planer, inklusive det lägsta alternativet.

Om du använder en annan WordPress hosting provider, rekommenderar vi att du använder WP Rocket tillsammans med några andra tools för att uppnå en bättre Core Web Vitals-poäng.

WP Rocket är det bästa pluginet för caching i WordPress på marknaden. Det allow you att enkelt ställa in caching på din WordPress website utan att gå in på några tekniska detaljer om hantering av server.

2. Förbättring av LCP-poängen (Largest Content Paintful)

Som nämnts tidigare är Largest Content Paintful (LCP) bokstavligen den största delen av innehållet i visningsfönstret på en page. I ett blogginlägg i WordPress kan detta till exempel vara den utvalda imagen eller artikeltexten.

Ju snabbare detta content hämtar, desto högre blir din LCP-poäng.

Hur vet you vilket content som anses vara störst enligt testet? Jo, du måste rulla ner till testresultaten och förstora tabben ”Largest Contentful Paint element”.

Du kommer att se de element som beaktas för LCP-poängen. Om det är en större image kan du försöka ersätta den med en mindre image eller en image med lägre filstorlek och kvalitet. Se vår guide om hur du optimerar images för webbprestanda.

Om det är text kan du försöka dela upp den i stycken och head.

3. Förbättrad poäng för interaktion till nästa målning (INP)

Interaction to First Paint-poängen mäter tiden mellan det att en användare klickar på något på din website och det resultat som visas på din website.

Det viktigaste tipset för att förbättra detta är att använda ett bättre webbhotell eller till och med en hanterad WordPress-hostingplattform.

Ett annat enkelt sätt att förbättra FID-poängen är att använda ett plugin för caching som gillar WP Rocket. Det kommer med en built-in funktion som tillåter dig att optimera fil delivery.

Först måste du installera och aktivera WP Rocket plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Därefter går du till Settings ” WP Rocket page och byter till tabben ’File Optimization’.

Rulla ner till längst ner på sidan och kontrollera boxen bredvid alternativet ”Load JavaScript deferred”.

Glöm inte att klicka på knappen ”Save Changes” för att spara dina ändringar.

Deferring JavaScript allow your website to load without waiting for JavaScript to be loaded. Detta förbättrar INP-poängen (Interaction to First Paint) för pages där JavaScript kan vara orsaken.

För mer tips, se vår detaljerade guide om hur du förbättrar Googles INP-poäng i WordPress.

4. Förbättring av CLS-score (Cumulative Layout Shift)

CLS-poängen (Cumulative Layout Shift) påverkas när olika element på en page hämtar långsamt och får andra element på vyn att röra sig.

You can view which elements are affecting the CLS score by expanding the ”Avoid large layout shifts” tabs in the Page Speed Insights results.

Detta kommer att visa you de element som orsakar mest påverkan av skift av layout under laddning av page.

För att se till att den visuella layouten på din sida inte ändras när andra objekt hämtas måste du berätta för webbläsare om dimensionerna (bredd och höjd) för element som gillar images, video embeds, annonser som Google Adsense, och mer.

WordPress lägger automatiskt till höjd- och breddattribut till images som du lägger till. Men du kan fortfarande kontrollera all annan media, vissa embeds, för att se till att alla har höjd- och breddattribut.

Ett sätt att göra det är att använda Inspect Tool. Högerklicka bara i din webbläsare och välj ”Inspect” för att öppna konsolen för utvecklare.

You can then point and click on different page elements to highlight their source code. Där kan du se om elementet har definierade bredd- och höjdattribut.

5. Eliminering av element som blockerar rendering

Renderingsblockerande element är de element som är långsammare att ladda men som blockerar andra element från att hämta först. Detta påverkar din övergripande Core Web Vitals-poäng och upplevelsen för användarna på din website.

Page Speed Insights-resultaten visar dig de element som blockerar renderingen. Dessa är vanligtvis JavaScript- eller CSS-filer som läggs till av dina WordPress plugins och tredjepartsverktyg som Google Analytics, Facebook Pixel, Google Ads, med mera.

De flesta sådana element läggs dock programmatiskt till din site av olika tillägg eller teman. Detta gör det svårare för en nybörjare att användare att ta bort eller korrekt hämta dem.

Vi har en Step-by-Step guide om hur du enkelt kan eliminera renderande blockerande element i WordPress utan att röra någon kod på din website.

6. Korrekt storlek på images i WordPress

En annan vanlig orsak till lägre Core Web Vitals-poäng är mycket stora images. Många användare av WordPress uploadar högupplösta images till sina websites, som tar längre tid att hämta och som i de flesta fall inte är nödvändiga.

Detta blir ännu mer problematiskt för användare på mobila enheter. Ditt responsiva WordPress-tema och WordPress kommer automatiskt att anpassa imagen till användarens mobila vy, men de skulle fortfarande hämta en större fil.

Vi har en detaljerad guide om hur du optimerar images för din WordPress website utan att förlora kvalitet eller påverka prestanda.

7. Using a CDN to Server to Improve Your Core Web Vitals Score

CDN eller content delivery networks är tjänster från tredje part som allow you att servera statiskt content på your website från flera olika servrar runt om i världen.

Detta allow användare att downloada statiska filer som gillar images och CSS från servrar som är närmast dem. Det minskar också belastningen på din website, som då kan fortsätta att hämta andra element.

Du kan använda en molnbaserad firewall app som Sucuri, som kommer med en built-in CDN-tjänst. Sucuri hjälper dig också att blockera skadliga requests och skräppost, vilket ytterligare frigör resurser på din website.

Du kan också använda Cloudflare gratis CDN som ett alternativ. Den levereras med grundläggande firewall-skydd och CDN-tjänst som skulle förbättra din websites Core Web Vitals-poäng.

Expertguider för mätning och förbättring av WordPress prestanda

Nu när du vet hur du optimerar Core Web Vitals kanske du gillar att läsa några andra artiklar relaterade till mätning och förbättring av WordPress prestanda:

• Den ultimata guiden för att öka hastigheten och prestandan i WordPress
• Hur man snabbar upp WooCommerce prestanda
• Hur man korrekt run ett hastighetstest för en website (bästa tools)
• Så här stresstestar du en website i WordPress
• Vad är Googles INP-poäng och hur kan man förbättra det i WordPress
• Så här använder du tillägget GTmetrix för att förbättra prestandan på din WordPress site
• Viktiga metrics att mäta på din site i WordPress
• Snabbaste webbhotell för WordPress (prestandatester)
• Så här optimerar du images för webbprestanda utan att förlora kvalitet

Vi hoppas att den här guiden hjälpte dig att lära dig hur du optimerar Core Web Vitals för WordPress. En annan viktig aspekt av en bra upplevelse för användarna är säkerhet. Vi rekommenderar att du följer vår checklista för säkerhet i WordPress för att se till att din website inte utförs av skräppost eller DDoS-attacker.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.