Evitar saltos al cargar (CLS) con HTML y CSS

Vas a tocar un enlace y, justo antes, la página baja porque terminó de llegar una foto: tocaste otra cosa. Esos saltos tienen nombre, CLS (Cumulative Layout Shift), y Google lo mide como parte de los Core Web Vitals: por encima de 0.1 la experiencia se considera mejorable y por encima de 0.25, mala. Para evitar saltos al cargar, casi siempre basta con reservar el espacio antes de que llegue el contenido.

Lo medimos: la misma página, con y sin espacio reservado

Armamos dos versiones de una página: una foto que tarda 0.6 s en llegar, un anuncio que se inserta a los 0.9 s arriba del texto y seis párrafos. En la primera, la foto no tiene width ni height y el anuncio no tiene lugar reservado; en la segunda, sí. Medimos el CLS en Chromium con PerformanceObserver (Firefox y Safari no exponen esta medida):

CLS medido en Chromiumsin espacio reservado:  CLS = 0.271
con espacio reservado:  CLS = 0.002

La primera versión queda por encima del límite «malo» de 0.25; la segunda, en 0.002. La diferencia está en las dos reglas del ejemplo de abajo.

El código que reserva el espacio

<article class="nota">
  <img src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa Raspberry Pi 5" width="1200" height="800">
  <aside class="anuncio" aria-label="Publicidad"></aside>
  <p>El texto de la nota empieza aquí y no se mueve cuando llegan la foto o el anuncio.</p>
</article>

body { font-family: system-ui, sans-serif; }
.nota { max-width: 32rem; }
img {
  width: 100%;
  height: auto;   /* con width y height en el HTML, el hueco ya tiene la proporción */
  border-radius: 8px;
}
.anuncio {
  min-height: 90px;          /* el alto del anuncio, reservado desde el principio */
  margin: 12px 0;
  background: #f5f8fb;
  border: 1px dashed #c9d6e4;
}

ResultadoÁbrelo en el editor →

width y height en la <img>, con el tamaño real de la foto. Con height: auto en el CSS, el navegador calcula con ellos la proporción y reserva el hueco antes de descargarla: la caja mide en proporción 1.52 desde el principio. No hace falta que coincidan con lo que se ve en pantalla, solo la proporción.
min-height en el lugar del anuncio (90 px en el ejemplo; con el borde, la caja mide 92 px desde el principio), o en cualquier cosa que llegue tarde: un banner, un aviso de cookies, el resultado de una consulta. Si el contenido puede variar, reserva el tamaño más común.
aspect-ratio para videos, iframes e incrustados (aspect-ratio: 16 / 9), que no tienen proporción hasta que cargan.
Esqueletos (cajas grises con la forma del contenido) para listas que se llenan con JavaScript: ocupan el lugar de lo que viene.
Fuentes: cuando la fuente web reemplaza a la del sistema, el texto puede cambiar de ancho y empujar todo. Se arregla ajustando la de respaldo; lo medimos en fuentes web sin parpadeo.

Lo que aprendimos en este sitio

En la portada de decodigo.com, las seis primeras noticias cambian de orden al azar en cada visita. La primera versión las reordenaba con JavaScript después de pintarlas, y con los cientos de kilobytes de la portada el navegador alcanzaba a mostrar el orden original: el CLS llegó a 0.37 en computadora. La solución fue decidir el orden en un script mínimo antes de que exista la lista y dejar que CSS (order) las acomode desde el primer pintado, con las tarjetas ocultas hasta que llega la última. Las infografías animadas de la portada hacen lo mismo con su hueco: tienen reservado su alto antes de dibujarse.

Para ver el CLS de tu página: en Chrome, abre las herramientas de desarrollo, pestaña Performance (Rendimiento), y recarga; los saltos aparecen marcados como «Layout shift». O usa PageSpeed Insights con la dirección de tu página.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.