Has entrat a un web, has començat a llegir un article i just quan anaves a prémer un enllaç, el contingut s’ha desplaçat cap avall i has premut un anunci. Això és un layout shift. Quan aquest desplaçament s’acumula durant la càrrega de la pàgina, tens un problema de CLS: Google el mesura, el registra i l’usa com a senyal de qualitat.
El CLS (Cumulative Layout Shift) és probablement la mètrica de Core Web Vitals més fàcil d’entendre i la més molesta per als usuaris. A diferència del LCP o l’INP, que mesuren temps de càrrega i interacció, el CLS mesura estabilitat visual. I un lloc ràpid amb contingut que salta és pitjor experiència que un lloc lent però estable.
Què és el CLS i per què Google el penalitza
El CLS quantifica els desplaçaments inesperats d’elements visibles durant la vida de la pàgina. No mesura tots els moviments, només els que l’usuari no ha provocat. Si prems un botó i el contingut s’expandeix, això no compta. Si una imatge carrega tard i empeny el text cap avall, això sí.
Google estableix tres llindars per al CLS en el percentil 75 de dades de camp:
- Bo: 0,1 o inferior.
- Necessita millores: entre 0,1 i 0,25.
- Deficient: superior a 0,25.
El CLS forma part del conjunt de Core Web Vitals juntament amb el LCP i l’INP. Un CLS alt no només afecta el posicionament; afecta directament l’experiència d’usuari, la taxa de rebot i la percepció de professionalitat del teu lloc.
La fórmula del CLS combina dos factors: la fracció del viewport que ha estat afectada pel desplaçament (impact fraction) i la distància que s’ha desplaçat l’element (distance fraction). Un element gran que es mou molt genera més CLS que un element petit que es desplaça lleugerament.
Com mesurar el CLS: eines i què reporten
Hi ha eines de laboratori (simulen la càrrega en condicions controlades) i de camp (dades d’usuaris reals). Per al CLS, les dades de camp són més fiables perquè capturen desplaçaments que ocorren després de la càrrega inicial, durant la interacció de l’usuari.
PageSpeed Insights mostra tots dos tipus de dades. Les dades de camp provenen del Chrome UX Report (CrUX) i representen l’experiència real dels usuaris que visiten el teu lloc amb Chrome. Les dades de laboratori provenen de Lighthouse i simulen una càrrega en condicions específiques.
Chrome DevTools — pestanya Performance. Grava la càrrega de la pàgina i busca els blocs marcats com “Layout Shift” a la línia temporal. Cada bloc mostra quins elements s’han desplaçat, quant CLS han aportat i en quin moment de la càrrega ha ocorregut.
Layout Shift Regions a DevTools. Activa aquesta opció des del menú de Rendering a DevTools. Cada vegada que un element canvia de posició, es ressalta visualment amb una vora blava. És la forma més intuïtiva d’identificar què causa CLS en temps real.
Google Search Console — informe de Core Web Vitals. Agrupa les teves URLs per rendiment de CLS i mostra tendències històriques. No identifica l’element específic, però assenyala quines plantilles de pàgina o seccions del lloc tenen problemes.
Web Vitals Extension. Mostra el CLS acumulat en temps real mentre navegues pel teu lloc. Útil per detectar layout shifts que ocorren durant la interacció, no només durant la càrrega.
Les causes més freqüents de CLS alt
Imatges i vídeos sense dimensions
Quan una imatge no té atributs width i height definits, el navegador no sap quant espai reservar fins que la descarrega. Mentrestant, renderitza la resta del contingut. Quan la imatge finalment carrega, empeny tot el contingut inferior cap avall. Segons dades del HTTP Archive, aquesta és la causa més freqüent de CLS, afectant el 63% dels webs amb puntuació alta.
Anuncis i banners dinàmics
Els espais publicitaris que s’omplen amb JavaScript després de la càrrega inicial són culpables freqüents. Un banner de Google Ads que apareix entre el títol i el primer paràgraf empeny tot el contingut visible i genera un layout shift significatiu.
Fonts web amb FOUT
El Flash of Unstyled Text ocorre quan el navegador mostra text amb una font de sistema i després la reemplaça per la font personalitzada quan acaba de descarregar-la. Si les mètriques de totes dues fonts són diferents (height, width, spacing), el canvi de font provoca desplaçaments en els blocs de text.
Contingut injectat dinàmicament
Banners de cookies, barres de notificació, pop-ups de butlletí i qualsevol element que s’insereixi al DOM després del renderitzat inicial pot causar CLS si desplaça contingut existent. Això és especialment problemàtic quan l’element s’insereix a la part superior de la pàgina.
Iframes sense dimensions
Els iframes (com els embeds de YouTube o els mapes de Google) sense dimensions explícites es comporten igual que les imatges sense dimensions: el navegador no sap quant espai reservar fins que el contingut de l’iframe carrega.
Com corregir el CLS causat per imatges sense dimensions
La solució fonamental és reservar espai per a cada imatge abans que es descarregui. Hi ha tres maneres de fer-ho:
Atributs width i height a l’HTML. La forma més directa. Defineix els atributs directament a l’etiqueta <img>. Els navegadors moderns calculen el aspect ratio a partir d’aquests atributs i reserven l’espai corresponent, fins i tot si el CSS modifica la mida final amb width: 100%.
CSS aspect-ratio. La propietat aspect-ratio és la solució moderna per reservar espai. Aplica aspect-ratio: 16/9 (o la proporció que correspongui) al contenidor o directament a la imatge. El navegador reserva l’espai abans de descarregar el recurs.
Contenidors amb padding-top (legacy). Abans d’aspect-ratio, la tècnica estàndard era usar un contenidor amb padding-top percentual (padding-top: 56.25% per a 16:9). Funciona però és menys llegible que aspect-ratio. Si el teu projecte necessita compatibilitat amb navegadors antics, aquesta tècnica continua sent vàlida.
Per a cada tipus d’imatge al teu lloc, la regla és la mateixa: el navegador ha de conèixer les dimensions abans d’iniciar la descàrrega. Això s’aplica a imatges hero, thumbnails, avatars, icones SVG amb mida variable i qualsevol recurs visual que ocupi espai en el disseny.
Mantenir el LCP sota control i el CLS dins de llindars saludables són objectius complementaris: optimitzar imatges amb dimensions explícites i formats moderns millora totes dues mètriques simultàniament.
Com corregir el CLS causat per anuncis i banners
Els anuncis són el cas més difícil perquè no controles el contingut que es carrega, però sí que controles l’espai que se li reserva.
Contenidors amb dimensions fixes. Defineix un <div> amb les dimensions exactes del format publicitari abans que l’script d’anuncis l’ompli. Per a un banner de 728x90, el contenidor ha de tenir min-height: 90px i width: 728px (o l’equivalent responsiu). L’espai existeix des del primer renderitzat i l’anunci es carrega dins sense desplaçar res.
Posició fixed o sticky per a anuncis adhesius. Els anuncis que han de romandre visibles durant el scroll (headers adhesius, footers adhesius) han d’usar position: sticky o position: fixed. Aquests posicionaments treuen l’element del flux del document i no causen layout shifts quan apareixen o desapareixen.
Evitar la inserció d’anuncis above-the-fold. Si l’anunci carrega amb retard i s’insereix entre contingut visible, el CLS serà alt. Col·loca els anuncis en posicions que no desplacin contingut crític o assegura’t que l’espai estigui reservat des de l’HTML estàtic.
Marcador de posició visual. Mentre l’anunci carrega, mostra un marcador amb un fons gris clar o un esquelet de càrrega que mantingui les dimensions de l’espai reservat. Això no només prevé CLS sinó que indica a l’usuari que alguna cosa apareixerà en aquell espai.
Per a webs que depenen d’ingressos publicitaris, mantenir un CLS baix requereix disciplina en la implementació, però l’impacte en l’experiència d’usuari i en la velocitat web percebuda justifica l’esforç tècnic.
Preguntes freqüents sobre CLS
Quin CLS és acceptable segons Google?
Google classifica el CLS en tres nivells: bo (0,1 o inferior), necessita millores (entre 0,1 i 0,25) i deficient (superior a 0,25). L’objectiu és mantenir el CLS en 0,1 o menys en el percentil 75 de les dades de camp.
Els anuncis de Google Ads sempre causen CLS?
No necessàriament. Els anuncis causen CLS quan no es reserva espai per a ells abans que carreguin. La solució és definir un contenidor amb les dimensions exactes de l’anunci usant CSS (min-height o aspect-ratio) perquè l’espai existeixi abans que l’anunci es carregui.
Com sé quin element està causant el CLS?
A Chrome DevTools, obre la pestanya Performance, grava la càrrega de la pàgina i busca els esdeveniments Layout Shift a la línia temporal. Cadascun mostra quins elements s’han mogut i quant CLS han aportat. També pots activar Layout Shift Regions al menú de renderitzat per veure els canvis en temps real.
Si el teu lloc té un CLS superior a 0,1 i no aconsegueixes identificar o corregir les causes, necessites un diagnòstic tècnic que analitzi els layout shifts en dades de camp i de laboratori. Contacta amb nosaltres per auditar l’estabilitat visual del teu web i aplicar les correccions necessàries per complir amb els llindars de Core Web Vitals.
Comparteix aquest article
Si t'ha resultat útil aquest contingut, comparteix-lo amb els teus col·legues.
Preguntes Freqüents
¿Con qué frecuencia publican contenido nuevo?
Publicamos artículos nuevos semanalmente, enfocados en las últimas tendencias de SEO técnico, casos de estudio reales y mejores prácticas. Suscríbete a nuestro newsletter para no perderte ninguna actualización.
¿Los consejos son aplicables a cualquier tipo de sitio web?
Nuestros consejos se adaptan a diferentes tipos de sitios: ecommerce, blogs, sitios corporativos y aplicaciones web. Siempre indicamos cuándo una técnica es específica para cierto tipo de sitio o requerimientos técnicos.
¿Puedo implementar estas técnicas yo mismo?
Muchas técnicas básicas puedes implementarlas tú mismo siguiendo nuestras guías paso a paso. Para optimizaciones avanzadas o auditorías completas, recomendamos consultar con especialistas en SEO técnico como nuestro equipo.
¿Ofrecen servicios de consultoría personalizada?
Sí, ofrecemos servicios de consultoría SEO técnica personalizada, auditorías completas y optimización integral. Contáctanos para discutir las necesidades específicas de tu proyecto y cómo podemos ayudarte.
