K. Andersson
Om du ännu inte har kommit igång med Core Web Vitals är 2022 den perfekta tiden att göra det. Dessa vitals, som spelar en integrerad roll i den nya, så viktiga rankningsfaktorn för sidupplevelser, har ökat i prevalens sedan de introducerades i maj 2020.
Det finns 3 huvudsakliga grundläggande webbviktigheter:
- Largest Contentful Paint (LCP) Den största innehållsrika färgen är ett mått på hur lång tid det tar för det största synliga innehållsrika området på en sida att laddas.
- Fördröjning med första ingång (FID) Fördröjning med första ingång mäter tiden mellan användarens första inmatning och när de ser resultatet av den åtgärden på skärmen.
- Cumulative Layout Shift (CLS) Cumulative Layout Shift (CLS) är ett prestandaproblem för Google Core Web Vitals som kan upptäckas av Google PageSpeed Insights.
Följande djupgående titt kommer att fokusera på det sistnämnda viktiga, kumulativa layoutskiftet. Förutom att förklara vad som är Cumulative Layout Shift, kommer vi att beskriva hur det påverkar användarupplevelsen, dess roll i sökmotoroptimering, hur man förbättrar CLS och mer.
Vad är CLS?
Som namnet antyder står kumulativ layoutförskjutning för webbplatselement som oväntat skiftar runt en webbsidas layout. Har du någonsin varit på en webbsida och läst artikeln framför dig och texten plötsligt flyttas till ett annat område på sidan? Eller kanske du var på väg att klicka på en knapp, men precis som du gör, flyttas den och du klickar på en annan länk?
Exempel som dessa är där en webbplatss CLS vacklar. Element som kan skifta och dansa runt sidan inkluderar bilder, videor, typsnitt, knappar, kontaktformulär och andra typer av innehåll. Under är Googles beskrivning av denna Core Web Vital:
CLS är ett mått på den största skuren av layoutförskjutningspoäng för varje oväntat layoutskifte som inträffar under hela livslängden på en sida. En layoutförskjutning inträffar varje gång ett synligt element ändrar sin position från en renderad bildruta till nästa.
Om din webbplats lider av ett dåligt CLS-resultat är det viktigt att du förbättrar denna aspekt – annars kommer dina besökare att få en dålig användarupplevelse.
Hur påverkar CLS användarupplevelsen?
Som du kan förvänta dig har CLS förmågan att avsevärt påverka användarupplevelsen. Att bara ha ett elementskifte på en knapp kan få någon att klicka på fel länk, skicka dem till fel webbsida och leda till mycket onödigt krångel. Det kanske inte verkar så mycket överlag, men denna frustration kan allvarligt hämma deras upplevelse när de är på din webbplats.
I dessa tider förväntar sig användare inte att vänta på att en webbsida ska laddas och att alla element hamnar på rätt plats. De förväntar sig omedelbara resultat. Som ett resultat, om dina sidor misslyckas med att uppnå ett högkvalitativt CLS-resultat, med element som flyttas runt innan de slår sig ner, kommer detta att göra dina besökare – och Google – upprörda.
Vad är ett bra CLS-poäng?
Ingen gissning krävs för att veta vad en bra CLS-poäng innebär. Nedan följer en sammanfattning av Googles riktlinjer för CLS-poäng:
- Bra = 0,1 poäng eller mindre
- Behöver förbättring = Mellan 0,1 och 0,25 poäng
- Dålig = Över 0,25 poäng
Observera att du kan använda vårt Core Web Vitals Checker-verktyg för att mäta din webbplats CLS-poäng.
Nedan är hur Google förklarar beräkningen bakom CLS-poängen:
För att beräkna layoutförskjutningspoängen tittar webbläsaren på visningsportens storlek och rörelsen av instabila element i visningsporten mellan två renderade bildrutor. Layoutförskjutningspoängen är en produkt av två mått på den rörelsen: anslagsfraktionen och avståndsfraktionen (båda definierade nedan): layoutförskjutningspoäng = effektfraktion * avståndsfraktion
Ett “bra” CLS-poäng är målet – Google rekommenderar att du håller det under 0,1. Det är möjligt att uppnå en CLS-poäng på 0 med sidor som är helt statiska. Om layoutförskjutningar krävs kommer poängen naturligtvis att gå upp.
Ett “behöver förbättras”-poäng är ett starkt tecken på att du i slutändan kan nå betyget “bra”, vilket är nödvändigt för att i slutändan uppnå Googles godkännande. Om din poäng är “dålig” och din CLS är över 0,25, måste du vidta nödvändiga åtgärder för att förbättra din sidas layoutförskjutning – mer om det nedan.
Hur mäts CLS?
Som nämnts ovan används följande formel för att mäta CLS:
layoutförskjutningspoäng = effektfraktion * avståndsfraktion
Låt oss ta en närmare titt på de två faktorerna som spelar in för CLS.
Stötfraktion
För att anslagsfraktionen ska kunna beräknas, är det först nödvändigt att anslagsområdet beräknas.
Påverkansregionen är det allmänna område som layoutförskjutningen påverkar. Google identifierar varje element som påverkas, kombinerar det ursprungliga området med dess layoutförskjutna motsvarighet, och särskiljer slutligen nedslagsområdet.
En rektangel är den typiska formen på anslagsområdet. Formen kan dock bli mer komplex om du använder flera layoutskiftningar som är både vertikala och horisontella.
Om vi går tillbaka till effektfraktionen så beräknas detta med följande formel:
område av nedslagsområde / område av synfält = nedslagsfraktion
För förtydligande representerar visningsporten den synliga delen av sidan på skärmen som inte kräver någon rullning nedåt.
Avståndsfraktion
Den första utgåvan av CLS inkluderade endast den tidigare nämnda effektfraktionen. Ändå insåg Google att denna enda CLS-beräkning hade ett fel: stora rörelser är mer oroande än små, och stora element kan bara göra en liten rörelse som en del av anslagsfraktionen.
Resultatet: skapandet av avståndsfraktion.
För att avståndsandelen ska kunna beräknas är det nödvändigt att först räkna ut rörelsesträckan.
När det gäller vad rörelseavståndet är, mäter detta layoutskiftets avstånd före och efter akten. I huvudsak ger det svaret på hur mycket ett element rörde sig efter att det skiftade.
Följande beräkning är hur avståndsfraktionen räknas ut:
max rörelseavstånd / visningsporthöjd = avståndsandel
Hur kan CLS förbättras?
Du vet vad CLS är, vad ett bra betyg är och hur detta element beräknas. Nu kanske du vill ha svar på följande fråga: Hur förbättrar jag min CLS Web Core Vital framgångsrikt?
Den goda nyheten är att om du behöver fixa Core Web Vitals finns det olika steg du kan ta. Så är det även med CLS. Med det i åtanke är här några viktiga steg för att förbättra ditt CLS-resultat om det behövs:
Lägg till dimensioner för bilder och videor
Mått, även höjd- och breddelement, kan hjälpa till när det kommer till dina bilder och videor. Även om höjd/breddelement brukade vara vanliga när detta media införlivades förr i tiden, är introduktionen av responsiv webbdesignResponsiv webbdesign en webbdesignmetod som syftar till att skapa webbplatser för att ge en optimal visningsupplevelse. ändrat hur bilder och videor lades till på en webbplats.
Detta tillvägagångssätt har dock orsakat ett problem med CLS: det orsakar onödiga förändringar på grund av att media har ett dynamiskt tillvägagångssätt, snarare än ett fast. Om du inkluderar höjd- och breddattribut till dina bilder/videor kan detta förhindra att de studsar runt på sidan i onödan.
Undvik att lägga till innehåll ovanpå befintligt innehåll
Det rekommenderas starkt att du undviker att inkludera innehåll ovanpå befintligt innehåll på en webbsida. Den enda anledningen till att detta inträffar är om det görs som ett svar på en användares interaktioner.
När du undviker den här situationen säkerställer det att alla layoutförändringar som görs bara sker när de förväntas.
En försiktighet med webbaserade typsnitt
Visste du att om du använder nedladdade webbteckensnitt kan detta orsaka Flash of Invisible Text? För den oinitierade kan FOIT leda till att ett tomt utrymme visas innan det nedladdade teckensnittet visas. Enkelt uttryckt är detta inte bra för dina ansträngningar att minska effekten av CLS.
Lyckligtvis är det inte så svårt att förändra situationen med webbaserade typsnitt. I länken som används för webbteckensnittsnedladdningen lägger du helt enkelt till en för att förladda teckensnittsfilerna och ladda ner dem som en prioriterad tillgång.
Hur påverkar CLS SEO?
Med Googles introduktion av Core Web Vitals, och med användarnas förväntningar i åtanke, har det aldrig varit viktigare för din webbplats att fungera sömlöst. När det gäller CLS, om du har element som text och bilder som svänger över sidan innan du slår dig ner, skapar detta ett dåligt första intryck. Det kommer inte bara att misshaga användarna, utan också sökmotorjätten – särskilt med dessa nya parametrar på plats.
Enligt vår välgrundade uppfattning kan ev SEO-revision processen bör kontrollera Core Web Vitals i denna tid. Men vilken typ av inverkan har CLS på din webbplats SEO-rankning?
I detta formativa skede för Core Web Vitals och sidupplevelse är effekten inte klar. Vissa data pekar på att det har en minimal effekt, medan andra data tyder på att det kan orsaka en betydande förändring i en webbplatss sökrankning.
Vad vi däremot vet är att du måste börja ta CLS på allvar just nu om du inte redan har gjort det. Tecknen pekar på att Core Web Vitals kommer att spela en större roll inom en snar framtid, vilket innebär att din webbplats måste förberedas. Det handlar inte bara om SEO heller. Du vill leverera den bästa användarupplevelsen för dina webbplatsbesökare och att minska layoutförskjutningen är ett litet – men värdefullt – sätt att uppnå det målet.
Sammanfattningsvis
CLS är redan viktigt, men detta är bara början. Dess betydelse kommer bara att växa ur SEO-synpunkt – och du måste ta med det i dina planer så snart som möjligt. Är du skrämd av den tekniska sidan av CLS? Om så är fallet, vår hanterad SEO tjänsten kan ta bort dessa bekymmer och våra marknadsföringsexperter kan sätta ihop en fullserviceplan som täcker alla Core Web Vitals.
För ett urval av gratis resurser, inklusive djupgående guider som den här om andra Core Web Vitals, se till att du använder vår Kunskapshubb.
