Det är omöjligt att göra Google nöjd. Jag gav upp det för länge sedan, även om det finns frågor som måste lösas, t.ex CLS
Kumulativ layoutförskjutning Cumulative Layout Shift är den kumulativa förändringen av layouten. Detta mått är viktigt eftersom det analyserar visuell stabilitet och hur ofta besökarna upplever oväntade layoutförändringar.
Kortfattat kan man säga att den mäter alla förskjutningar av elementen längst upp på sidan under laddningen.
Att uppnå en låg CLS bidrar till att säkerställa att sidan är behaglig för ögat och förhindrar irriterande förflyttningar som kan leda till att läsaren förlorar synen och/eller positionen för viktiga navigeringselement.
Det betraktas som en god användarupplevelse om CLS inte överstiger 0,1, upp till 0,25 behöver det förbättras och från och med då betraktas det som ett dåligt resultat. Detta kan, som ni säkert vet, mätas på flera olika sätt. Det vanligaste är följande PageSpeed Insights
Såsom noteras i dokumentationen av Core Web Vitals kan en dålig CLS orsakas av olika element, t.ex. en bild eller video med okända dimensioner, ett typsnitt som visas större eller mindre än dess alternativ, eller en annons, widget eller animationseffekt från tredje part som ändrar storlek dynamiskt.
Paradoxalt nog är några av de element som tenderar att borsta CLS Google Adsense-annonser. Särskilt om du använder automatiska annonser bullet- och/eller ankarannonser ). Det finns fall där de till och med helt förstör laddningshastigheten.
Hur man upptäcker förskjutning Här är kruxet: vad exakt behöver vi leta efter och hur hittar vi det? Jo, allt som ändrar storlek och/eller skiftar under laddningen.
Nu när vi är i full färd med att försöka åtgärda Adsense-problemet kan vi ta en titt på resten av de element som kan göda CLS. Det finns olika sätt att göra detta, här är några.
Titta på Den mest rustika metoden är enkel observation, med ögat. Om rörelsen är märkbar ser du den direkt, men det finns mindre märkbara rörelser som kräver en närmare granskning.
I Search Console I GSC kan du under "Top Web Metrics" få en lista över webbadresser med CLS- och LCP-problem som hjälper dig att titta närmare på dem en efter en.
Felsökare för kumulativ layoutförskjutning Felsökare för kumulativ layoutförskjutning,
Det här verktyget, som gjorts av en Chrome-ingenjör, är ett av de mest användbara för att hitta CLS-problem.
Om det mesta av texten på sidan är markerad är det troligt att dina typsnitt orsakar layoutförändringarna.
GIF-generator för layoutförändringar Layout Shift GIF Generator
CLS Visualizer Det här verktyget är ett av de enklaste, men det är det som jag har lyckats fånga de bästa förskjutningarna med.
CLS Visualizer
Den där daemonikonen hade en platsförskjutning av blocket som innehåller den som inte märktes i navigeringen. När du aktiverar tillägget visar det dig CLS-mätningarna i en lista och när du klickar på varje mätning visas animeringen av det element som orsakar den i rött.
Tack vare detta tillägg har jag uppnått noll CLS på många sidor. Även om det kan finnas så många saker som orsakar det att jag har låtit det vara installerat för att granska webbadresser utan att ha bråttom.
Chrome Dev Tools erbjuder intressanta möjligheter, en av de mest användbara för att få bukt med det här med CLS är möjligheten att minska den bandbredd vid vilken sidan laddas så att du tydligt kan se när designförändringen sker och vilka element som bidrar till den.
För att göra detta öppnar du Chrome Dev Tools i webbläsaren med högerklick/inspektion på din webbplats och i Network letar du efter Wifi-ikonen som visas i bilden och bredvid den hittar du en rullgardinsruta där du kan lägga till en anpassad hastighet.
Skapa en ny profil och lägg till 100 Kb eller mindre för att testa den i "slow motion".
När du nu surfar med en hastighet från den tid då internet gick långsamt kommer du att ha mycket lättare att identifiera vad som kan ge dig problem vid laddning.
Rendering I Layout Shift Regions i Chrome Dev Tools kan du också se layoutändringarna markerade med blått medan du bläddrar på din sida i realtid.
Här är stegen för att aktivera Layout Shift Regions:
Med ett webbläsartillägg I Chrome kan du installera tillägget CLS Checker - Resa vidare
Webpagetest En annan mätplats där du kan göra ett test på webpagetest.org
Om man pausar videon är det lättare att hitta små förskjutningar.
Om man tittar noga förskjuts menypunkterna samt titeln och texterna lite till höger genom vad som verkar vara en ändring av teckensnittsstorlek och/eller placering, men annonsutrymmet ovanför titeln är redan reserverat, så det förskjuter inte innehållet nedåt. Det löstes genom att minska H1 :an lite och snygga till omslaget av den medföljande texten.
Men det är en annan sak, nu ska vi ta itu med annonsernas beteende.
Lösningar för att reservera annonsblocksutrymmen När jag letade efter den bästa och snabbaste lösningen kom jag fram till att den bästa lösningen var att lägga till ett värde för minsta höjd till en omslagsdel (div) runt varje annonsblock för att reservera det utrymmet och undvika scrollning efter laddning.
Det verkar dock som om det inte räcker att bara använda en klass för att peka på denna CSS-egenskap, utan man måste också använda ett ID för omslaget. Det verkar som om Google AdSense JavaScript av någon okänd anledning tar bort direktiven om minsta höjd från alla överordnade objekt. De tas dock inte bort om ett ID används för CSS-riktad inriktning.
Detta förklaras på följande sätt här mer detaljerat Ad Inserter
Ändra adaptiva annonser till fast storlek Det första var att sluta använda adaptiva annonsblock. Jag ändrade alla block till fasta storlekar .
Om detta beslut måste du studera och utvärdera ditt specifika fall.
Även om Google hävdar att de adaptiva annonserna genererar mer intäkter (uppenbarligen på grund av möjligheten att kunna visa olika storlekar) är detta ganska elastiskt och kan variera beroende på olika scenarier. Om du väljer de mest populära storlekarna kommer du alltid att visa annonser.
Inaktivera storleksoptimering Även om blocken redan ska ha en fast storlek bör du inaktivera det alternativ som gör att Google kan bestämma storleken på mobilannonser på egen hand. Det här alternativet finns i Adsense-administrationen under Annonser/Globala inställningar .
På så sätt undviker vi överraskningar om vi har missat en annons som vi har placerat för hand. I vilket fall som helst betyder inte att de inte längre är responsiva bara för att de har en fast storlek.
Reservera utrymme för annonser med Ad Inserter Ad Inserter är, tycker jag, det bästa insticksprogrammet för annonshantering, som även kan användas för att lägga till annat innehåll.
För att reservera utrymme för varje annons är det bara att gå till "Display" och definiera bredden och höjden för varje block.
Om du använder dess pRO-version
Några överväganden Attreservera utrymme för Adsense har sina nackdelar , där annonser inte kan visas eftersom de inte serveras i den storleken eller om det inte finns några annonsörer för din webbplats vid någon tidpunkt, kan du få ett tomt utrymme som är lika stort som det reserverade utrymmet.
I Ad Inserter kan du, endast för server-side-insättningar , definiera höjden direkt med Anpassad CSS .
Observera att annonsens höjd definieras av annonskoden . Koden för adaptiva annonser kan ställa in annonsens höjd i enlighet med det tillgängliga utrymmet.
Vissa annonsnätverk (t.ex. AdSense) kan också visa annonser som är mindre än det tillgängliga utrymmet. Blockhöjden, som definieras i Ad Inserter, är höjden på det infogade blocket, dvs. den div som omsluter det. Detta är det utrymme som är reserverat för annonsen . När du reserverar det kan följande hända:
Om annonsens höjd är densamma som höjden på det reserverade utrymmet (blockhöjden) sker ingen layoutförändring och det påverkar inte CLS. Om annonsens höjd är större än höjden på det reserverade utrymmet (blockhöjd) kan utformningen flyttas nedåt för att rymma annonsen och påverka CLS. Om annonsens höjd är mindre än höjden på det reserverade utrymmet (blockhöjden) kommer du att få ett tomt utrymme under annonsen, men layouten kommer inte att ändras och påverkar inte CLS. Vissa annonskoder, t.ex. den adaptiva annonskoden AdSense , kan åsidosätta höjden på huvudbehållarna . I detta fall skrivs blockhöjden över och tillämpas inte.
Kort sagt, om det finns ett brådskande behov av att åtgärda CLS-problem genom att minimera layoutändringar är det snabbaste alternativet att använda fasta annonsstorlekar när det är möjligt.
Och när du ändå håller på kan du se till att du inte missar dimensioner på bilder, detta kan också åtgärdas på flera sätt. Några snabba och enkla sätt är att använda Perfmatters rekommenderar ) eller WP Rocket
Eller insticksprogrammet Litespeed Cache
Om allt har gått bra kommer du om några timmar att se att din CLS sjunker i fältrapporterna och om några dagar i labbrapporterna från PageSpeed Insights labbrapporter
