Estás por tocar “Ver producto” y aparece una franja arriba. El botón baja, tu dedo cae sobre otro enlace y terminás en una página que no querías abrir. La web puede haber cargado rápido y aun así resultar incómoda. Ese tipo de desplazamiento inesperado es el problema que ayuda a estudiar el CLS.

Para corregirlo necesitás encontrar qué cambia el espacio de la página y en qué momento. Comprimir todos los archivos o instalar otro optimizador no responde esa pregunta. Vamos a recorrer una investigación sobre una ficha de producto ficticia, con pruebas que podés repetir en tu propio sitio.

Lo que mide el número

CLS significa Cumulative Layout Shift. Resume la mayor ráfaga de desplazamientos inesperados del contenido visible durante la vida de la página. El puntaje no se expresa en segundos ni en píxeles. Una ráfaga agrupa movimientos próximos: menos de un segundo entre ellos y hasta cinco segundos en total.

La referencia de buena experiencia es un CLS de 0,1 o menos en el percentil 75, distinguiendo móvil y escritorio. Eso no significa que cada visita tenga ese valor ni que un puntaje favorable explique toda la experiencia. Un movimiento molesto merece revisión aunque no cambie la categoría de un reporte.

El CLS estudia estabilidad visual. Para investigar cuánto tarda en aparecer el contenido principal, usá la guía de optimización del LCP. Si el problema aparece después de tocar un control y la interfaz tarda en responder, revisá cómo diagnosticar el INP. Son problemas relacionados con la experiencia, pero requieren evidencias diferentes.

El caso: la ficha se mueve después de parecer lista

En nuestra tienda ficticia, la descripción y el botón de compra aparecen primero. Luego se descarga la foto, el título pasa de dos a tres líneas cuando llega una fuente y, unos segundos después, entra un módulo de reseñas encima del botón. Son tres posibles causas. Todavía no sabemos cuál produce el movimiento más importante ni si ocurren en todas las visitas.

Elegí una URL y anotá las condiciones: ancho de ventana, dispositivo o emulación, estado de caché, conexión simulada y sesión iniciada o visitante. Probá también una visita sin preferencias guardadas, porque banners e integraciones pueden comportarse de otra forma. Si otra persona no puede repetir el recorrido, el arreglo será difícil de comprobar.

No midas solamente la home. Seleccioná una muestra pequeña de plantillas que usan recursos distintos: ficha, categoría, artículo y formulario, por ejemplo. Un módulo presente en todas las fichas puede explicar una familia de problemas; una publicación con una imagen mal insertada puede ser un caso aislado.

Grabá el recorrido y localizá el primer movimiento

  1. Abrí Chrome DevTools y el panel Performance. Iniciá una grabación que incluya la recarga.
  2. Esperá a que aparezcan los módulos tardíos y recorré la página como una persona: leé, desplazate y abrí los controles relevantes.
  3. Detené la grabación y revisá la pista de desplazamientos de diseño, llamada Layout shifts. La disposición puede variar según la versión de las herramientas.
  4. Seleccioná un evento importante y observá los elementos desplazados y los fotogramas anteriores y posteriores.
  5. Anotá qué elemento cambió de tamaño o se insertó antes del movimiento. El elemento señalado como desplazado puede ser la víctima, no la causa.

En el caso ficticio, el botón aparece destacado en el registro, pero no tiene un estilo defectuoso. Está bajando porque una imagen que estaba arriba pasa de no ocupar alto a ocupar el espacio completo. Cambiar el margen del botón ocultaría parte del síntoma sin resolver la reserva de espacio.

Guardá la grabación o una descripción precisa para el equipo. “El módulo de reseñas aparece después y desplaza el botón en la ficha móvil” permite investigar. “La web salta” deja demasiadas posibilidades abiertas.

Reparación uno: la imagen necesita espacio antes de descargarse

En este ejemplo, la fotografía mide 1200 por 800 píxeles. Esas dimensiones permiten declarar una proporción que el navegador puede usar mientras llega el archivo. El CSS conserva la adaptación al contenedor. El fragmento es ilustrativo: usá la ruta y las dimensiones reales de tu imagen.

<div class="product-media">
  <img src="/images/bandeja-1200x800.webp"
       width="1200" height="800"
       alt="Bandeja de cerámica vista desde arriba">
</div>

.product-media img {
  display: block;
  max-width: 100%;
  height: auto;
}

No copies las dimensiones en fotografías con otra proporción. Si el diseño cambia el recorte entre móvil y escritorio, comprobá la reserva de espacio en ambos casos. En WordPress, mirá el HTML final que recibe el visitante: una imagen correcta en la biblioteca puede perder sus atributos al pasar por un constructor o una integración.

La verificación consiste en recargar con la descarga suficientemente lenta para observar el espacio reservado. El título, el precio y el botón deberían permanecer en su lugar mientras aparece la foto. Revisá también que la solución no estire el producto ni lo recorte de una manera que impida reconocerlo.

Reparación dos: el cambio de fuente altera el título

En la segunda prueba, la imagen ya no empuja el contenido, pero el título sigue ganando una línea. Compará la fuente inicial con la definitiva y confirmá qué archivo se descarga. Podés probar temporalmente la fuente de respaldo para comprobar si el cambio está relacionado con la tipografía, sin dar esa prueba por una solución de producción.

El arreglo puede requerir una fuente de respaldo con medidas más cercanas, ajustes de métricas o una estrategia de carga mejor definida. Reducir el título hasta que entre en una línea en tu pantalla no demuestra que el problema desapareció: otro producto, idioma o ancho puede reproducirlo.

Revisá nombres largos, precios con más caracteres y los tamaños de texto que usan personas con necesidades de lectura diferentes. Evitá fijar una altura que corte las letras. La estabilidad no debería conseguirse escondiendo información o haciendo el texto demasiado pequeño.

Reparación tres: las reseñas llegan a un lugar sin reservar

En el último recorrido, el módulo de reseñas se inserta encima del botón cuando responde un servicio externo. El equipo debe decidir si puede reservar un espacio razonable, mover el módulo a otra zona o cambiar su forma de carga. La decisión requiere mirar contenido real, incluidos estados vacíos, errores y textos más largos.

Una reserva arbitraria de quinientos píxeles puede reducir un movimiento y dejar un vacío enorme. Usá las dimensiones del componente y sus variantes para preparar la solución. Si el servicio no responde, comprobá que el mensaje de respaldo no provoque otro salto al quitar el espacio previamente reservado.

Algunos movimientos cercanos a una interacción válida se excluyen del cálculo, pero eso no vuelve conveniente diseñar cambios sorpresivos. El desplazamiento de la página o el simple paso del puntero no hacen que todos los movimientos posteriores sean esperados. Probá el recorrido completo y observá dónde termina el foco y qué control queda bajo el dedo.

La prueba local y la experiencia de usuarios no son el mismo dato

Un análisis breve de carga puede no capturar movimientos que llegan después. Si PageSpeed Insights muestra datos de usuarios reales, comprobá si corresponden a la URL o al origen completo y qué período representan. No compares ese conjunto con una única recarga local como si fueran mediciones idénticas.

Si el registro local mejora y los datos reales todavía no, verificá primero que el cambio esté publicado, que las cachés lo entreguen y que no falten recorridos. Los reportes agregados necesitan incorporar visitas posteriores al cambio. La falta de datos suficientes tampoco demuestra que el CLS sea cero.

Entregá el hallazgo como un problema reproducible

Para el módulo de reseñas, el pedido de trabajo puede decir: “En esta ficha, como visitante nuevo y en este ancho de pantalla, el bloque entra sobre el botón después de cargar. La grabación muestra que el botón cambia de posición. Necesitamos mantener estable ese recorrido con reseñas, sin reseñas y cuando falla el servicio”. Adjuntá la URL y las condiciones que realmente probaste.

Eso deja espacio para elegir una solución de desarrollo sin perder el criterio de aceptación. Si solamente pedís “poner una altura fija”, podés recibir un arreglo que elimina el movimiento en una ficha y corta el contenido en otra. Si el problema viene de un proveedor, identificá además quién puede cambiar la integración y qué alternativa tiene el equipo si no responde.

Priorizá por alcance y por la tarea afectada. Un movimiento junto a un botón de compra puede merecer atención antes que otro en una sección secundaria. Conservá la evidencia de ambos; el orden de trabajo no debería borrar un problema porque el primero ya mejoró el puntaje.

Cuándo dar el arreglo por comprobado

Repetí las condiciones iniciales y otras relevantes: primera visita y regreso, móvil y escritorio, producto corto y largo, módulo con contenido y sin él. Compará la posición de los elementos y el registro, no solamente el puntaje final. Confirmá que siguen funcionando compra, consentimiento, navegación y lectura.

Dejá documentados causa, componente, cambio, condiciones y resultado. Si una integración vuelve a modificarse, el equipo podrá repetir la prueba sin empezar desde cero. El trabajo termina cuando el contenido conserva una posición previsible en los recorridos que importan, y esa mejora se sostiene después de publicar.