Felsöka problem med CLS och Adsense

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 (Cumulative Layout Shift).

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 Vitalskan 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 låter Google bestämma allt (rekommenderas inte, det är bäst att använda automatiska annonser endast för att visa 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, är en webbplats där du anger den webbadress som du vill analysera och den skapar en animerad GIF som visar alla layoutförändringar i mobil och datorversionen.

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 är en annan webbplats som gör samma sak, den genererar en gif med förskjutningarna för mobilversionen och skrivbordsversionen. Du kan prova den för att jämföra resultaten. Det finns alltid små skillnader i mätningarna av varje verktyg och du kan hitta i ett verktyg det som det andra inte kan visa eller inte upptäcker vid en viss tidpunkt.

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 är ett mycket användbart tillägg som, som namnet antyder, hjälper dig att visualisera sidans mått för kumulativ layoutförskjutning genom att visa exakt vilka element som förskjuts och hur de förskjuts. Observera att detta också är ett labbverktyg som ger data baserat på din enhet, webbläsare, skärmupplösning eller anslutningstyp.

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.

Ändra webbplatsens laddningshastighet med Chrome Dev Tools

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:
Sök efter "Rendering" i konsolen.

Markera kryssrutan Layout Shift Regions och alla andra kryssrutor du vill prova.
När du bläddrar på sidan markeras layoutändringarna i blått.

Med ett webbläsartillägg

I Chrome kan du installera tillägget CLS Checker - Resa vidare och testa alla de webbadresser som är fulla av interpunktion. Dessutom ger tillägget tips i form av röda etiketter och visar dig listan över element och den CLS som de förbrukar. Om du klickar på "Toogle" markeras elementet i fråga. I mitt fall, eftersom problemet med Adsense-annonsen redan var åtgärdat, visas endast en annons.

Webpagetest

En annan mätplats där du kan göra ett test på webpagetest.org och du kan se de videor och animerade gifs som den genererar.

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 sammanfattat och något förenklat mer detaljerat i Googles dokumentation. Eftersom jag tyckte att den här lösningen var jobbig, eftersom jag var tvungen att kontrollera alla block, letade jag efter ett alternativ tills jag hittade det som fungerade för mig, nämligen Ad Inserter. Det här var stegen.

Ä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-versionversion kan du också kontrollera Lazy Load, som också tenderar att lindra CLS lite mer.

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:

1. 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.
2. 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.
3. 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 (plugin som jag rekommenderar) eller WP Rocket (båda betalda).

Eller insticksprogrammet Litespeed Cache om du har din blogg på en Litespeed-server.

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.