Rezolvarea problemelor CLS și Adsense

 

Este imposibil să mulțumiți complet Google. Eu am renunțat de mult timp la el, deși există probleme de rezolvat, cum ar fi CLS (Cumulative Layout Shift).

Cumulative Layout Shift

Cumulative Layout Shift este schimbarea cumulativă a layout-ului. Această măsurătoare este importantă deoarece analizează stabilitatea vizuală și frecvența cu care vizitatorii experimentează schimbări neașteptate de layout.

Pe scurt, ceea ce măsoară este orice deplasare a elementelor din partea de sus a paginii în timpul încărcării.

Obținerea unui CLS scăzut ajută la asigurarea faptului că pagina este plăcută ochiului și previne mișcările enervante care pot duce la pierderea vederii și/sau a poziției elementelor importante de navigare de către cititor.

Rezolvarea problemelor CLS și Adsense

Se înțelege că este o experiență bună pentru utilizator dacă CLS nu depășește 0,1, până la 0,25 trebuie îmbunătățit, iar din acel moment este considerat un scor rău. Acest lucru, după cum presupun că știți deja, poate fi măsurat în mai multe moduri. Cel mai frecvent utilizat este PageSpeed Insights.

După cum se menționează în documentația Core Web Vitals, un CLS rău poate fi cauzat de diverse elemente, cum ar fi o imagine sau un videoclip cu dimensiuni necunoscute, un font care este afișat mai mare sau mai mic decât alternativa sa sau o reclamă terță parte, un widget sau un efect de animație care își schimbă dimensiunea în mod dinamic.

În mod paradoxal, unele dintre elementele care tind să perie CLS-ul sunt reclamele Google Adsense. Mai ales dacă folosiți opțiunea de anunțuri automate, lăsând Google să decidă totul (nerecomandat, cel mai bine este să folosiți anunțurile automate doar pentru a afișa anunțuri tip bullet și/sau ancoră). Există cazuri în care acestea chiar strică complet viteza de încărcare.

Cum să detectați derularea

Iată care este miezul problemei: ce anume trebuie să căutăm și cum găsim? Ei bine, orice lucru care își schimbă dimensiunea și/sau se deplasează în timpul încărcării.

Acum că suntem în plin proces de încercare de a rezolva problema Adsense, putem să ne uităm la restul elementelor care pot îngrășa CLS-ul. Există diferite moduri de a face acest lucru, iată câteva dintre ele.

Privind

Cea mai rustică metodă este simpla observare, cu ochiul liber. Dacă deplasarea este vizibilă, o veți vedea imediat, dar există mișcări mai puțin vizibile care necesită o inspecție mai atentă.

În Search Console

În GSC, la rubrica „Top web metrics”, puteți obține lista URL-urilor cu probleme CLS și LCP care vă va ajuta să le examinați mai atent, una câte una.

Rezolvarea problemelor CLS și Adsense

Depanatorul de modificări cumulative ale layout-ului (Cumulative Layout Shift Debugger)

Cumulative Layout Shift Debugger este un site web în care introduceți adresa URL pe care doriți să o analizați și acesta creează un GIF animat care arată toate schimbările de layout ale versiunii mobile și desktop.

Acest instrument, realizat de un inginer Chrome, este unul dintre cele mai utile instrumente pentru a găsi probleme CLS.

Rezolvarea problemelor CLS și Adsense

Dacă cea mai mare parte a textului de pe pagină este evidențiată, sunt șanse ca fonturile dvs. să cauzeze schimbările de aspect.

Generator GIF de schimbări de layout

Layout Shift GIF Generator este un alt site care face același lucru, generează un gif cu schimbările pentru versiunea mobilă și desktop. Îl puteți încerca pentru a compara rezultatele. Întotdeauna există mici diferențe în măsurătorile fiecărui instrument și este posibil să găsiți într-un instrument ceea ce celălalt nu este capabil să arate sau nu detectează la un moment dat.

Vizualizator CLS

Acest instrument, fiind unul dintre cele mai simple, este cel cu care am reușit să surprind cele mai bune deplasări.

CLS Visualizer este o extensie foarte utilă, care, așa cum sugerează și numele, vă va ajuta să vizualizați metrica Cumulative Layout Shift a paginii, arătându-vă exact ce elemente se deplasează și cum se deplasează. Rețineți că acesta este, de asemenea, un instrument de laborator care oferă datele în funcție de dispozitiv, browser, rezoluția ecranului sau tipul de conexiune.

Rezolvarea problemelor CLS și Adsense
Acea pictogramă de demon avea o deplasare de locație a blocului care o conținea, care era de neobservat în navigare.

Când activați extensia, aceasta vă va afișa măsurătorile CLS într-o listă, iar când faceți clic pe fiecare dintre ele, animația elementului care o provoacă va apărea cu roșu.

Datorită acestei extensii am obținut CLS zero pe multe pagini. Deși pot fi atât de multe lucruri care îl cauzează încât am lăsat-o instalată pentru a revizui url-urile fără grabă.

Rezolvarea problemelor CLS și Adsense

Modificați viteza de încărcare a site-ului cu Chrome Dev Tools

Chrome Dev Tools oferă posibilități interesante, una dintre cele mai utile pentru a pune mâna pe chestia asta cu CLS este opțiunea de a reduce lățimea de bandă la care se încarcă pagina pentru a putea vizualiza clar când are loc schimbarea de design și ce elemente contribuie la aceasta.

Pentru a face acest lucru, deschideți Chrome Dev Tools în browser cu click dreapta/inspect pe site-ul dvs. și în Network căutați pictograma Wifi prezentată în imagine, iar lângă ea veți găsi o listă derulantă unde puteți adăuga o viteză personalizată.

Rezolvarea problemelor CLS și Adsense

Creați un profil nou și adăugați 100 Kb sau mai puțin pentru a-l testa în „slow motion”.

Rezolvarea problemelor CLS și Adsense

Acum, navigând la o viteză din perioada în care internetul funcționa lent, vă va fi mult mai ușor să identificați ce anume vă poate crea probleme în timpul încărcării.

Renderizare

În Regiunile Layout Shift din Chrome Dev Tools puteți, de asemenea, să vedeți modificările de aspect evidențiate în albastru pe măsură ce navigați în timp real în pagină.

Iată care sunt pașii pentru a activa regiunile de schimbare a aspectului:
În consolă, căutați „Rendering” sau „rendering”, dacă îl aveți în limba engleză.

Bifați caseta de selectare Regiuni de randare și orice alte casete de selectare pe care doriți să le încercați.
Acum, pe măsură ce navigați pe pagină, modificările de aspect vor fi evidențiate în albastru.

Rezolvarea problemelor CLS și Adsense

Cu o extensie de browser

În Chrome, puteți instala extensia CLS Checker – Journey Further (Verificator CLS – Călătorie suplimentară ) și puteți testa toate URL-urile care au o punctuație greșită. În plus, extensia oferă indicii sub forma unor etichete roșii și vă arată lista elementelor și CLS-urile pe care le consumă. Făcând clic pe „Toogle”, se evidențiază elementul în cauză. În cazul meu, deoarece rezolvasem deja problema anunțurilor Adsense, apare doar unul singur.

Rezolvarea problemelor CLS și Adsense

Webpagetest

O altă pagină de măsurare unde puteți face un test pe webpagetest.org și puteți vedea videoclipurile și gif-urile animate pe care le generează.

Rezolvarea problemelor CLS și Adsense

Dacă puneți pe pauză videoclipul, puteți găsi mai ușor deplasările mici.

Dacă vă uitați cu atenție, elementele de meniu, precum și titlul și textele sunt deplasate puțin spre dreapta prin ceea ce pare a fi o schimbare a dimensiunii și/sau a locației fontului, dar spațiul publicitar de deasupra titlului este deja rezervat, așa că nu deplasează conținutul în jos. Problema a fost rezolvată prin micșorarea puțin a H1-ului și repararea înfășurării textelor însoțitoare.

Rezolvarea problemelor CLS și Adsense

Dar asta este o altă problemă, acum să ne ocupăm de comportamentul anunțurilor.

Soluții pentru rezervarea spațiilor pentru blocurile de anunțuri

Căutând cea mai bună și mai rapidă soluție, am descoperit că soluția cea mai bună este de a adăuga o valoare minimă de înălțime la un wrapper (div) în jurul fiecărui bloc de anunțuri pentru a rezerva acel spațiu și a evita defilarea după încărcare.

Cu toate acestea, se pare că nu este suficient să folosiți o clasă pentru a indica această proprietate CSS, ci și să folosiți un ID pentru wrapper. Se pare că, dintr-un motiv necunoscut, Google AdSense JavaScript elimină directivele de înălțime minimă din orice obiect părinte. Cu toate acestea, ele nu sunt eliminate dacă se utilizează un ID pentru direcționarea CSS.

Acest lucru este explicat aici în rezumat și puțin mai detaliat în documentația Google. Deoarece această soluție mi s-a părut o pacoste, deoarece trebuia să verific toate blocurile, am tot căutat o alternativă până când am găsit ceea ce a funcționat pentru mine, și anume Ad Inserter. Iată care au fost pașii.

Schimbați anunțurile adaptive la dimensiuni fixe

Rezolvarea problemelor CLS și Adsense

Primul lucru a fost să nu mai folosiți blocurile de reclame adaptive. Am schimbat toate blocurile la dimensiuni fixe.

În privința acestei decizii trebuie să studiați și să evaluați cazul dvs. specific.

Deși Google susține că cele adaptive generează mai multe venituri (evident, din cauza posibilității de a putea afișa dimensiuni diferite), acest lucru este destul de elastic și poate varia în funcție de diferite scenarii. Dacă optați pentru cele mai populare dimensiuni, veți afișa întotdeauna reclame.

Dezactivați optimizarea dimensiunilor

Rezolvarea problemelor CLS și Adsense

Deși se presupune că blocurile au deja o dimensiune fixă, ar trebui să dezactivați opțiunea care permite Google să decidă singur dimensiunea anunțurilor pentru mobil. Această opțiune poate fi găsită în administrarea Adsense, la secțiunea Ads/Global Settings.

În acest fel evităm surprizele în cazul în care am ratat un anunț pe care l-am plasat manual. În orice caz, doar pentru că au o dimensiune fixă nu înseamnă că nu mai sunt responsive.

Rezervați spațiu pentru anunțuri cu Ad Inserter

Ad Inserter este, după părerea mea, cel mai bun plugin pentru gestionarea anunțurilor, care poate fi folosit chiar și pentru a adăuga alt conținut.

Pentru a rezerva spațiu pentru fiecare anunț, trebuie doar să mergeți la „Display” și să definiți lățimea și înălțimea fiecărui bloc.

Rezolvarea problemelor CLS și Adsense

Dacă îi folosiți versiunea PRO, puteți verifica și Lazy Load, care, de asemenea, tinde să mai atenueze puțin CLS-ul.

Câteva considerații

Rezervarea spațiului pentru Adsense are dezavantajele sale, în cazul în care anunțurile nu pot fi afișate pentru că nu sunt servite la dimensiunea respectivă sau nu există advertiseri pentru site-ul dvs. la un moment dat, puteți obține un spațiu gol de dimensiunea spațiului rezervat.

În Ad Inserter, numai pentru inserțiile de pe server, puteți seta înălțimea direct cu cod CSS personalizat.

Rețineți că înălțimea anunțului este definită de codul anun țului. Codul pentru anunțuri adaptive poate seta înălțimea anunțului în funcție de spațiul disponibil.

Unele rețele de anunțuri (cum ar fi AdSense) pot, de asemenea, să difuzeze anunțuri mai mici decât spațiul disponibil. Înălțimea blocului, așa cum este definită în Ad Inserter, este înălțimea blocului inserat, adică a div-ului care îl înfășoară. Acesta este spațiul rezervat pentru anunț. La rezervarea acestuia se pot întâmpla următoarele:

  1. Dacă înălțimea anunțului este aceeași cu înălțimea spațiului rezervat (înălțimea blocului), nu va exista nicio modificare a aspectului și nu va afecta CLS.
  2. În cazul în care înălțimea anunțului este mai mare decât înălțimea spațiului rezervat (înălțimea blocului), este posibil ca designul să fie deplasat în jos pentru a găzdui anunțul și să afecteze CLS.
  3. Dacă înălțimea reclamei este mai mică decât înălțimea spațiului rezervat (înălțimea blocului), veți obține un spațiu gol sub reclamă, dar aspectul nu se va modifica și nu va afecta CLS.

Unele coduri de anunțuri, cum ar fi codul de anunțuri adaptive AdSense, pot anula înălțimea containerelor principale. În acest caz, înălțimea blocului va fi suprascrisă și nu va fi aplicată.

Pe scurt, în cazul unei nevoi urgente de a rezolva problemele CLS prin reducerea la minimum a modificărilor de design, cea mai rapidă opțiune este de a utiliza dimensiuni fixe ale anunțurilor ori de câte ori este posibil.

Rezolvarea problemelor CLS și Adsense

Și, dacă tot sunteți în această situație, puteți să vă asigurați că nu vă lipsesc dimensiunile imaginilor, acest lucru poate fi, de asemenea, rezolvat în mai multe moduri. Unele dintre cele mai rapide și ușoare sunt utilizarea <a href=”https://perfmatters.io/?ref=474


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting

Grandes personan que patrocinan.

Patreon

Recibe contenido extra y adelantos desde sólo un dolarcito al mes como ya hacen estos amables lectores:

César D. Rodas - Jorge Zamuz - David Jubete Rafa Morata - Sasha Pardo - Ángel Mentor  - Vlad SabouPedro - Álvaro RGV - Araq