Cumulative Layout Shift (CLS) pe WordPress
Vă întrebați ce înseamnă Cumulative Layout Shift și care este impactul asupra performanței dvs. UX și SEO? Continuați să citiți! Veți afla ce este CLS, cum îl puteți testa și ce factori îi afectează scorul. Veți descoperi cum să evitați schimbările mari de aspect și să remediați un grad slab de pe mobil și desktop (Cumulative Layout Shift mai mult de 0,25 sau 0,1 s).
Înainte să citiți acest articol, trebuie să știți că site-ul pe care l-am testat aici aparține celor care au creat pluginul WP Rocket. Promovez acest plugin ca afiliat și vreau să demonstrez cât este de competitiv, atât pentru un Blog/Site, cât și pentru un Magazin Online în WooCommerce. Vă rog citiți până la sfârșit, vă garantez că veți învăța foarte multe despre site-ul dvs. și care sunt pașii de urmat în continuare pentru ca site-ul dvs. să urce în rezultatele motorului de căutare Google.
Ce este Cumulative Layout Shift (CLS) și De ce Contează?
Cumulative Layout Shift este o valoare Web Core Vital și măsoară cât de stabilă vizual este pagina. Stabilitatea vizuală este calculată de câte schimbări neașteptate de aspect apar fără a interacționa cu pagina. De fiecare dată când conținutul se schimbă – nu pentru că ați făcut clic pe un link și așa mai departe – contează ca o schimbare de aspect.
Suma tuturor acestor schimbări determină scorul Cumulative Layout Shift.
De câte ori ați citit un articol, iar conținutul a scăzut din cauza unor reclame noi? Sau, ați încercat vreodată să faceți clic pe un buton și ați ajuns să faceți clic pe un alt link, deoarece o nouă imagine mare a împins brusc conținutul în jos?
Toate aceste exemple sunt schimbări de aspect – sunt cauzate de faptul că unele elemente de pe pagină sunt instabile și își schimbă poziția pe pagină. Elementele își schimbă poziția din diferite motive. De exemplu, o nouă imagine sau un anunț care se încarcă deasupra paginii (în partea de sus a paginii) forțează un anumit conținut să coboare și să ocupe o altă secțiune a paginii.
Vă puteți imagina cât de enervantă este această experiență pentru utilizatori.
De aceea Cumulative Layout Shift este una dintre cele trei valori de bază Core Web Vitals care evaluează experiența utilizatorului unei pagini. Pe lângă Largest Contentful Paint și First Input Delay, CLS a fost lansat ca parte a factorului de clasificare a experienței de pagină ( Page Experience ranking ) în iunie 2021.
Cumulative Layout Shift reprezintă 15% din scorul PageSpeed și este o valoare foarte relevantă pentru experiența utilizatorului și noul factor de clasare. Prin urmare, ar putea afecta și performanța dvs. SEO.
Ce este un Scor Cumulative Layout Shift ( CLS ) Bun
După cum am explicat, Cumulative Layout Shift este suma tuturor schimbărilor de conținut neașteptate care apar pe pagină. În funcție de suma tuturor schimbărilor, nota dvs. CLS ar putea să promoveze sau nu evaluarea Google.
- Un scor CLS bun ar trebui să fie egal sau mai mic de 0,1.
- Un scor CLS între 0,1 și 0,25 înseamnă că performanța „are nevoie de îmbunătățiri”.
- Nota este „slabă” dacă CLS este mai mare de 0,25.
Cum se Găsește și se Măsoară Cumulative Layout Shift (CLS)
Există mai multe moduri de a măsura scorul CLS, atât din instrumentele de laborator, cât și din cele de date. Iată cele mai populare instrumente pe care le puteți utiliza:
- Lighthouse (numai date de laborator)
- PageSpeed Insights
- Chrome DevTools (numai date de laborator)
- Chrome User Experience Report (CrUX)
- Search Console – Raport Core Web Vitals
- WebPageTest (numai date de laborator)
- GTmetrix (numai date de laborator)
Să vedem cum PageSpeed Insights și Search Console vă pot ajuta să găsiți și să măsurați Cumulative Layout Shift.
Măsurarea și Găsirea Cumulative Layout Shift cu PageSpeed Insights
PageSpeed Insights este unul dintre cele mai bune instrumente pentru a măsura și a găsi Cumulative Layout Shift.
Instrumentul vă oferă scorul CLS din datele Lab and Field, astfel încât să puteți măsura atât datele controlate, cât și datele utilizatorului.
PageSpeed Insights vă arată elementele potențiale care provoacă o schimbare a aspectului.
Exemplul de mai jos arată un scor slab pentru CLS, atât pentru datele de câmp, cât și pentru cele de laborator:
Salt la zona de diagnosticare, puteți găsi ceea ce cauzează problema în secțiunea „Evitați schimbarea aspectului mare”.
În acest caz, există un singur element care afectează CLS. Este un text pre-formatat inclus în pagină pentru a explica cum se măsoară CLS în JavaScript:
După cum puteți vedea, PSI vă oferă scorul aferent fiecărui element, astfel încât să puteți înțelege cât contribuie fiecare element la scorul general Cumulative Layout Shift.
Dacă aveți mai multe elemente enumerate în această secțiune, ar trebui să începeți să le remediați pe cele care contribuie cel mai mult la nota slabă. Probabil că, rezolvând cele mai relevante probleme, veți obține un scor suficient de bun pentru a trece evaluarea Google.
Să presupunem că obțineți o notă de câmp proastă și una de laborator bună – da, s-ar putea întâmpla! În acest caz, ar trebui să vă asigurați că obțineți un scor bun pentru CLS și în Field Data. Rețineți că datele de teren sunt legate de experiența reală a utilizatorului. În ceea ce privește CLS, Lab Data ia în considerare doar schimbările de aspect în timpul încărcării paginii. Pe de altă parte, datele de câmp contează dacă toate schimbările de aspect pe parcursul întregii vizite, de la intrare până la închiderea paginii. Prin urmare, este mai reprezentativ pentru site-ul dvs. decât datele de laborator. Nu este o coincidență faptul că Google folosește câmpul Date pentru clasarea în căutări.
Măsurarea și Găsirea Cumulative Layout Shift (CLS) pe Search Console
Pe lângă măsurarea scorului Cumulative Layout Shift și găsirea elementelor care provoacă schimbări de aspect, ar trebui să analizați performanța la nivel de site.
Raportul Core Web Vitals din Search Console este cel mai bun mod de a găsi toate adresele URL afectate de aceeași problemă. De exemplu, în fila Detalii a raportului Mobile sau Desktop, puteți citi „Problema CLS: mai mult de 0,1 (mobil)”.
Dând clic pe rândul specific, veți găsi o listă de adrese URL care trebuie remediate din același motiv.
Odată ce ați rezolvat problema, va fi ușor să validați remedierea pentru toate paginile afectate de aceeași problemă.
Să înțelegem acum ce cauzează un scor CLS prost și cum îl puteți rezolva.
Ce Factori Afectează CLS și Cauzează un Scor Mic
Cei mai comuni factori ai unei note slabe Cumulative Layout Shift pe WordPress sunt:
- Imagini și videoclipuri fără dimensiuni
- Anunțuri, încorporări și iframe fără dimensiuni
- Fonturi Web care provoacă blițul de text nestilizat (FOUT) sau blițul de text invizibil (FOIT)
- Acțiuni care așteaptă un răspuns de rețea înainte de actualizarea DOM (în special pentru anunțuri)
- Conținut injectat dinamic (de exemplu, animații).
Rețineți că CLS are cel mai semnificativ impact asupra dispozitivelor mobile – cel mai critic și mai dificil dispozitiv pentru optimizarea performanței. Există mai multe motive, de la o fereastră de vizualizare mai mică la o rețea mobilă provocatoare și la o unitate centrală de procesare (CPU) mai slabă.
Imagini și Videoclipuri fără Dimensiuni
Imaginile și videoclipurile fără dimensiuni sunt o cauză obișnuită a schimbării aspectului.
Dacă nu specificați atributele de lățime și înălțime, browserul nu știe cât spațiu trebuie să aloce în timpul încărcării acestor elemente. Probabil, spațiul rezervat nu va fi suficient. Ca urmare, odată ce aceste elemente sunt încărcate complet, vor ocupa mai mult spațiu decât se aștepta – conținutul deja afișat se va schimba.
Puteți rezolva această problemă prin includerea dimensiunilor imaginii pe imagini și elemente video în moduri diferite. Vi le prezentăm în secțiunea dedicată!
Anunțuri, Încorporări și Iframe Fără Dimensiuni
Aceeași problemă de „dimensiune” este valabilă și pentru reclame, încorporări și iframe. Încă o dată, dacă nu rezervi suficient spațiu, aceste elemente dinamice împing în jos conținutul deja afișat. Prin urmare, noi schimbări de aspect vor apărea pe pagină.
Veți gestiona această problemă atribuind anunțurilor dimensiuni fixe și gestionând dimensiunea rezervată pentru astfel de elemente prin tactici specifice.
Fonturi Web care Cauzează Blițul Textului Nestilat (FOUT) sau Blițul Textului Invizibil (FOIT)
Fonturile web pot provoca schimbări de aspect, plus o experiență de utilizator destul de neplăcută în timpul redării paginii. Este vorba despre cât de lent se încarcă fonturile. S-ar putea să vă confruntați cu două probleme diferite: Flash de text nestilizat (FOUT) sau Flash de text invizibil (FOIT).
Pe de o parte, puteți vedea textul de pe pagină cu un stil „nu prea bun” (FOUT). Acest lucru se datorează faptului că fontul personalizat durează puțin pentru încărcare. Între timp, veți vedea fontul alternativ. Odată ce fontul personalizat este gata, acesta îl va înlocui pe cel alternativ. Apoi, veți vedea modificarea fontului pe pagină – iar conținutul se va schimba inevitabil.
Pe de altă parte, ați putea aștepta puțin înainte de a vedea afișat orice text. Acest lucru se datorează faptului că fontul personalizat este încă în curs de încărcare (FOIT). Veți vedea conținutul de pe pagină numai după ce fonturile personalizate au fost redate. Odată încărcat complet, conținutul respectiv poate provoca o schimbare a aspectului.
Principalul mod de a rezolva această problemă este pre-încărcarea fonturilor, așa cum veți citi puțin mai jos în acest articol.
Acțiuni în așteptarea unui răspuns de rețea înainte de actualizarea DOM și a conținutului injectat pe pagină. Animațiile și conținutul dinamic injectat pe pagină – cum ar fi bannere, reclame sau fluxuri Instagram – pot provoca o schimbare a aspectului. Încă o dată, se datorează faptului că nu există suficient spațiu rezervat pentru astfel de elemente.
În acest moment, știți cât de esențial este să alocați spațiu pentru elementele care atrag utilizatorii și nu ar trebui să distrugă experiența utilizatorului.
Să vedem cum să rezolvăm aceste probleme.
Cum se Remediază Cumulative Layout Shift Mai Mare de 0,25 s sau 0,1 s pe Mobil și Desktop
Dacă doriți să evitați schimbările mari de aspect pe site-ul dvs. WordPress, iată cum puteți reduce un scor slab Cumulative Layout Shift (cu și fără pluginuri):
- Includeți Atribute de Lățime și Înălțime pentru Imagini și Elemente Video
- Pre-încărcați Fonturile (și optimizați-le)
- Gestionați Spațiul și Dimensiunea pentru Spațiile Publicitare
- Gestionați Spațiul pentru Încorporări și Iframe
- Gestionați Conținutul Dinamic
- Preferă Proprietatea CSS Transform pentru Animații
Trecând peste fiecare punct, veți înțelege cum să remediați starea Search Console: problema CLS: mai mult de 0,25 s sau problema CLS: mai mult de 0,1 s, atât de pe mobil, cât și/sau de pe desktop.
Pentru fiecare dintre recomandările noastre, veți găsi o informație despre impactul său asupra performanței – de la scăzut la ridicat. Cu cât impactul este mai mare, cu atât sunt mai mari șansele ca nota Cumulative Layout Shift să se îmbunătățească după respectarea acelei recomandări specifice.
Unele dintre cele mai bune practici pentru evitarea schimbărilor mari de aspect nu includ o soluție specifică – sunt mai multe despre gestionarea spațiului pentru reclame și alte elemente cruciale.
1.Includeți Atribute de Lățime și Înălțime pentru Imagini și Elemente Video
Impactul Performanței: Ridicat
Una dintre cele mai simple modalități de a remedia CLS este de a include atributele de lățime și înălțime pe imaginile și elementele video în CMS-ul dvs. WordPress:
WordPress adaugă dimensiunile imaginii în mod implicit. Deci, această acțiune ar trebui rezolvată automat.
În cazul în care vă confruntați cu o problemă, rețineți că WP Rocket include automat toate valorile lipsă „lățime” și „înălțime” pentru imagini.
Trebuie doar să selectați opțiunea „Adăugați dimensiunile imaginii lipsă” în fila Media. Rapid și mai simplu ca asta nu se poate 😊!
O altă modalitate de a rezolva această problemă este să profitați de casetele de raport CSS și să permiteți browserelor să stabilească raportul implicit al imaginilor.
Pur și simplu, ar trebui să includeți lățimea sau atributul înălțime și să setați raportul de aspect folosind CSS. Browserul va afla atributul lipsă și va obține dimensiunile imaginii înainte de a reda pagina. Procedând astfel, va aloca spațiul necesar în timp ce imaginea se încarcă. Drept urmare, conținutul nu se va deplasa, iar schimbările de aspect vor fi evitate.
Este util să aveți în vedere informațiile utile, deoarece multe plugin-uri, cum ar fi cele video încorporate pe YouTube, folosesc raportul de aspect la ieșire.
Nu uitați de imaginile receptive! Puteți utiliza atributul srcset:
<img width="1000" height="1000" src="puppy-1000.jpg" srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w" alt="Puppy with balloons" />
Datorită srcset, browserul poate alege între un set de imagini și dimensiuni conexe. Rețineți că imaginile ar trebui să utilizeze același raport de aspect pentru a seta dimensiunea imaginii.
Incluzând imagini cu dimensiuni, veți difuza imagini cu dimensiuni corecte și veți aborda oportunitatea PageSpeed Insights.
2.Preîncărcați Fonturile (și Optimizați-le)
Impactul Performanței: Scăzut (mare numai dacă site-ul a avut un text mare)
După cum am explicat, dacă fonturile web nu se încarcă rapid, acestea provoacă o experiență teribilă a utilizatorului și afectează gradul Cumulative Layout Shift.
Ca o bună practică pentru evitarea schimbărilor de aspect, ar trebui să preîncărcați fonturile.
Prin pre-încărcarea fonturilor, veți spune browserului să încarce fonturile ca una dintre resursele cu prioritate maximă. Când redați pagina, browserul va încărca fonturile cât mai repede posibil. În consecință, browserul va include probabil fonturile în first meaningful paint – atunci când conținutul principal al paginii este complet încărcat și afișat. În acest caz, nu va avea loc nicio schimbare de aspect.
Puteți adăuga rel = preload la fonturile web cheie:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Știați că puteți pre-încărca cu ușurință fonturile cu WP Rocket? În fila dedicată, trebuie să includeți doar adresele URL ale fișierelor de fonturi care trebuie preîncărcate:
Rețineți că este util să activați această opțiune WP Rocket numai dacă nu ați activat funcția Eliminare CSS Neutilizate din (fila Optimizare fișier). Dacă RUCSS este activat, nu este necesar să activați opțiunea Preîncărcare fonturi.
Prin pre-încărcarea fonturilor, veți aborda recomandarea PageSpeed Insight „Asigurați-vă că textul rămâne vizibil în timpul încărcării Webfont”.
Există mai multe lucruri de făcut până la acest punct. Pentru a preveni orice problemă FOIT și FOUT, ar trebui să combinați rel = preload (sau funcția WP Rocket activată) cu afișarea fontului liniei CSS: opțional.
Descriptorul de afișare a fontului CSS determină modul în care fișierele de fonturi sunt descărcate și afișate de browser.
Cu font-display: opțional, browserul va descărca în cache fișierele fontului pentru a le face disponibile imediat pentru redare. Deci, chiar dacă afișarea fontului are mai multe valori, opțională este cea pe care ar trebui să o utilizați.
Un alt sfat util pentru a reduce problema FOUT este să adăugați afișajul: swap; lipsă în proprietățile de afișare a fontului. WP Rocket vă poate ajuta să faceți acest lucru dacă reduceți/combinați fișiere CSS.
Există și alte modalități de a încărca mai rapid fonturile:
Convertiți pictograma fontului în SVG. Pictogramele de fonturi durează ceva timp pentru a se încărca și nu ajută la accesibilitate. Nu există niciun motiv să le folosești. Folosind SVG-uri, fontul se va reda mai repede și veți încărca exact fonturile de care aveți nevoie.
Faceți disponibile mai multe formate de fonturi. Procedând astfel, browserele vor alege formatul compatibil și vor încărca numai fontul acestuia. Iată câteva informații despre formatele de fonturi pe care le-ați putea găsi utile:
- Evitați TTF. De obicei, este cu 10 – 20% mai greu decât WOFF.
- Utilizați SVG pentru Safari. De obicei, este puțin mai mic decât WOFF.
- Folosiți WOFF2 pentru browserele moderne. Este cea mai mică dimensiune – cu aproximativ 30% mai mică decât WOFF și SVG.
- Implementați WOFF ca alternativă atunci când SVG sau WOFF2 nu pot fi utilizate.
Găzduiește-ți fonturile local sau folosește un CDN pentru a le memora în cache. Veți evita orice întârziere și veți livra fonturile mai repede.
Optimizați-vă fonturile pentru a le face cât mai mici și mai rapide posibil. În ceea ce privește Google Fonts, știați că WP Rocket se ocupă automat de ele?
Prin aplicarea acestor recomandări, vă veți optimiza fonturile și veți evita mai multe schimbări de aspect. Veți aborda recomandarea PSI: „Asigurați-vă că textul rămâne vizibil în timpul încărcării fontului web” pe site-ul dvs. WordPress.
3.Gestionați Spațiul și Dimensiunea pentru Spațiile Publicitare
Impactul Performanței: Ridicat
Există câteva bune practici pentru a evita orice schimbare a aspectului pentru reclame:
- Alocați dimensiuni fixe anunțurilor, astfel încât să rezervați suficient spațiu pentru încărcarea anunțurilor.
- Rezervați cel mai mare spațiu posibil pentru reclame. Datele istorice sunt utile pentru a evalua care este cea mai bună dimensiune pentru fiecare spațiu publicitar.
- Păstrați fiecare spațiu rezervat pentru reclame care nu au fost afișate. Cu alte cuvinte, nu ar trebui să restrângeți nicio zonă din fereastra de vizualizare. Ați putea prefera să includeți un substituent sau un element de rezervă.
- Plasați anunțuri lipicioase în mijlocul paginii – oricum, departe de partea de sus a ferestrei.
Funcția de întârziere a executării JavaScript furnizată de WP Rocket vă poate ajuta să controlați conținutul dinamic deasupra paginii, cum ar fi Google Ads. Funcția poate fi utilizată pentru a opri interacțiunea dinamică, injecția de conținut (anunțuri) și modificările dinamice de clasă până când apare o interacțiune pe pagină.
Încă o dată, veți aborda recomandarea PSI „Serviți imagini cu dimensiuni corecte”. Același lucru este valabil și pentru următoarea secțiune.
4.Gestionați Spațiul pentru Încorporări și Iframe
Impactul Performanței: Ridicat
Recomandările pentru gestionarea încorporărilor și iframe-urilor sunt similare cu cele pentru anunțuri.
În special, ar trebui să calculați suficient spațiu pentru astfel de elemente. Din nou, datele istorice pot fi utile pentru a înțelege cât spațiu ar trebui să rezervați.
Substituent sau rezervă este o soluție excelentă pentru a gestiona dimensiunea necunoscută a încorporării.
5.Gestionați Conținutul Dinamic
Impactul Performanței: Ridicat
Conținutul dinamic, cum ar fi bannere, poate afecta și Cumulative Layout Shift. De aceea, ar trebui să evitați afișarea de conținut nou, cu excepția cazului în care este declanșat de interacțiunea utilizatorului. După cum știți, pentru CLS contează doar schimbările de aspect care au avut loc atunci când utilizatorii nu interacționează cu pagina.
Așa cum se explică în secțiunea „Gestionați spațiul și dimensiunea pentru spațiile publicitare”, puteți profita de opțiunea Întârziere executare JavaScript oferită de WP Rocket pentru a controla conținutul dinamic deasupra pliantei.
Prin gestionarea conținutului dinamic, veți avea grijă de următoarele recomandări PageSpeed:
- Evitați schimbările mari de aspect
- Evită sarcinile utile enorme ale rețelei.
6.Preferă CSS Transform Property pentru Animații
Impactul Performanței: Scăzut
Ultima cea mai bună practică pentru a asigura stabilitatea vizuală este de a avea grijă de animații. Puteți utiliza proprietatea CSS: transform, care nu declanșează modificări de aspect.
Veți aborda recomandarea PageSpeed „Evitați animațiile necompuse”.
Începeți Optimizarea Scorului dvs. Cumulative Layout Shift (CLS) pe WordPress Astăzi
Cumulative Layout Shift poate afecta extrem de mult experiența utilizatorului. Sperăm că acum știți cum să vă ocupați de schimbările de aspect și să îmbunătățiți scorul CLS al site-ului dvs. WordPress.
Nu sunteți încă client WP Rocket? Economisiți timp și lăsați WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a îmbunătăți scorul CLS și de a remedia cele mai critice probleme.
Nici măcar nu trebuie să setați ceva! WP Rocket va aplica automat 80% din cele mai bune practici de performanță web. Veți vedea o îmbunătățire instantanee cu ochiul liber în scorurile dvs. Core Web Vitals imediat.
În plus, veți renunța la mai multe pluginuri de performanță web. Veți avea nevoie doar de WP Rocket pentru a vă crește scorul CLS – nu sunt necesare cunoștințe tehnice, garantat!
Recomandarea autorului:
- Cum să Reduceți Total Blocking Time (TBT) pe Site-ul dvs. WordPress
- Cum se Reduce Time to First Byte (TTFB) și Timpul de Răspuns al Serverului
- Cum să Îmbunătățiți First Input Delay (FID) pe WordPress
- Cum se Îmbunătățește Largest Contentful Paint (LCP) pe WordPress
- Core Web Vitals și SEO – Sfaturi și Cele Mai Bune Practici pentru Site-ul dvs. WordPress
- Google Core Web Vitals pentru WordPress – Cum Testăm și Îmbunătățim
