Cómo reducir el CLS causado por imágenes e inserciones

Puntos clave

Busca el elemento que causa el salto, no el que se mueve.
Reserva espacio con dimensiones o proporción.
Da a las inserciones un hueco estable.
El lazy loading no reserva espacio.

Para reducir el CLS causado por imágenes e inserciones, encuentra qué aparece o cambia de tamaño justo antes de que la página se mueva. Reserva el espacio correcto para ese contenido y repite la misma visita. El texto que salta suele ser la víctima; la causa es una imagen o un widget que está encima. Esta guía se centra en esos huecos y forma parte de la guía de rendimiento web.

¿Qué es el CLS y cuál es un buen valor?

El CLS (Cumulative Layout Shift) mide cuánto se mueve el contenido visible de forma inesperada mientras alguien usa la página. Según la guía de Web Vitals, un valor de 0,1 o menos es bueno, medido en el percentil 75 de las visitas. Un salto molesta porque el lector pierde su sitio o pulsa un enlace que no quería.

Causas comunes del CLS

La guía de Google para optimizar el cambio de diseño acumulado señala varias causas habituales:

Imágenes sin dimensiones.
Anuncios, inserciones y otro contenido que se carga tarde.
Animaciones que cambian el tamaño o la posición de los elementos.
Fuentes web que cambian la forma del texto al llegar.

Esta guía trata las dos primeras. Si el texto cambia de forma cuando llega una fuente, sigue la guía para optimizar la carga de fuentes web. Y si lo lento es la llegada del documento, es otro problema: el TTFB.

Encuentra la imagen o la inserción que provoca el salto

Empieza con una página y un informe claro: qué se movió, cuándo y en qué tamaño de pantalla. “El párrafo baja cuando aparece el vídeo” sirve más que “la página va lenta”. Anota también el estado del visitante, como una primera visita con un aviso abierto.

Repite ese recorrido en el navegador. Mira la primera carga, baja por el artículo y abre los controles relevantes. Algunos saltos ocurren después de que la primera pantalla terminó de cargar. Una captura estática no muestra esa secuencia.

El panel Rendimiento de Chrome DevTools muestra los cambios de diseño. La referencia de las funciones de rendimiento explica cómo seleccionar un cambio y revisar la actividad cercana. El texto que aparece en el registro no es por fuerza el culpable: busca encima un elemento nuevo o una caja que cambió de tamaño. Si se mueven varias cosas, sepáralas en tareas pequeñas.

Reserva espacio para las imágenes antes de que lleguen

Los atributos width y height correctos permiten al navegador calcular la forma de una imagen antes de cargarla. El CSS puede seguir adaptándola a la pantalla. La forma reservada debe coincidir con la imagen que verá el visitante.

Una foto panorámica necesita un hueco ancho. No uses un marcador cuadrado porque es fácil de añadir: el hueco cambiará al llegar la imagen real y moverá otra vez el párrafo siguiente. Pide al responsable de la plantilla que revise el HTML y los estilos de la imagen. Si el CMS escribe las dimensiones pero el tema las quita o cambia la forma, cambiar el archivo no basta.

Mantén esta tarea centrada en el espacio y el movimiento. La revisión general del archivo, el nombre y el texto alternativo está en la guía de SEO de imágenes.

Revisa las imágenes responsive en cada tamaño

Una página puede usar recortes distintos en móvil y escritorio. Revisa la forma de cada versión y el hueco que se usa en cada tamaño. Un arreglo para una foto ancha de escritorio puede fallar cuando el móvil recibe un recorte más alto.

Si el cambio afecta a una plantilla común, revisa más de un artículo: uno con pie de foto corto, otro con pie largo y otro sin pie. Así sabrás si el espacio corresponde a la imagen, al pie o a todo el bloque. Si una función común del sitio controla ese hueco, usa una prueba controlada de plugins en una copia segura.

Da a las inserciones un hueco estable

Vídeos, mapas, publicaciones de redes sociales y otras inserciones pueden llegar más tarde que el texto. Deja espacio para el contenido previsto en lugar de meter una caja nueva en la vista del lector después de cargar.

Un vídeo con una forma conocida puede usar un hueco basado en esa proporción, por ejemplo con aspect-ratio en CSS. Un widget social de altura variable necesita otro plan: pregunta qué altura razonable se puede reservar en cada tamaño y revisa qué pasa si el servicio no carga.

No escondas contenido útil bajo una caja rígida que lo recorte. Revisa la inserción completa cuando esté lista: etiquetas, controles, pies y enlaces. Si además la inserción hace lentos los clics, mide su tiempo de ejecución de JavaScript: un hueco estable no prueba que el widget sea rápido.

Para el contenido que depende del consentimiento, prueba el estado de espera y el estado después de aceptar. No desactives un control de consentimiento para obtener una prueba más limpia.

El lazy loading no reserva espacio

El lazy loading controla cuándo se pide una imagen. No elimina la necesidad de reservarle espacio: una imagen diferida puede mover la página cuando el navegador conoce su tamaño. Revisa la guía de lazy loading de imágenes cuando haya una imagen de más abajo. Las dos tareas van juntas: elegir cuándo carga la imagen y asegurar que su hueco está listo.

Ejemplo: un vídeo empuja una guía de reparación

Ejemplo ficticio. En un artículo de reparación aparece un vídeo a mitad de página. El texto de debajo baja cuando carga el reproductor. No es un resultado medido de un cliente.

Anota el tamaño de pantalla y el punto donde ocurre el salto.
Comprueba si el espacio del reproductor existe antes de que cargue.
Añade un hueco adecuado en una versión de prueba de la plantilla.
Repite la misma visita y el mismo recorrido de scroll.
Revisa los controles del reproductor y el texto cercano en una pantalla pequeña.
Anota si el salto original desapareció y si queda otro movimiento.

Se trata de conectar un problema visible con un cambio. No afirmes una nueva puntuación sin medirla. Si queda otro salto, guarda su evidencia aparte.

Cómo medir el CLS antes y después

En el laboratorio, el CLS solo cuenta lo que pasa durante la prueba. En el campo, cuenta toda la visita, incluido el scroll. Por eso un buen resultado en una prueba de carga no garantiza un buen dato real. Usa las pruebas para reproducir el salto y los datos de campo para ver si mejora con el tiempo.

Compara visitas repetidas con la misma pantalla, navegador y condiciones. Antes, comprueba que la caché entrega la página actualizada. Revisa el artículo completo, los controles de las inserciones y la primera visita: una visita con caché puede esconder lo que ve un lector nuevo.

Si el arreglo es de la plantilla, revisa un grupo pequeño de páginas que la usan y ten preparada la vuelta atrás. DEX conecta la investigación de búsquedas, la planificación de contenido, la redacción de artículos y la publicación en el sitio conectado, y DEX Health ayuda a revisar la calidad y el SEO de la página, también en el plan gratuito. Una nota de Health no es una grabación del movimiento ni prueba que la causa esté arreglada.

Guarda las notas de antes y después, el responsable y el resultado. La tarea termina cuando los medios tienen su espacio y el lector puede seguir la página sin ese salto.

Preguntas frecuentes

¿El elemento que se mueve es siempre la causa?

No. Suele ser la víctima; busca encima una imagen o una caja que cambió de tamaño.

¿El lazy loading reserva el espacio de la imagen?

No. Decide cuándo se pide la imagen; el espacio lo reservan las dimensiones.

¿Basta una carga en escritorio para comprobar el arreglo?

No. Revisa también el móvil, el scroll y la primera visita.

Fuentes

Cómo optimizar el cambio de diseño acumulado · web.dev (Google)
Referencia de las funciones de rendimiento · Chrome for Developers

Dex SEO

Dex SEO is an AI SEO agent for small businesses. Every article here is planned from search data, drafted by Dex, fact-checked against the sources it cites, and reviewed by the team before it is published.

Cómo se hizo este artículo: planificado y redactado por Dex a partir de datos de búsqueda, verificado por Dex (3 afirmaciones revisadas) y aprobado por el equipo de Dex SEO.