CLS: por qué la página baila al cargar y cómo se arregla
El texto salta, pulsas donde no querías y te vas. Las cuatro causas del salto —imágenes, fuentes, anuncios y avisos— y cómo se corrige cada una de ellas.
El salto de contenido mide cuánto se mueve una página mientras carga, y es la métrica que peor se lleva con la paciencia de quien la lee. Casi siempre son cuatro causas: imágenes sin dimensiones declaradas, tipografías que se cambian al vuelo, bloques que se insertan arriba y avisos de cookies mal montados. Las cuatro se arreglan reservando el sitio antes de que llegue el contenido.
Es el defecto más irritante de una web y el que menos se reporta, porque nadie escribe para quejarse de que el texto se ha movido: simplemente se va.
Arreglar el CLS es de las pocas mejoras técnicas cuyo efecto se nota mirando la pantalla, sin necesidad de creerse ninguna métrica.
Las cuatro causas
| Causa | Qué se ve | Arreglo |
|---|---|---|
| Imágenes sin dimensiones | El texto baja de golpe cuando carga la foto | Declarar ancho y alto, o reservar la proporción |
| Tipografías que cambian | El texto aparece con una fuente y salta a otra | Precargar la fuente y ajustar la de reserva |
| Bloques insertados arriba | Todo baja cuando aparece un anuncio o un aviso | Reservar el espacio antes de que llegue |
| Avisos de cookies mal montados | Empuja el contenido en vez de superponerse | Que flote encima, no que ocupe sitio |
| Contenido cargado por guiones | Aparecen secciones enteras a destiempo | Reservar altura o cargar antes |
| Animaciones mal hechas | Bloques que se recolocan al entrar | Animar transformaciones, no propiedades que recolocan |
El principio, que es uno solo
Reservar el hueco antes de que llegue el contenido. Si el navegador sabe desde el primer momento cuánto va a ocupar una imagen, un anuncio o un bloque, dibuja el resto en su sitio definitivo y nada se mueve después.
Todo lo demás son formas concretas de aplicar eso: declarar dimensiones, fijar proporciones, dejar altura mínima, precargar lo que va a cambiar.
Cómo se mide
Con datos de usuarios reales
Es lo que cuenta: el informe de experiencia de Search Console y las herramientas que usan datos de campo.
Con una prueba de laboratorio
Útil para depurar, pero no refleja lo que ven tus visitantes con sus conexiones y sus dispositivos.
Mirándolo
Abre tu web en un móvil con la caché vacía y la conexión limitada. Si baila, ya lo has medido.
Por plantilla, no por página
El salto suele venir de la plantilla, así que se arregla una vez para todas las páginas que la usan.
Después de cada cambio
Un plugin nuevo o un banner añadido puede reintroducirlo sin que nadie lo note.
El aviso de cookies, sospechoso habitual
Las imágenes, el clásico
Una imagen sin ancho y alto declarados hace que el navegador no sepa cuánto sitio dejarle, así que dibuja el texto y luego lo empuja al llegar la foto. Es el salto más común de todos y se arregla escribiendo dos atributos.
Con imágenes que se adaptan al ancho de pantalla, la forma moderna es declarar la proporción para que el hueco se reserve aunque el tamaño final varíe. Y con las que cargan de forma diferida, exactamente igual: diferir no exime de reservar el sitio.
Las tipografías
Cuando una web carga una fuente propia, hay un momento en que el texto se muestra con la de reserva y luego cambia. Si las dos tienen anchos muy distintos, el texto se recoloca y el salto se ve.
Se reduce precargando la fuente principal, eligiendo una de reserva con métricas parecidas y ajustando su tamaño para que ocupe lo mismo. No siempre se elimina del todo, pero se puede dejar en algo imperceptible.
Los arreglos que provocan el salto
En WordPress, buena parte de los saltos que veo no los trae el tema: los trae algo que se instaló precisamente para mejorar la web.
El caso más repetido es el plugin de optimización que aplaza la carga de los estilos para que la página «pinte antes». Lo que pinta antes es una página sin maquetar que se recoloca entera cuando llegan los estilos. La nota de velocidad sube y la experiencia empeora, que es el peor negocio posible.
Detrás van los que difieren imágenes sin reservar el hueco, los carruseles del constructor que montan las diapositivas con guiones cuando la página ya se veía, y los bloques de valoraciones o de redes sociales que traen su altura de fuera y la aplican al llegar.
La comprobación es la misma en todos los casos: desactivar el sospechoso, mirar la página en un móvil y volver a activarlo. Si el salto aparece y desaparece con él, ya está localizado, y casi siempre hay una casilla en sus ajustes que lo resuelve sin renunciar al plugin. El resto de esa poda está en cómo acelerar un WordPress lento sin cambiar de tema y en los plugins que se pisan entre sí.
El salto que tú no ves nunca
Hay un motivo por el que esto se descubre tarde: el dueño de la web es la última persona que lo sufre.
Tú entras desde el mismo ordenador todos los días, con la caché llena, las tipografías ya descargadas, el aviso de cookies aceptado hace meses y buena conexión. En esas condiciones no hay salto, porque no hay nada que llegue tarde. Quien entra por primera vez desde un móvil de hace cuatro años y con cobertura regular lo ve todo.
Probarlo como lo ve él cuesta poco: ventana de incógnito, conexión limitada desde las herramientas del navegador y la página abierta desde cero. Si eso te suena a chino, sal a la calle y ábrela con datos, lejos del wifi de la oficina, con el móvil más viejo que haya en casa.
Es la misma prueba que descubre la mitad de los problemas de una web y casi nadie hace. Qué más cambia en ese escenario está en cómo se ve tu web desde un móvil viejo con mala cobertura.
Qué priorizar
Un caso: el banner que costaba clics
El salto que ocurre después de cargar
Hay una variante que se olvida y que en la práctica molesta más: los desplazamientos que ocurren cuando la página ya parecía estable, al interactuar con ella.
El arreglo es el mismo de siempre, aplicado a la interacción: reservar el espacio. Un menú que se superpone en vez de empujar, un acordeón que reserva altura, un formulario que deja sitio para el mensaje de error antes de que aparezca, un carrusel con altura fija.
Se detecta usando la propia web como la usa un cliente, con el móvil en la mano y sin prisa: abrir el menú, desplegar una pregunta, enviar un formulario mal a propósito. En cinco minutos aparecen los tres o cuatro sitios donde la página se mueve bajo el dedo.
Lo he arreglado y el informe sigue en rojo
Pasa siempre, y provoca dos errores seguidos: dar por malo un arreglo que estaba bien, y volver a tocar lo que ya no había que tocar.
El informe de experiencia no mide tu página ahora. Resume lo que vivieron usuarios reales durante las últimas semanas, con una ventana de veintiocho días que se va moviendo. El día que arreglas el salto, esa ventana sigue llena de visitas anteriores al arreglo, y hasta que no se renueva entera el color no cambia. Son semanas, aunque el defecto haya durado un minuto.
Hay un segundo motivo que despista todavía más. Las direcciones con pocas visitas no reúnen datos propios suficientes, así que se agrupan con otras parecidas del mismo sitio. Tu página puede estar perfecta y seguir en rojo porque la arrastra el grupo al que pertenece, que suele ser el resto de páginas con la misma plantilla, esas que nadie ha tocado.
De ahí sale la forma sensata de trabajar esto. Arreglar por plantilla y no por página. Comprobar el resultado con una prueba de laboratorio o mirándolo en el móvil, que responden al momento. Y dejar el informe de campo para confirmarlo dentro de un mes, no para decidir mañana. Cuánto pesa cada una de estas métricas de verdad, y cuáles no merecen una semana de trabajo, está en core web vitals: qué métricas importan de verdad.
Qué mediría
El salto en móvil, con datos de usuarios reales y por plantilla. Y, sobre todo, si el salto ocurre en una zona con botones: un desplazamiento grande en una zona sin nada que pulsar molesta; uno pequeño justo encima de un botón cuesta clientes.
Y una comprobación que conviene añadir al proceso de publicación, porque este defecto vuelve solo: cada vez que se añade un elemento nuevo a una plantilla, un aviso, un banner, un bloque de valoraciones, una barra de promoción, hay que mirar si empuja el contenido. Casi todos los saltos que he visto entraron así, uno a uno y con buena intención, en webs que habían estado perfectas durante años. Treinta segundos de comprobación en el momento de añadirlo evitan volver a diagnosticarlo desde cero seis meses después.
Preguntas frecuentes
¿Qué es exactamente el CLS?
La medida de cuánto se desplazan los elementos visibles mientras la página termina de cargar, sin que el usuario haya hecho nada. Combina cuánta superficie se mueve y cuánta distancia recorre. Importa por el buscador, pero sobre todo porque un salto en el momento equivocado hace pulsar donde no se quería.
¿Cuál es la causa más común?
Las imágenes sin ancho y alto declarados: el navegador no sabe cuánto sitio dejarles, dibuja el texto y lo empuja al llegar la foto. Se arregla escribiendo dos atributos, o declarando la proporción cuando la imagen se adapta al ancho de pantalla. Diferir la carga no exime de reservar el hueco.
¿El aviso de cookies provoca CLS?
Es el sospechoso habitual: aparece un segundo después, se inserta en el flujo y empuja todo hacia abajo justo cuando alguien iba a pulsar. La solución es que flote por encima en vez de ocupar espacio. Eso sí, sin tocar sus requisitos legales sobre qué permite y cuándo cargan los terceros.
¿Cómo lo compruebo sin herramientas?
Abriendo tu web en un móvil con la caché vacía y la conexión limitada y mirándola. Si baila, ya lo has medido. Las herramientas sirven para cuantificarlo y para ver datos de usuarios reales, pero el diagnóstico inicial se hace con los ojos en treinta segundos.
¿Merece la pena arreglarlo siempre?
Depende de dónde ocurra. Un salto justo encima de un botón o un enlace cuesta clientes y se arregla ya; uno pequeño muy abajo, donde nadie interactúa, puede esperar. Y como suele venir de la plantilla, un arreglo bien hecho vale para todas las páginas que la usan a la vez.
El salto se corrige reservando en la plantilla el espacio de cada elemento y ordenando qué carga primero, un arreglo que corre a cargo del SEO técnico. Para saber si es lo único que frena tu web, hace falta una auditoría SEO. Por qué la velocidad y el comportamiento en móvil deciden más que el diseño se explica en los errores SEO más caros que veo en webs de empresa, y si estás pensando en rehacer la web por esto, léete antes rehacer la web o arreglar la que tienes.
La primera llamada no cuesta nada y suele bastar para saber si tiene arreglo. Si tu caso no es para mí, te lo digo.
