CLS
El Cumulative Layout Shift (CLS) mesura fins a quin punt va “ballant” el disseny d’una pàgina mentre es carrega. Imaginem que en un restaurant et porten el plat i, de sobte, el cambrer et canvia el lloc de la taula mentre estàs a punt de començar a menjar. És incòmode, oi?
A internet passa una cosa semblant: quan els elements (text, imatges, botons…) van canviant de lloc mentre la pàgina carrega, l’usuari pot picar sense voler en un botó equivocat o perdre el fil. Si el CLS és alt, vol dir que el disseny “salta” massa i empitjora l’experiència de qui visita el web.
Un CLS elevat s’acostuma a produir quan els elements de la pàgina es mouen inesperadament mentre es carrega o mentre l’usuari ja està mirant el contingut. Algunes causes típiques són:
- Imatges sense mides definides: Si no es reserven l’espai adequat (amplada i alçària) abans de carregar-les, la resta del contingut es desplaça quan finalment l‘imatge apareix.
- Bàners i anuncis dinàmics: Quan un bàner publicitari o un element promocional s’afegeix de cop, pot desplaçar el text o els botons que hi havia al seu lloc.
- Fonts externes o canvis de tipografia: Si la lletra canvia de mida un cop carregada una font externa, pot fer que el text i els altres elements de la pàgina es moguin per ajustar-se al nou espai.
- Inserció tardana d’elements: Afegir contingut (com botons de xarxes socials o vídeos embeguts) quan la pàgina ja està carregant també pot provocar salts en el disseny.
En resum, qualsevol element que aparegui o canviï de mida sense reservar abans l’espai necessari pot incrementar el CLS i fer que la pàgina es vegi “inestable”.