Cumulative Layout Shift (CLS)

Què comprova aquesta auditoria

Llegeix el CLS de PageSpeed Insights. El CLS és una puntuació sense unitats: la suma acumulada de cada desplaçament inesperat del layout durant la càrrega de la pàgina, ponderada per la fracció del viewport que s’ha mogut i per quina distància.

Valor CLS	Veredicte
≤ 0,1	Bo
0,1–0,25	Cal millorar
> 0,25	Pobre

Per què importa

Una pàgina que salta és una pàgina frustrant. Cliques un botó, la pàgina es desplaça, cliques on no toca. Estàs llegint un paràgraf, es carrega un anunci, el paràgraf es mou. Els desplaçaments de layout són una de les mètriques amb més correlació amb la taxa de rebot.

El CLS és el tercer Core Web Vital al costat del LCP i l’INP. També és el més fàcil d’arreglar un cop has trobat els elements culpables: la major part del CLS prové d’un grapat de patrons concrets.

Com solucionar-ho

1. Reserva espai per a imatges i embeds. Sempre estableix els atributs width i height (o aspect-ratio en CSS):

<img src="/hero.webp" width="1200" height="600" alt="..." />

El navegador reserva la caixa abans que la imatge es carregui. Sense això, la imatge apareix i el text de sota baixa de cop.

2. Reserva espai per als anuncis. Si fas servir AdSense o similar, posa una alçada mínima al contenidor de l’anunci que coincideixi amb la mida d’anunci més habitual:

.ad-slot {
  min-height: 250px;
}

3. Evita webfonts que carreguen tard. Fes servir font-display: swap (el text es renderitza amb la font de reserva primer i fa el canvi quan arriba la webfont, CLS petit) o font-display: optional (sense canvi, millor CLS però pitjor branding). Auto-allotjar woff2 amb preload minimitza la finestra del canvi.

4. No insereixis contingut sobre contingut existent. Els banners de cookies, els pop-ups de “subscriu-te” i les notificacions de “tens un avís nou” que empenyen la pàgina cap avall garanteixen CLS. Posa’ls com a overlays (position: fixed).

5. Fes servir transforms de CSS per a les animacions, no top/left. transform: translateY() no provoca desplaçaments de layout. Animar top sí.

Preguntes freqüents

Com es puntua el CLS?

La puntuació és la pitjor finestra de 5 segons de desplaçaments durant la sessió de la pàgina, no la suma total. Google va actualitzar això el 2021 per evitar penalitzar les pàgines llargues de manera desproporcionada.

I els desplaçaments iniciats per l’usuari?

Els clics, tocs i enviaments de formularis que provoquen canvis de layout queden exclosos del CLS durant els 500 ms posteriors a la interacció. Així, desplegar un acordió no compta: només compten els desplaçaments “sorpresa”.

Per què el meu CLS es dispara a mòbil però no a escriptori?

Els viewports mòbils són més estrets, així que un desplaçament de N píxels és una fracció més gran de la pantalla. Mateixa causa arrel, penalització més gran. Sempre prova el perfil mòbil a PageSpeed.