Entres en una web d'empresa, comences a llegir el titular i, de cop, el text «salta» cap avall perquè apareix un banner de cookies o una imatge sense dimensions reservades. Aquesta inestabilitat no és un detall estètic: la mesura CLS (Cumulative Layout Shift), un dels Core Web Vitals que Google segueix utilitzant com senyal d'experiència el 2026.
Aquest article explica què compta CLS, quins llindars vigilar, com es relaciona amb LCP i INP, i quins canvis concrets solen estabilitzar una web corporativa sense renunciar al disseny.
Què és CLS i quins moviments penalitza
CLS resume quant es mouen elements visibles sense que l'usuari interactuï. Cada desplaçament inesperat suma puntuació; la mètrica final és la suma de les pitjors «finestres de sessió» durant la visita.
Sovint es dispara per:
- Imatges o vídeos sense
widthiheight(o ratio reservat amb CSS). - Fonts web que canvien la mida del text en carregar (FOUT/FOIT).
- Banners, avisos legals o barres de cookies que s'insereixen sobre el contingut.
- Anuncis o widgets de tercers que reserven espai tard.
- Contingut injectat per JavaScript després del primer pintat.
La documentació de web.dev sobre CLS detalla quins desplaçaments entren al càlcul i quins queden fora (per exemple, després d'una interacció de l'usuari).
Llindars: quan la web està estable
Com referència habitual de Core Web Vitals:
- Bon: 0,1 o menys.
- A millorar: entre 0,1 i 0,25.
- Dolent: per sobre de 0,25.
Evalua el percentil 75 d'usuaris reals (Search Console, CrUX o Analytics amb Web Vitals). Un test de laboratori a PageSpeed ajuda a localitzar l'element que salta, però no substitueix dades de camp si el trànsit és estable.
CLS davant LCP i INP
Core Web Vitals cobren càrrega percebuda (LCP), estabilitat (CLS) i resposta a interaccions (INP). Una home pot pintar l'hero ràpid i encara frustrar si el menú sticky empenta el contingut o si el formulari de contact «balla» en carregar una font.
Prioritza CLS quan escoltes «la pàgina es mou sola», quan els informes assenyalen imatges sense mida, o quan després de publicar una campanya nous scripts empitjoren l'experiència en mòbil.
Causes habituals en webs d'empresa
- Hero o galeria sense dimensions en plantilles del CMS.
- Banner de cookies o avís RGPD que ocupa espai després del primer render.
- Icones o fonts externes que canvien l'altura de botons i menús.
- Embeds de vídeo o mapes sense contenidor amb aspect-ratio fix.
- Personalització amb etiquetes que injecten HTML al
<head>o a l'inici del body.
Els formats WebP i AVIF redueixen pes, però no substitueixen reservar espai: una imatge lleugera sense mida segueix provocant CLS.
Com mesurar CLS amb eines accessibles
- PageSpeed Insights: llista desplaçaments de layout en laboratori.
- Chrome DevTools → Performance: esdeveniments «Layout Shift» a la línia de temps.
- Search Console (Experiència de pàgina): tendència CLS per URL en dades reals.
- Extensió Web Vitals o RUM: útil per comparar abans i després en home, contacte i landings de campanya.
Grava la sessió en mòbil amb xarxa limitada: molts salts apareixen només quan el banner legal o el xat carreguen uns segons després de l'hero.
Accions que solen reduir CLS
Reservar espai en imatges i vídeos
Inclou width i height en HTML o usa aspect-ratio en CSS. Evita el lazy loading mal aplicat a l'hero: el problema no és només LCP, també el forat buit que després es omple.
Estabilitzar tipografies
Usa font-display: swap o mètriques de fallback (size-adjust) perquè el text no canviï d'altura en carregar la font corporativa. Precarrega només les variants que realment usa la home.
Cookies, avisos i barres fixes
Reserva altura mínima amb un placeholder o mostra el banner en una capa que no empenti el contingut principal (overlay o barra inferior). Planifica l'avís legal en el disseny, no com a pegat posterior al desenvolviment.
Controlar scripts i widgets
Retarda xat, mapes i etiquetes de màrqueting amb la mateixa disciplina que en scripts de tercers. Si un widget necessita espai, declara'l al layout abans que el script respongui.
Contingut dinàmic i llistats
En blog o catàleg, usa skeletons amb l'altura aproximada del bloc final. La paginació i els filtres AJAX han de mantenir fixa la zona de resultats per no moure el peu de pàgina.
Errors que empitjoren CLS sense que ho notis
- Inserir Google Fonts sense estratègia de fallback i sense reservar línia base.
- Carregar un slider que canvia l'altura del bloc hero entre slides.
- Mostrar preus o estoc via API sense contenidor d'altura mínima.
- Afegir una «top bar» de promoció en campanya sense actualitzar el CSS global.
Checklist abans de donar per tancada una millora
- PageSpeed o DevTools assenyalen el mateix element en escriptori i mòbil?
- Has comparat el percentil 75 a Search Console després de dues setmanes?
- LCP i INP segueixen en verd a les mateixes URLs crítiques?
- Has provat la ruta amb banner de cookies acceptat i rebutjat?
Conclusió
CLS respon a una pregunta directa: «Puc llegir i prémer sense que la pàgina em mogui el contingut?». El 2026, amb més components de tercers i landings de campanya, ignorar-lo és regalar microfrustracions a qui ja ha arribat des de cerca o anunci. Mesura a les URLs crítiques, reserva espai per imatges, fonts i avisos legals, i alinea màrqueting i desenvolviment amb el mateix rigor que dediques al copy de l'hero.
Si vols prioritzar Core Web Vitals amb impacte mesurable en conversió, a AATSOFT auditem home i landings clau i proposem canvis acotats al teu stack actual.
