Så här förbättrar du Core Web Vitals på en flerspråkig webbplats

Core Web Vitals är en samling mätvärden för att mäta kvaliteten på användarupplevelsen på webbplatser. Google räknar dem som rankingsignaler och de är därför också viktiga för (flerspråkig) SEO. Om du försummar dem riskerar du att bli utesluten av både besökare och sökmotorer.

För att undvika detta scenario kommer du i det här inlägget att lära dig allt du behöver veta om hur du förbättrar dessa mätvärden på din flerspråkiga webbplats. Vi förklarar vad Core Web Vitals är, hur du testar webbplatsens nuvarande prestanda och ger steg-för-steg-instruktioner om hur du förbättrar vart och ett av mätvärdena på din webbplats.

Vad är Core Web Vitals?

Som nämnts mäter Core Web Vitals användarupplevelsen på webbplatser. Alla är på något sätt relaterade till laddningshastighet och webbplatsens interaktivitet. Måtten introducerades av Google 2020 och har blivit en del av deras sökalgoritm. Låt oss gå igenom dem en efter en.

Största innehållsrika målning (LCP)

Den första är Largest Contentful Paint (LCP). Den mäter den tid det tar för en sida att laddas tills den blir synlig och användbar. Det avgörs genom att upptäcka det största innehållselementet på en webbsida, som ofta är en bild eller ett textblock, och när det blir synligt för besökare.

Detta intervall mäts i sekunder och används som LCP-poäng. Google har definierat ett antal brytpunkter för att definiera vilken typ av timing din webbplats bör sträva efter.

Som du kan se ovan är en bra poäng upp till 2,5 sekunder för LCP-elementet att ladda. Upp till 4 sekunder är acceptabelt men bör förbättras, och allt utöver det anser Google vara för lång tid.

Kumulativ layoutförskjutning (CLS)

Nästa mått visar hur stabil en webbplatslayout är när den laddas, det vill säga hur mycket den rör sig när nya element dyker upp på sidan. Det kallas Cumulative Layout Shift eller CLS.

Varför är detta viktigt?

En hög grad av CLS kan vara störande för användarens interaktion med din webbplats. Förutom att det helt enkelt inte ser bra ut kan det också göra att de tappar bort sin plats på sidan på grund av rörlig text eller att de av misstag klickar på fel element eftersom det flyttar sig vid fel tillfälle.

CLS beräknas genom att man tittar på hur mycket layouten rör sig under laddning, samt hur stora dessa rörelser är. Dessa två förhållanden multipliceras med varandra för att få fram poängen.

En CLS-poäng under 0,1 är bra; upp till 0,25 behöver förbättras och allt däröver är oacceptabelt.

En anmärkning: Sidrörelser inom 500 ms efter en användares interaktion med sidan (t.ex. ett klick) påverkar inte din CLS-poäng. Dessa anses vara avsiktliga.

Interaktion till nästa målning (INP)

Interaction to Next Paint eller INP är det senaste tillskottet av Core Web Vitals-mätvärden. Det kommer att ersätta First Input Delay (FID), ett av de ursprungliga måtten, i mars 2024.

Båda spårar tiden mellan när en besökare interagerar med ett sidelement och hur snabbt det svarar. Ju snabbare reaktion, desto bättre.

Medan First Input Delay bara tittar på besökarens första interaktion, spårar Interaction to Next Paint alla sidans engagemang under ett besök och visar den sämsta poängen. På så sätt får du en mer exakt bild av sidans responsivitet.

Vad är en bra INP-poäng att skjuta för?

Upp till 200 ms är bra och upp till 500 ms är lagom; allt utöver detta kommer att påverka Googles syn på din webbplats negativt.

Så här testar du webbplatsens kärnfunktioner Web Vitals

När du vet exakt vad Core Web Vitals är, är nästa logiska fråga: hur tar du reda på hur din webbplats ligger till? Det enklaste sättet att ta reda på det är att använda ett hastighetstestverktyg som PageSpeed Insights.

Ange helt enkelt webbadressen till din webbplats högst upp och kör testet. När testet är klart får du inte bara veta om din webbplats har klarat Core Web Vitals-bedömningen, utan också värden för var och en av de nämnda datapunkterna.

Om det finns tillgängligt får du en blandning av både verkliga resultat och labbresultat. Detta inkluderar information från CrUX, där Google samlade in webbplatsanvändardata från sin webbläsare Chrome. Om de inte har det, får du bara mätningar från Lighthouse, som beräknar dem ad hoc.

Andra verktyg som kan berätta om din Core Web Vitals-prestanda är GTmetrix, WebPageTest eller Chrome Web Vitals-tillägget.

Förbättring av grundläggande webbfakta på flerspråkiga webbplatser

Så vad ska du göra om dina värderingar inte är helt fantastiska? Låt oss prata om det nu.

Från och med nu kommer vi att gå igenom steg-för-steg-förklaringar om hur du förbättrar varje Core Web Vital-mått på din flerspråkiga webbplats. Vi går igenom hur du gör det manuellt och hur du enkelt kan göra det för WordPress-användare med hjälp av insticksprogrammet WP Rocket.

WP Rocket gör det superenkelt för personer utan teknisk kunskap att snabbt och enkelt implementera sofistikerade prestandaförbättringar. Det är helt enkelt ett av de mest kraftfulla och nybörjarvänliga cachningspluginsen.

Allmänna prestandaförbättringar

Låt oss börja med några allmänna tips om hur du ser till att din webbplats laddar snabbt:

• Välj ett bra webbhotell - Kvaliteten på det webbhotell som din webbplats ligger hos har stor betydelse för hur snabbt den laddas. Se till att du väljer en välrenommerad leverantör genom att läsa några hastighetsjämförelser och användarrecensioner innan du fattar ett beslut.
• Håll din webbplats uppdaterad - Om din webbplats är baserad på ett innehållshanteringssystem som WordPress, se till att hålla allt uppdaterat. Det innebär själva programvaran, men också eventuella plugins, teman, serverns PHP-version och allt annat som hör till webbplatsen. Endast på så sätt kan du dra nytta av nya hastighetsförbättringar.
• Använd färre plugins - Försök samtidigt att inte gå till överdrift med de saker du lägger till på din webbplats. Varje plugin och tillägg kommer med extra kod, vilket potentiellt kan sakta ner din webbplats. Så håll det du har på din webbplats till det absoluta minimumet.
• Välj komponenter av hög kvalitet - För de tillägg som får en plats på din webbplats, se till att de är av hög kvalitet och optimerade för prestanda, till exempel Weglot.

Ovanstående tips lägger en bra grund för generellt snabb prestanda innan du går vidare med mer specifika åtgärder.

Fixar den största innehållsrika färgen

Det finns två huvudvägar för att förbättra Largest Contentful Paint: optimera sidans laddningshastighet i allmänhet (som beskrivs ovan) och göra leveransen av dina LCP-element snabbare.

Vad är ditt LCP-element? PageSpeed Insights berättar det för dig under Diagnostik.

Implementera cachelagring och komprimering

Cachelagring och komprimering är två grundläggande tekniker för att förbättra webbplatsens prestanda. Den första innebär att renderade siddata lagras för att göra dem snabbare tillgängliga för besökare. Det är särskilt effektivt när du använder WordPress för att driva din webbplats.

Varför då?

På ett CMS som WordPress skapas sidor vanligtvis dynamiskt från PHP-kod och innehåll som hämtas från en databas. Servern omvandlar det till HTML-dokument och skickar dem till webbläsaren.

Caching påskyndar denna process genom att lagra förrenderade HTML-versioner av dina webbsidor på servern så att du kan skicka dem direkt till dina besökare. Detta kan eliminera flera rundresor per besök och göra användarupplevelsen mycket snabbare och bättre.

Komprimering, å andra sidan, är samma sak som att skapa zip-filer, men det sker på en server i stället för på din hemdator. Det krymper filerna som utgör en webbplats så att de kan laddas ner och visas snabbare.

För att aktivera både cachelagring och komprimering på din server måste du redigera en fil som heter .htaccess. Den innehåller viktiga direktiv för hur din webbserver ska fungera, och du hittar den vanligtvis i rotkatalogen för din webbplats.

Du kan kopiera och klistra in följande kod i den för att aktivera båda de tidigare nämnda hastighetsoptimeringsteknikerna:

<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Båda kodsnuttarna är med tillstånd av GTmetrix och fungerar för Apache-servrar. Du kan hitta instruktioner för andra servrar, till exempel NGINX, online, till exempel i denna handledning på KeyCDN.

Om det verkar skrämmande kan du uppnå samma sak med hjälp av det tidigare nämnda WP Rocket-pluginet. Här behöver du bara installera och aktivera pluginet - det implementerar både komprimering och cachelagring automatiskt, inklusive för mobila enheter.

Optimera kod och kodleverans

Vad du än kan göra för att effektivisera leveransen och bearbetningen av din webbplatskod kommer att bidra till att förbättra Largest Contentful Paint på din flerspråkiga webbplats. Låt oss gå igenom några bra alternativ för det:

• Ta bort onödig markup - Om du har mycket överflödig JavaScript- och CSS-kod på din webbplats kan du förbättra prestandan genom att ta bort allt som inte är absolut nödvändigt.
• Minifiering - Detta innebär att man tar bort blanksteg och kommentarer från webbplatsfiler. På så sätt krymper filstorleken, vilket gör dem snabbare att ladda ner och bearbeta.
• CSS- och JavaScript-optimering - Här ställer du in dina webbplatsfiler så att de inte blockerar resten av din webbplats från att laddas. Det är det ökända meddelandet "eliminera renderblockerande resurser" som du kan få från hastighetstestverktyg. Två populära verktyg för detta är attributen defer och async. De flyttar JavaScript-körningen till slutet av laddningskön och talar om för webbläsaren att ladda ner filer i bakgrunden och bara köra dem när de är tillgängliga.

För minifiering för hand kan du använda verktyg som Minifier eller Grunt. Optimering av CSS och JavaScript innebär vanligtvis en hel del analys av vad som blockerar dina sidor från att laddas. Verktyg för hastighetstestning ger dig information om problematiska skript.

Efter det är det upp till dig att manuellt lägga till defer- och async-taggar till dem. De ser ut så här:

<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

Du kan också dela upp en del kod för att bara ladda det som är viktigt först. Mer om det nedan när vi pratar om optimering av INP.

Om du vill automatisera dessa processer kan WP Rocket minifiera kod, ta bort oanvänd CSS, skjuta upp JavaScript och ladda den asynkront genom att helt enkelt kryssa i några rutor.

Optimera bilder

Bildoptimering innebär att du minskar storleken på bilderna på din webbplats utan att kompromissa med kvaliteten. Detta är en stor allmän prestandaförbättring och hjälper särskilt till att förbättra Largest Contentful Paint eftersom bilder ofta hamnar i LCP-elementen.

Hur kan du optimera bilder på din webbplats?

• Översätt bilder - Att översätta din webbplats är inte bara begränsat till texten. Du måste också konvertera text i dina bilder och/eller använda mer kulturellt lämpliga bilder. Tack och lov harWeglot täckt dig på detta område.
• Komprimering - Precis som med textfiler kan du ta bort onödig data från bilder för att krympa dem i storlek.
• Använd moderna format - Bilder i nästa generations format, t.ex. WebP eller AVIF, är mycket mindre än JPG eller PNG och ser lika bra ut.
• Storleksanpassa bilder na - Visa bilder som är precis lika stora som de visas på din webbplats. Annars tvingar du dina besökare att ladda onödig data.
• Slå på lazy loading - Denna teknik laddar bara bilder som faktiskt är synliga i webbläsaren under den första laddningen och hämtar dem längre ner på sidan när besökarna scrollar. Detta förhindrar också slöseri med bandbredd på icke-LCP-bilder så att de viktiga kan laddas snabbare.

Tillgängliga verktyg

Du kan använda verktyg som TinyPNG för att komprimera bilder och konvertera dem till andra filformat. Något som Image Resizer kan också klippa dem till alla dimensioner du behöver. Du hittar också alternativ för detta i WordPress under Inställningar > Media.

Om du kör den senaste versionen av WordPress (eller något senare än version 5.4) bör din webbplats dessutom ha lazy loading aktiverat som standard.

Om du vill ha en automatisk lösning finns Imagify. Det är ett enkelt plugin för bildoptimering som fungerar bra tillsammans med WP Rocket. Det kan automatiskt bearbeta dina bilder för att göra dem lättare samtidigt som du balanserar kvalitet och prestanda. Pluginet konverterar dina bilder till WebP och Avif, ändrar storlek på stora bilder och visar automatiskt de optimerade versionerna på din WordPress-webbplats.

Dessutom erbjuder WP Rocket lazy loading inte bara för bilder utan även för CSS-bakgrunder och inbäddade media, som videor. Dessutom kan du utesluta media från att bli lazy-loaded när det är vettigt.

Använd en CDN

Ett CDN (Content Delivery Network) består av ett antal sammankopplade datorer i olika delar av världen som innehåller filer från din webbplats. Dess syfte är att leverera dem till dina besökare från den plats som ligger närmast dem och att göra det så snabbt som möjligt. Detta är särskilt viktigt för flerspråkiga webbplatser med en internationell publik.

Av den anledningen sätterWeglot automatiskt upp ett CDN så att du kan leverera ditt översatta innehåll snabbt över hela världen. Om du inte är Weglot måste du vanligtvis registrera dig för ett CDN och konfigurera det för din webbplats. Detta skiljer sig från leverantör till leverantör; här är exempel på instruktioner.

Om du vill ha lite hjälp har WP Rocket dedikerade tillägg för Sucuri och Cloudflare, två populära lösningar. De gör det snabbare och enklare att konfigurera dessa nätverk för innehållsleverans för din webbplats.

Du kan också aktivera andra nätverk i CDN-inställningarna genom att ange CNAME för din leverantör.

Slutligen har WP Rocket också sitt eget nätverk, kallat RocketCDN, som du kan konfigurera automatiskt inifrån plugin-programmet. Dessutom kan WP Rockets förmåga att krympa kodfiler minska CDN-trafiken och kostnaderna.

Adressering av kumulativ layoutskift

Nästa på vår lista över Core Web Vitals som du bör förbättra på din flerspråkiga webbplats är CLS. Så här kan du se till att du lyckas på den avdelningen.

Inkludera attribut för bildstorlek

En av de största faktorerna bakom dåliga CLS-poäng är ofta bilder utan definierade höjd- och breddattribut.

Om du inte anger hur stor en bild ska vara på den slutliga sidan kan webbläsaren inte reservera rätt mängd utrymme för den. Följden blir att när den faktiska storleken skiljer sig från platshållaren, dyker bilden plötsligt upp och trycker ner allt under den. Detta kan särskilt hända för lazy-loaded media, som inte visas när sidan laddas för första gången.

Den första regeln för att optimera CLS är alltså att lägga till höjd- och bredddefinitioner i dina bilder. Hur gör man det?

I ren HTML ser det helt enkelt ut så här:

<img src="image.jpg" alt="Insert alt text" width="600" height="700">

Om du använder WordPress blockredigerare bör den ställa in dimensioner automatiskt, men du kan också definiera specifika storlekar när du skapar ditt innehåll.

Dessutom har WP Rocket ett alternativ för att lägga till saknade bredd- och höjddeklarationer i dina mediefiler om du har missat några.

Reservera utrymme för Embeds, Iframes och Ad Slots

Samma regel som ovan gäller också för dynamiskt innehåll som inbäddade element eller annonser. Även de behöver höjd- och bredddefinitioner för att undvika att de flyttas runt i resten av sidlayouten.

Problemet här är att du inte alltid kan kontrollera hur stora dessa element kommer att bli eftersom de ofta kommer från tredjepartskällor. I så fall är det bra att åtminstone göra en uppskattning för att reservera utrymmet. Även om det slutliga elementet blir större kommer förskjutningen inte att vara lika uttalad, vilket leder till en lägre CLS-poäng.

I WordPress lägger redigeraren också automatiskt till bredd och höjd på inbäddat innehåll. Som nämnts har WP Rocket dessutom ett alternativ för latladdning av dina inbäddade media. Detta reserverar automatiskt det utrymme som behövs när de laddas.

Optimera leverans av webbteckensnitt

Även typsnitt kan orsaka layoutförändringar, särskilt när du använder anpassade typsnitt på din webbplats. De två vanligaste problemen här är:

• Flash of Unstyled Text (FOUT) - Detta innebär att en besökare först ser texten på din webbplats i ett standardteckensnitt som ändras så snart teckensnittsfilen laddas, vilket kan leda till att layouten flyttas.
• Flash of Invisible Text (FOIT) - Här kan du inte se någon text alls till en början. Den visas bara tillsammans med webbteckensnittsfilen.

Du kan undvika dessa problem med hjälp av följande strategier:

• Använd moderna teckensnittsformat - Precis som bilder finns teckensnitt i större och mindre filformat. De snabbaste att ladda är vanligtvis WOFF eller WOFF2.
• Definiera ett liknande reservtypsnitt - Om du använder ett reservtypsnitt som är mycket likt ditt faktiska typsnitt minskar sidrörelsen när bytet sker. Du kan använda Font Style Matcher för att hitta bra kombinationer.
• Preload fonts - Prioritera webbens fontfiler genom att placera dem tidigt i dokumentet och lägga till rel=preload i anropet. På så sätt laddar webbläsaren dem snabbare.

Om du använder WP Rocket kommer plugin-programmet med ett alternativ för att förladda teckensnittsfiler. Allt du behöver göra är att mata in sökvägen där de finns.

Förresten, en del av typsnittsoptimeringen för en flerspråkig webbplats är också att använda typsnitt som är kompatibla med olika alfabet. Detta gäller särskilt om du erbjuder RTL-språk (skrivs från höger till vänster) på din webbplats.

Hantera dynamiskt innehåll

Med dynamiskt innehåll menar vi element som visas efter att en sida har laddats färdigt. Exempel på detta är latent laddade bilder, banners, formulär etc.

För att hålla deras inverkan på din CLS-poäng låg, följ samma råd som ovan:

• Definiera deras behållare i förväg och ge dem fasta mått.
• Koppla deras utseende till en användarinteraktion. På så sätt undviker du en CLS-straffavgift.

Förresten, Weglot är fullt kapabel att översätta dynamiskt innehåll. Så du behöver inte oroa dig för att dina publikmedlemmar inte förstår det.

Arbetar på interaktion till nästa färg

Låt oss slutligen tala om hur du kan se till att din INP är på rätt plats.

Optimera JavaScript

JavaScript är vanligtvis en av de viktigaste faktorerna när det gäller problem med Interaction to Next Paint, särskilt så kallade "långa uppgifter". Det är JavaScript-uppgifter som tar längre tid än 50 ms att slutföra och de kan blockera webbläsarens förmåga att bearbeta användarinteraktioner på sidan. Att ha många skript på din webbplats i allmänhet kan dessutom hindra sidornas responsivitet.

Vi har redan talat om hur du kan optimera JavaScript i LCP-avsnittet. För INP är det särskilt viktigt att du hanterar långa uppgifter på din webbplats. Om sådana finns kan du hitta dem i Chrome-utvecklarverktygen. De är markerade med små röda trianglar.

Se om du kan dela upp dem i mindre bitar som kan laddas i följd utan att permanent blockera webbläsarens huvudtråd. Du kan hitta detaljerad information om detta i denna web.dev-handledning. Minifiering, uppskjutning, asynkronisering och borttagning av onödig kod hjälper också till att hålla webbläsaren lyhörd för användarinteraktion.

Om du använder WP Rocket kan du med plugin-programmet göra detaljerade konfigurationer för vilka JavaScript-filer du vill fördröja laddningen av och vilka du inte vill.

Minska antalet oanvända CSS

Allt som gäller för JavaScript gäller också för CSS. Nedladdning och bearbetning av stilmallar kan hålla webbläsaren upptagen och fördröja dess reaktion på användarinmatning.

Här kan du också använda verktyg för hastighetstestning för att hitta oanvänd CSS. Dessutom kan du dela upp dina stilmallar för att ladda viktig CSS först eller inline den.

Som nämnts har WP Rocket alternativ för att automatiskt ta bort oanvänd CSS.

Lägg till lazy loading

Vi har redan talat om lazy loading för bildoptimering. Det kan också ha en positiv inverkan på INP eftersom det frigör webbläsarresurser för att reagera på användarinmatning. Följ instruktionerna ovan för att implementera det.

Förresten, om du stöter på problem med att översätta lazy-loaded bilder, översätter Weglot som standard bildwebbadresser som läggs till i data-src eller srcset-attribut. Om din lazy-loading använder anpassade attribut kommer Weglot inte att översätta dem ur lådan - du måste lägga till ett PHP-filter, som är specifikt för WordPress-integrationer.

Om du använder Weglot JavaScript-integration och/eller fortfarande inte kan översätta dina bilder, kontakta support för mer information.

Förbättra Core Web Vitals på din flerspråkiga webbplats idag!

Core Web Vitals är en viktig kvalitetsindikator för användbarheten på din flerspråkiga webbplats. Det är inte bara besökarna som bryr sig om det här ämnet, Core Web Vitals påverkar också sökrankingen. Av den anledningen är det definitivt något du bör ta på allvar att optimera din webbplats för dem.

Som du säkert har sett ovan är detta inte så svårt. Det handlar mest om att se till att dina webbsidor laddas snabbt och förblir stabila och responsiva under den tiden. Det finns några viktiga åtgärder du kan vidta för det, som vi har behandlat ovan i detalj.

Om du känner att du inte klarar av att hantera kod och webbplatsfiler kan du också välja en plugin-lösning som WP Rocket. Det kan optimera din webbplats åt dig utan behov av utveckling eller tekniska färdigheter och gör en hel del av arbetet som standard.