Schimbare cumulativă a aspectului: îmbunătățiți scorul Google CLS

Ați fost vreodată într-o situație în care butonul de finalizare a comenzii dispare atunci când încercați să plasați o comandă?

Da! Este frustrant.

Adevărul este că se întâmplă prea des și cu prea mulți dintre noi.

Din fericire, ca întotdeauna, Google acordă prioritate experienței utilizatorului mai presus de orice altceva.

Acesta este motivul pentru care va rula trei noi valori de performanță ca parte a elementelor vitale web de bază, începând cu 2021.

Core Web Vitals este conceput pentru a măsura viteza de încărcare, interactivitatea și stabilitatea vizuală a unei pagini.

Trei metrici reprezintă acestea:

1. Cea mai mare vopsea plină de conținut (LCP)

2. Întârziere la prima intrare (FIP)

3. Schimbare cumulativă a aspectului (CLS)

Să înțelegem CLS atât din punctul de vedere al utilizatorului, cât și al webmasterilor (SEO).

Ce este schimbarea cumulată a aspectului?

Cumulative Layout Shift (CLS) reprezintă stabilitatea vizuală a unui site web.

Măsoară cantitatea de schimbări nesemnificative de aspect pe o pagină.

Schimbările neașteptate ale aspectului sunt rezultatul unei pagini web care se mișcă în jurul ei fără intervenția utilizatorului.

Google CLS este un fel de indicator (semnal) pentru a rezolva problema, măsurând cât de des o mișcare neașteptată a elementelor paginii afectează experiența utilizatorului.

O schimbare a unui aspect poate apărea oricând când un element vizibil își schimbă poziția de la un cadru randat la altul.

Să încercăm să înțelegem sensul comun și să definim în cuvinte simple „Schimbarea aspectului cumulat”:

Cumulativ este o creștere a cantității.

Dispunerea este Cadrul

O schimbare este o schimbare de poziție

Mai simplu spus, Schimbarea aspectului cumulativ este o sumă totală a tuturor modificărilor individuale ale cadrului în pozițiile de proiectare a site-ului web.

Imagine provenită de la web.dev

Scorul standard CLS ar trebui să fie sub 0,1.

Un prag bun pentru a măsura același lucru este percentila 75 de încărcare a paginilor pe dispozitivele mobile și desktop.

În imaginea de mai sus, este clar că Conform Google:

1. Dacă scorul CLS este mai mic de 0,1, este un semnal bun. Înseamnă că site-ul dvs. nu are nicio problemă cu nicio schimbare a aspectului.

2. Dacă scorul CLS este între 0,1 și 0,25, înseamnă că site-ul dvs. are nevoie de o anumită îmbunătățire a aspectului vizual.

3. Dacă scorul CLS este mai mare de 0,25, este un semnal slab, ceea ce înseamnă și că mișcarea elementului vizual are loc foarte frecvent.

Cum se calculează deplasarea cumulativă a aspectului?

Google calculează CLS-ul unei pagini calculând fracția de impact și fracția de distanță pentru fiecare schimbare neașteptată a aspectului.

Fracția de impact a CLS

Măsoară spațiul pe care un element instabil o ocupă într-o zonă de vizualizare între două cadre.

Formula pentru calcularea fracțiunii de impact pentru CLS

Pentru a calcula scorul de schimbare a aspectului, avem nevoie de Fracția de impact.

Cum se calculează Fracția de impact pentru CLS?

Reprezentarea grafică vă va ajuta să înțelegeți mai bine fracțiile de impact.

 Fracția de impact = [Aria Regiunii de impact] / [Area de vizualizare] Fracția de impact = [330 x 490] / [375 x 667] Fracția de impact = [161700] / [250125] Fracția de impact = 0,645

Fracția de distanță a CLS

Este măsura cantității de spațiu pe care elementul de pagină a mutat-o ​​din poziția inițială în poziția finală care se schimbă practic în aspect.

Pentru a evita cazurile de penalizare excesivă, schimbați elementele mari cu o cantitate mică luată în considerare prin introducerea Fracției de distanță.

Formula pentru a calcula fracția de distanță pentru CLS

Cum se calculează fracția de distanță pentru CLS?

Reprezentarea grafică vă va ajuta să înțelegeți mai bine fracția de distanță.

Fracție distanță = [Max. Distanța de mutare] / [Înălțimea portului vizual] Fracția distanței = [120] / [667] Fracția distanței = 0,179

Formula pentru a calcula scorul Google CLS

Scorul cumulativ al aspectului este calculat prin înmulțirea fracțiunii de impact cu fracția de distanță:

 Schimbare cumulativă a planului (CLS) = Fracțiunea impactului x Fracția distanței

CLS = 0,645 x 0,179 CLS = 0,1154 .

Scorul CLS continuă să crească pe măsură ce impactul și fracțiunea de distanță crește.

Schimbarea aspectului cumulativ cu un exemplu simplu.

Ați vizitat un site și ați văzut ceva interesant de citit.

Continuați să faceți clic pe link.

Dar exact când erai pe cale să dai clic pe link, acesta se deplasează în jos în pagina web cu jumătate de inch și ajungi să dai clic pe un anunț care a fost plasat chiar deasupra acestuia.

Sursa:nitropack.io

Sună nedrept, nu?

Este o schimbare neașteptată a aspectului.

Înseamnă doar că veți fi redirecționat către o pagină de destinație nedorită de unde trebuie să reveniți la pagina web originală.

Avem și ceva cunoscut sub numele de schimbarea aspectului așteptat.

Se întâmplă când faceți clic pe ceva dintr-o pagină web și modifică aspectul curent al paginii.

De exemplu, mergi la un blog în căutarea unei anumite informații.

De îndată ce introduceți numele subiectului în bara de căutare, acesta va prelua o anumită postare de blog unde veți găsi informațiile necesare sau veți veni cu câteva postări de blog legate de subiect.

Sursa: nitropack.io

Acesta este un rezultat așteptat din pagina web și poate fi considerat o schimbare așteptată de aspect.

Ce cauzează problemele CLS?

Conform Google, gigantul motoarelor de căutare, există 5 motive posibile pentru schimbarea cumulată a aspectului :

Imagini și videoclipuri fără dimensiuni

Este recomandabil să specificați întotdeauna lățimea și înălțimea imaginilor și videoclipurilor dvs.

De asemenea, puteți utiliza casetele de raport de aspect CSS pentru a permite browserului să aloce spațiul potrivit pe pagina web în timp ce imaginea se încarcă.

Anunțuri, încorporare și cadre iframe fără dimensiuni

Dimensiunile anunțurilor pot crește veniturile prin CTR ridicat.

Cu toate acestea, acest lucru poate compromite calitatea experienței utilizatorului prin împingerea conținutului în jos pe pagină.

Această schimbare a aspectului poate fi atenuată prin rezervarea spațiului pentru spații publicitare, prin eliminarea schimbărilor prin rezervarea unei dimensiuni mai mari posibile pentru spațiul publicitar sau prin alegerea celei mai bune dimensiuni posibile a spațiului publicitar pe baza datelor istorice.

Conținut injectat dinamic

Evitați să inserați orice conținut nou deasupra conținutului existent, cu excepția cazului în care este ca răspuns la interacțiunea utilizatorului.

Acest lucru va asigura că orice schimbări de aspect care apar sunt întotdeauna așteptate, mai degrabă decât să declanșeze mutarea neașteptată a imaginii sau a textului.

Fonturi web care provoacă FOIT/FOUT

Încercați să utilizați font:valori de afișare cu fonturile dvs. personalizate, cum ar fi automat, swap, block, fallback și opțional, pentru a preveni schimbările inutile ale aspectului.

Pentru a fi sigur că nu există nicio schimbare de aspect, utilizați font:display împreună cu linkul rel=preload.

Orice element care folosește acel font va fi ascuns până când materialul fontului a fost descărcat complet, este cunoscut sub numele de FOIT (Flash of invisible text).

O sursă de animație: malthemilthers.com

Afișarea unui font alternativ în stiva de fonturi până la încărcarea celui personalizat este cunoscută sub numele de FOUT (Flash de text fără stil).

Acțiuni care așteaptă un răspuns în rețea înainte de a actualiza DOM

Alegeți întotdeauna animațiile „transformare” pentru animațiile proprietăților care declanșează modificări de aspect.

Cum este influențat scorul Google CLS prin anunțuri?

Pentru a face față reclamelor care provoacă CLS, trebuie să stilați elementul în care va apărea anunțul.

Prin urmare, dacă stilați div, divizarea imaginii sau video într-un WordPress sau orice element de site cu o anumită măsurare a înălțimii și lățimii, anunțul dvs. va fi constrâns numai în dimensiunile menționate.

Dacă un element care conține un anunț nu afișează anunțul, îl puteți seta astfel încât un anunț banner alternativ sau o imagine substituent să umple spațiul liber.

Ca alternativă, un anunț poate umple întregul rând din partea de sus a unei coloane din jgheabul din dreapta sau din stânga paginii pentru anumite aspecte.

Dacă pagina nu apare, nu va exista o schimbare și nu va face nicio diferență pe mobil sau desktop.

Cu toate acestea, ar trebui să rețineți că depinde de aspectul temei și va trebui să o testați dacă există o problemă cu inventarul publicitar.

Cum poate aluneca CLS în timpul dezvoltării web?

Google CLS poate trece prin etapa de dezvoltare.

Iată ce se poate întâmpla.

Multe dintre elementele necesare pentru a reda o pagină web sunt încărcate în memoria cache a browserului.

Data viitoare când un dezvoltator vizitează pagina în curs de dezvoltare, nu va observa o schimbare a aspectului, deoarece elementele paginii sunt deja descărcate.

De aceea se recomanda efectuarea unei masuratori in teren sau in laborator.

Test cumulativ de schimbare a aspectului

Valorile de performanță cumulativă privind schimbarea aspectului site-ului web pot fi măsurate în oricare dintre următoarele moduri:

Instrumente de câmp

În teren: pe utilizatori reali care interacționează efectiv cu pagina. Poate fi măsurat folosind următoarele instrumente de câmp:

Raport despre experiența utilizatorului Chrome

Oferă valori privind experiența utilizatorului pentru modul în care utilizatorii Chrome din lumea reală se confruntă cu destinațiile populare de pe web.

PageSpeed ​​Insights

Acest instrument analizează conținutul unei pagini web și generează sugestii pentru a face pagina respectivă mai rapid decât înainte.

Search Console (raportul Core Web Vitals)

Search Console arată performanța paginilor dvs. pe baza datelor de utilizare din lumea reală (uneori numite date de câmp).

Instrumente de laborator

În laborator: utilizarea instrumentelor pentru a simula încărcarea unei pagini într-un mediu controlat poate fi măsurată folosind următoarele instrumente de laborator:

Chrome DevTools

Chrome DevTools vă poate ajuta să editați pagini din mers și să diagnosticați rapid problemele, ceea ce vă permite în cele din urmă să creați mai rapid site-uri web mai bune.

Far

LightHouse este un instrument automat, open-source, pentru îmbunătățirea calității paginilor web.

Îl puteți rula pe orice pagină web, publică sau care necesită autentificare.

Are audituri pentru performanță, accesibilitate, aplicații web progresive, SEO și multe altele.

WebPageTest

Rulați un test gratuit de viteză a site-ului web de pe tot globul folosind browsere reale la viteze de conectare pentru consumatori, cu recomandări detaliate de optimizare.

Potrivit web.dev ; Atenție: instrumentele de laborator încarcă de obicei paginile într-un mediu sintetic și măsoară doar schimbările de aspect în timpul încărcării paginii.

Ca urmare, valorile CLS raportate de instrumentele de laborator pentru o anumită pagină pot fi mai mici decât ceea ce experimentează utilizatorii reali în domeniu.

Instrumente rapide pentru a verifica Schimbarea aspectului cumulativ

1. CLS în format GIF de la Defaced Tool de Chris Johnson pentru a identifica LS problematic.

2. Calculator cumulativ de schimbare a aspectului

Defect în calculele CLS

Google a primit feedback despre măsurarea CLS inadecvată pentru măsurarea paginilor web deschise de mult timp, penalizându-le cu scoruri mai mici.

Google a analizat trei soluții pentru actualizarea modului în care a obținut scorul CLS, așa că nu trebuie să vă faceți griji ca scorurile CLS să se înrăutățească din cauza acestei modificări.

Ferestre de sesiune pentru măsurarea CLS

Google a optat pentru o abordare a ferestrei de sesiune pentru a măsura CLS.

Măsurarea elementelor paginii este măsurată în ferestrele de sesiune, care corespunde diferitelor părți ale unei pagini web la care un utilizator ajunge în timp ce derulează în jos pe pagina web.

Scorurile totale pentru fiecare fereastră de sesiune reprezintă schimbarea de aspect cumulativ, deplasarea totală a întregii pagini.

3% dintre paginile web cu derulare infinită sau care au manipulatori de interfață cu utilizatorul care reacționează lenți la interacțiunea utilizatorului vor vedea scorurile lor crescând la o evaluare bună.

Actualizarea face scorurile CLS mai precise

Este un beneficiu pentru editori, deoarece noul sistem de notare devine mai echitabil, în special pentru paginile web care sunt deschise pentru o lungă perioadă de timp sau folosesc derulare infinită și au fost punctate incorect din această cauză.

Având în vedere că valorile Core Web Vitals sunt pe cale să devină un factor de clasare în mai 2021, este o schimbare importantă pentru a face ultimul minut.

Concluzie

Înțelegerea Cumulative Layout Shift (CLS) vă va ajuta să oferiți o experiență mai bună pentru utilizator în zilele următoare.

Deoarece metrica face parte din Core Web Vitals pentru a îmbunătăți UX și este programată să devină un semnal de clasare în 2021, este important să înțelegeți importanța și impactul acesteia asupra site-ului dvs.