CLS mesura moviment inesperat després que el contingut ja és visible, així que el diagnòstic útil és identificar quin element s’ha mogut i quina informació tardana n’ha canviat la geometria. Imatges, fonts, banners i embeds fallen per motius diferents encara que la mètrica sigui la mateixa.
Captura l’origen del layout shift
Usa les eines de layout shift o una gravació per identificar l’element que es mou i el que provoca el moviment. La víctima visible no sempre és la causa.
Reserva dimensions per als mitjans
Imatges, vídeo, anuncis i embeds necessiten aspect ratio o espai mínim estable abans de carregar. El responsive ha de canviar dimensions de manera previsible, no després del load.
Revisa canvis mètrics de fonts
Una webfont tardana pot redimensionar text i moure contingut. Compara mètriques de fallback/final, line-height i `font-display` en lloc de pre-carregar totes les fonts.
Tracta banners i consentiment com a layout
Cookie banners, promos i personalització s’han de superposar de manera intencional o tenir espai reservat. Inserir-los a dalt després de carregar crea desplaçaments evitables.
Vigila components renderitzats pel client
Carrusels, reviews, relacionats i widgets canvien alçada després d’API. Dona’ls geometria estable o un placeholder realista.
Valida breakpoints i estats
Prova login/logout, estats de consentiment i viewports habituals. Un test desktop pot perdre shifts mòbils per wrapping, sticky UI o ràtios diferents.
Per a mitjans pesats combina-ho amb la substitució segura d’imatges; si afecta la hero, revisa també el seu comportament d’LCP.