Una página muestra imágenes ligeras, pero los párrafos y botones se desplazan mientras llegan. ¿Cómo comprobar si falta espacio reservado sin fijar un tamaño que rompa la vista móvil?

El peso del archivo y el espacio reservado son cuestiones distintas. Comprimir una imagen puede acortar su descarga, pero el navegador sigue necesitando conocer su proporción para organizar el contenido antes de mostrarla. Observa la página con una carga lenta y localiza qué elemento aparece justo antes del desplazamiento.

Revisa el HTML de las imágenes afectadas. Los atributos width y height, con valores coherentes con su proporción, permiten calcular espacio durante la carga. Pueden combinarse con CSS adaptable, como un ancho máximo adecuado y height: auto, para conservar la proporción sin obligar a que la imagen ocupe su tamaño original en todas las pantallas. Otra opción es reservar espacio mediante aspect-ratio en el contenedor apropiado.

Comprueba el resultado en varios anchos. Si se usan recortes diferentes según la pantalla, revisa sus proporciones específicas; copiar dimensiones de otra variante puede introducir otro salto. Inspecciona también las imágenes que aparecen al desplazarte, porque retrasar la carga no elimina la necesidad de reservar su espacio.

Repite la medición con las mismas condiciones y compara la posición del texto antes y después. Si persisten movimientos, investiga otros elementos que se insertan tarde, como anuncios o contenido incrustado, en el punto donde ocurre el cambio.

Evita asignar una altura arbitraria a todas las imágenes para ocultar el síntoma. La corrección debe reflejar el diseño y mantener contenido, controles y proporciones utilizables.

Fuentes: web.dev — Optimize Cumulative Layout Shift · MDN — img element.