Följ de här tipsen för att klara Googles krav på sidupplevelse och placera dig högre än dina konkurrenter. Googles Core Web Vitals blev för första gången en rankingfaktor redan 2021. I februari 2022 rullades ändringen ut fullt ut till alla mobila och stationära sökningar. Sedan dess har Google också arbetat med att leverera ny teknik för att optimera webbprestanda samt experimenterat med ett potentiellt nytt prestandamått.
Vad är Core Web Vitals och vad betyder de för rankningen?
Core Web Vitals är en uppsättning av tre mätvärden för användarupplevelsen:
Största innehållsliga målning: Hur snabbt visades den största bilden eller texten?
First Input Delay: Hur snabbt svarar webbplatsen på användarens inmatning?
Cumulative Layout Shift: Är sidan stabil efter rendering eller flyttas innehållet runt?
Google samlar in data för dessa mätvärden från riktiga användare som en del av Chrome User Experience Report. Sidor som klarar sig bra på dessa mätvärden rankas högre i sökresultaten.
Använd prioriteringstips för att snabba upp din webbplats
I april förra året släppte Chrome Priority Hints, en ny HTML-funktion som ger webbplatsägare ett sätt att markera de viktigaste resurserna på en sida. Detta är särskilt användbart för bilder som orsakar den största innehållsliga målningen. Som standard laddas alla bilder på en sida med låg prioritet. Det beror på att webbläsaren före den första renderingen av sidan inte kan avgöra om ett bildelement kommer att hamna som hjältebild eller som en liten ikon i sidans sidfot.
Därför är det vanligt att LCP-bilder laddas med låg prioritet till en början för att senare övergå till hög prioritet. Det innebär att webbläsaren kommer att vänta längre innan den börjar ladda ner bilden. Det här vattenfallet för begäran visar ett exempel på detta. Lägg märke till den långa grå linjen där webbläsaren känner till bilden men bestämmer sig för att den inte behöver börja ladda den ännu.
Att lägga till attributet fetchpriority=”high” löser detta problem. Webbläsaren börjar ladda LCP-bilden så snart den upptäcks, vilket gör att den största innehållsrika målningen sker mycket tidigare.
Kör högkvalitativa hastighetstester av webbplatsen
Det finns många kostnadsfria verktyg för webbplatshastighet på webben. Många som är baserade på Googles Lighthouse-verktyg använder dock något som kallas simulerad strypning, vilket kan leda till att felaktiga mätvärden rapporteras. Detta gäller även Googles verktyg PageSpeed Insights.
Du kan använda det kostnadsfria DebugBear-webbplatshastighetstestet för att få exakta prestandadata för din webbplats. Rapporterna innehåller både detaljerade laboratorietestresultat och verkliga användardata från Chrome User Experience Report (CrUX).
Det nya måttet Interaction to Next Paint (INP)
Core Web Vitals kommer att utvecklas, och 2022 släppte Google ett experimentellt nytt mått som kallas Interaction to Next Paint. Den mäter hur lång tid det tar för användaren att uppdatera efter att en användare har interagerat med sidan.
En användarinteraktion utlöser ofta att JavaScript körs på sidan, vilket uppdaterar sidans HTML. Sedan måste dessa sidändringar återges av webbläsaren för att visa det uppdaterade innehållet för användaren. Interaktion till nästa färg syftar till att åtgärda två begränsningar i måttet för första inmatningsfördröjning:
FID omfattar inte den tid som går åt till att bearbeta användarens inmatning.
FID tar endast hänsyn till den första interaktionen med användaren.
Mer än 90 % av webbplatserna klarar sig bra med mätningen av första inmatningstiden, vilket är mycket mer än vad som är fallet med de två andra Core Web Vitals. INP kan därför ersätta First Input Delay i framtiden, eftersom det ger en bättre bedömning av hur bra användarupplevelsen av en webbplats är.
Dra nytta av bättre bildstöd i Safari
Nedladdning av bilder tar mycket bandbredd i anspråk, så webbläsartillverkare arbetar ständigt med nya bildformat och plattformsfunktioner. Tyvärr tar det ett tag innan dessa funktioner har fullt stöd i alla större webbläsare. Som tur är har det skett vissa framsteg i Safari under förra året. Safari var den sista stora webbläsaren som började stödja det nya, mer kompakta AVIF-bildformatet. Safari har nu stöd för inbyggd lathållning av bilder med hjälp av attributet loading=”lazy”.
Identifiera och eliminera resurser som blockerar återgivningen
Resurser som blockerar rendering kan ha stor inverkan på hastigheten på din webbplats. Många CSS-stilblad och JavaScript-förfrågningar blockerar rendering, vilket innebär att inget innehåll visas på din webbplats förrän filerna har laddats ner.
För att hjälpa webbplatsägare att optimera sidladdningstiden har Google börjat utveckla bättre verktyg för att rapportera resurser som blockerar rendering. Den nya fliken Performance Insights i Chrome DevTools visar till exempel vilka förfrågningar som blockerar återgivningen.
Är du redo att omsätta några av de här tipsen i praktiken?
Om du använder ett verktyg för att kontinuerligt övervaka din webbplats kan du kontrollera att dina prestandaoptimeringar verkligen fungerar och se till att du blir varnad när prestandan försämras. Du kan också titta tillbaka på tidigare testresultat för att förstå vad som förändrades.
DebugBear kan övervaka Core Web Vitals för din webbplats och dina konkurrenters webbplatser över tid och ger dig de djupgående rapporter du behöver för att optimera din webbplats. Med rapporterna kan du också visa vilken inverkan du har haft på kunder och resten av ditt team. DebugBear håller också reda på Lighthouse-poängen för prestanda, SEO och tillgänglighet.