Cum să îmbunătățești schimbarea cumulativă a aspectului (CLS) pentru WordPress

Majoritatea site-urilor web sunt create pentru a fi accesate de pe diferite dispozitive cu diferite dimensiuni și rezoluții ale ecranului. Astfel, menținerea aceleiași experiențe pe mai multe platforme poate fi dificilă. WordPress facilitează designul web pe mai multe platforme. Cu toate acestea, în orice formă de dezvoltare software, construirea unei soluții universale poate fi complicată.

În cazul dezvoltării web, utilizatorii care navighează de la o pagină la alta pe un site web pot experimenta uneori ceea ce este cunoscut sub numele de Cumulative Layout Shift (CLS). Este atunci când elementele vizuale ale unei pagini suferă o schimbare bruscă sau se încarcă incorect. Dintr-o dată, textul devine mai mare sau mai mic, imaginile își schimbă poziția sau întreaga pagină se modifică.

De ce se întâmplă acest lucru și cum îl putem remedia? În acest ghid, vom explora ce este CLS și cum îl puteți preveni pe site-ul dvs. web.

Ce este schimbarea cumulată a aspectului?

Cea mai comună formă perceptibilă de CLS este întârzierea în încărcarea imaginilor. Pe site-urile web complexe care sunt grele cu elemente vizuale, veți observa adesea că textul se încarcă înaintea elementelor media. În plus, aspectul paginii web se schimbă atunci când toate elementele vizuale sunt în sfârșit încărcate. Aceste incidente apar indiferent dacă derulați sau nu.

Când o pagină web are un scor CLS ridicat, este greu de determinat când s-a încărcat complet. Cu cât site-ul web este mai complicat și mai greu de media, cu atât este mai mare probabilitatea de schimbare a aspectului experienței.

De exemplu, paginile web simple ale unui motor de căutare cu foarte puține elemente vizuale au CLS puțin sau deloc. Cu toate acestea, acest lucru nu înseamnă că toate site-urile web complexe sau bogate în funcții au scoruri CLS ridicate. De exemplu, magazinul online Amazon este plin cu widget-uri, imagini și link-uri, dar se încarcă rapid, fără schimbări perceptibile.

Ce cauzează schimbarea cumulativă a aspectului?

CLS tinde să apară deoarece browserele web încarcă elemente secvenţial în momente diferite. În plus, este posibil să aveți elemente media pe site-ul dvs. cu proprietăți necunoscute (cum ar fi dimensiuni).

În cazurile în care nu specificați lățimea sau înălțimea unui element media (cum ar fi o imagine), browserul dvs. web nu va ști cât spațiu să aloce până când pagina web se încarcă complet. Prin urmare, schimbarea drastică a aspectului. În concluzie, motivul principal pentru majoritatea CLS este încărcarea ineficientă.

Este important să rețineți că, chiar dacă nu observați schimbarea aspectului în timp real, aceasta nu înseamnă neapărat că nu are loc nicio schimbare. Browserele web memorează adesea în cache datele site-ului web, astfel încât este mai ușor să încărcați paginile web atunci când le accesați din nou. Măsurarea scorului CLS este cea mai bună modalitate de a determina dacă site-ul dvs. web suferă o schimbare substanțială de aspect.

Cum să măsurați scorul CLS al site-ului dvs

Scorul CLS denotă numărul de schimbări de aspect pe care le experimentează o pagină web de-a lungul duratei sale de viață. Putem deriva scorul CLS din ceea ce este cunoscut ca o fereastră de sesiune. O fereastră de sesiune descrie numărul de schimbări de aspect care au loc într-un interval de cinci secunde. Pentru a calcula scorul CLS, trebuie să înmulțim fracția de distanță cu fracția de impact:

 Scorul CLS = Fracția de distanță x Fracția de impact

Fracția de impact descrie cât de mult afectează un element instabil aria perceptibilă dintre două cadre. Fracția de distanță descrie cantitatea pe care un element s-a deplasat între cadre. Un scor CLS de 0,10 și mai mic (0,0 – 0,10) este excelent. Un scor CLS peste 0,10, dar sub 0,25 (0,10 -0,25) este moderat și necesită îmbunătățiri, în timp ce un scor CLS peste 0,25 (0,25 <) este slab.

Aceste concepte pot fi puțin greu de înțeles. Din fericire, nu trebuie să calculați manual CLS-ul site-ului dvs. web. Există o mulțime de instrumente online (și offline) care pot calcula scorul CLS pentru dvs.

În prezent, cel mai popular mod de a măsura CLS-ul paginii dvs. web este prin intermediul PageSpeed ​​Insights de la Google. Vă permite să aflați statisticile despre experiența utilizatorului site-ului dvs., atât pentru iterațiile mobile, cât și pentru cele desktop.

Alte instrumente CLS includ:

• GT Metrix
• Google Web Vitals CLS Debugger
• Extensia Google Chrome Web Vitals
• Farul Google
• Testul paginii web

Deoarece PageSpeed ​​Insights de la Google este cel mai familiar, îl vom folosi pentru exemplul nostru.

Pentru a vă măsura scorul CLS, navigați la pagina de pornire PageSpeed ​​Insight, inserați adresa URL a paginii dvs. web în câmpul de text de sus, apoi faceți clic pe butonul Analizați . În funcție de popularitatea site-ului dvs. și de viteza internetului, PageSpeed ​​Insights ar trebui să vă furnizeze un raport în câteva secunde.

Pentru a găsi scorul CLS, derulați în jos la secțiunea Core Web Vitals Assessment.

Dacă folosim pagina de pornire a Amazon ca exemplu, mai mult ca sigur, vom găsi un scor CLS mai mic de 0,10. În timpul testării noastre, am constatat că site-ul mobil a avut un scor CLS de 0,01, în timp ce versiunea desktop a avut un scor de 0,05.

Dar cum o fac atunci când site-ul lor are atât de mult resurse? Să vedem cum poți avea și un scor CLS asemănător cu Amazon.

Cum să optimizați CLS

Cel mai bun mod de a vedea ce elemente cauzează scorul CLS ridicat este să utilizați depanatorul CLS Google Web Vitals. Vă arată un GIF cu toate funcțiile de schimbare de pe site-ul dvs. Reclamele și fișierele media sunt cele mai frecvente vinovate pentru scorurile CLS ridicate. Alte cauze pot include fonturi, CSS asincron, animații și Iframes. Pentru a vă îmbunătăți scorul CLS, va trebui să optimizați aceste elemente.

Asigurarea faptului că site-ul dvs. are un CLS respectabil este la fel de important ca să vă asigurați că are SEO local puternic și conținut relevant. Motorul de căutare Google tinde să acorde preferință site-urilor web care oferă o experiență excelentă pentru utilizator și sunt bine optimizate.

În acest scop, iată câțiva pași pentru a îmbunătăți scorul CLS al site-ului dvs.:

Adăugați proprietăți de dimensiune la toate fișierele media

Dacă încărcați fișiere media cu proprietăți necunoscute, va crește riscul de schimbare a aspectului, deoarece browserul dvs. web va trebui să descopere dimensiunea imaginii și să determine orientarea aspectului după încărcare. Aceste situații au șanse mai mari să apară pentru imagini și fișiere mari de înaltă rezoluție.

Prin încărcarea fișierelor media cu proprietăți de dimensiune lipsă, ați pus prea multă muncă în mâinile browserului web. Trebuie să adăugați proprietățile de înălțime și lățime pentru fiecare fișier media vizual pe care îl încărcați. Puteți face acest lucru vizualizând codul sursă și adăugând manual proprietățile de lățime și înălțime.

Asigurați-vă că fonturile sunt încărcate local

Textul trebuie să rămână vizibil în timpul încărcării fontului. Primul pas pentru a realiza acest lucru este să vă asigurați că fonturile sunt încărcate local în loc să fie extrase de pe site-uri web cu fonturi terțe.

Dacă descoperiți că fonturile dvs. sunt extrase de pe un site web terță parte, puteți utiliza un plugin precum OMGF pentru a le găzdui local și a le încărca mai repede. Acest lucru nu numai că vă va îmbunătăți scorul CLS, dar este și un pas către un design ecologic.

Evitați FOIT și FOUT

Flash de text invizibil (FOIT) apare atunci când nu reușiți să specificați un font alternativ. În timp ce browserul dvs. web încearcă să vă încarce fontul sau să găsească o alternativă, utilizatorilor li se va prezenta un spațiu gol unde ar trebui să fie text.

În timpul intermitentului textului fără stil (FOUT), vi se va prezenta fontul alternativ implicit al browserului web până când acesta poate încărca fontul specificat. Pentru a remedia acest lucru, puteți adăuga proprietatea font-display: swap .

Dacă ați descărcat vreodată fonturi de la Google, veți observa că adaugă această etichetă la sfârșitul fiecărei adrese URL. Cea mai simplă modalitate de a adăuga personal această proprietate este folosind pluginul Swap Google Fonts Display pe WP.

Cu toate acestea, rețineți că acest plugin funcționează numai pentru fonturile Google și adaugă automat proprietatea de schimbare a afișajului acelor adrese URL. Dacă găzduiți fonturi local, puteți utiliza pluginul String Locator pentru a găsi toate fișierele dvs. de font și a le modifica. Va trebui să deschideți foaia de stil pentru font în WP și să o modificați.

Alternativ, puteți utiliza pluginuri de stocare în cache, cum ar fi unul care va optimiza automat fonturile pentru dvs., adăugând proprietatea de schimbare a fonturilor.

Preîncărcați fonturi

Pentru a vă asigura că găzduiți fonturi local, vă puteți preîncărca fonturile cu un plugin precum:

• WP Rocket
• Sfaturi despre resurse pentru petrecere înainte*
• Permite

Dacă nu vă permiteți să utilizați aceste pluginuri, vă puteți preîncărca fonturile editând fișierul header.php. Asigurați-vă că vă testați bine site-ul după ce preîncărcați fonturile. Preîncărcarea prea multor fonturi poate dăuna site-ului dvs. Deci, ca și în cazul oricăror șanse majore de backend, vă sugerăm să faceți backup site-ului dvs. WordPress în prealabil.

Dezactivați optimizarea livrării CSS

Dacă utilizați WP Rocket pentru a optimiza livrarea CSS sau pentru a încărca CSS asincron cu LiteSpeed ​​Cache, este posibil să provoace un flash de conținut fără stil (FOUC). Dacă doriți să vă îmbunătățiți scorul CLS, vă recomandăm să dezactivați aceste opțiuni în pluginurile lor respective.

Alternativ, puteți seta ceea ce este cunoscut ca un CSS critic de rezervă. Aceasta implică generarea unui script de rezervă critic folosind un instrument precum Critical Path CSS Generator.

Eliminarea scripturilor de blocare a redării poate reduce, de asemenea, scorul dvs. CLS. Vă recomandăm să testați mai întâi CLS cu optimizarea livrării CSS activată, apoi să îl testați când îl aveți dezactivat pentru a compara.

Dezactivați animațiile

Dacă utilizați animații, vă recomandăm să le dezactivați pentru versiunea mobilă a site-ului dvs., deoarece animațiile pot împiedica timpul de încărcare a site-ului dvs. Dacă insistați să aveți animații pentru site-ul dvs., vă sugerăm să utilizați opțiunile de transformare și traducere CSS.

Alternativ, puteți utiliza pluginul Happy Addons Elementor. Acest lucru vă permite să animați elemente fără a provoca schimbări de aspect.

Cea mai bună modalitate de a elimina cea mai mare parte a schimbării aspectului este prin modificarea modului în care este încărcată pagina dvs. web. La rândul său, puteți crește viteza și eficiența site-ului dvs. WordPress. Ca întotdeauna, este vorba despre îmbunătățirea experienței utilizatorului. Cu cât site-ul dvs. este mai receptiv, cu atât este mai mare probabilitatea ca utilizatorii să-l marqueze și să-l revadă.