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 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.
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 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.
Depanatorul de modificări cumulative ale layout-ului (Cumulative Layout Shift Debugger) Cumulative Layout Shift Debugger
Acest instrument, realizat de un inginer Chrome, este unul dintre cele mai utile instrumente pentru a găsi probleme CLS.
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
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
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ă.
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ă.
Creați un profil nou și adăugați 100 Kb sau mai puțin pentru a-l testa în "slow motion".
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:
Cu o extensie de browser În Chrome, puteți instala extensia CLS Checker - Journey Further (Verificator CLS - Călătorie suplimentară
Webpagetest O altă pagină de măsurare unde puteți face un test pe webpagetest.org
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.
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 mai detaliat Ad Inserter
Schimbați anunțurile adaptive la dimensiuni fixe 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 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.
Dacă îi folosiți versiunea PRO
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:
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. Î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. 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.
Ș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
