CLS (Cumulative Layout Shift)
CLS măsoară cantitatea totală de deplasări neașteptate de layout care apar pe durata întregii vieți a unei pagini, cuantificând cât de mult se mișcă conținutul vizibil în mod neașteptat.
Cumulative Layout Shift (CLS) este un Core Web Vital care măsoară stabilitatea vizuală. Cuantifică cât de mult se deplasează neașteptat conținutul unei pagini în timpul încărcării. O deplasare de layout apare atunci când un element vizibil își schimbă poziția de la un cadru redat la următorul, fără interacțiunea utilizatorului.
Cauzele frecvente ale deplasării layout-ului includ imaginile și videoclipurile fără dimensiuni (browserul nu știe cât spațiu să rezerve până când acestea se încarcă), reclamele sau elementele încorporate care se încarcă dinamic și împing conținutul în jos, fonturile web care determină redimensionarea textului la încărcare (Flash of Unstyled Text) și conținutul injectat dinamic deasupra conținutului existent.
În practică
- Un site de știri și-a redus CLS de la 0,42 la 0,05 prin rezervarea spațiului pentru reclame și adăugarea dimensiunilor la toate imaginile, rezultând sesiuni de citire cu 30% mai lungi în medie
- An e-commerce product page had a CLS of 0.35 because customer review stars loaded late and pushed the "Add to Cart" button down, causing misclicks; fixing this improved the add-to-cart rate by 8%
- Un blog a rezolvat problema CLS cauzată de încărcarea tardivă a fonturilor web prin preîncărcarea fișierului de font și folosirea font-display: optional, eliminând complet deplasările de layout ale textului
- O pagină de destinație a rezervat dimensiuni fixe pentru un video încorporat care cauza saltul conținutului de dedesubt, aducând CLS de la 0,28 la 0,02
Nu sunteți sigur cum se aplică în cazul dumneavoastră?
Un inginer senior parcurge site-ul dumneavoastră, prezența în căutări și felul în care ajung la dumneavoastră solicitările, apoi notează primele trei lucruri care merită reparate. Păstrați documentul în orice caz.