Cuando una imagen o incrustación se carga sin espacio reservado, todo lo que hay debajo se mueve. Establezca dimensiones intrínsecas o una relación de aspecto para que el navegador pueda diseñar la página antes de descargar el contenido.
<img src="article-photo.webp" width="1200" height="800" alt="A small boat in a harbor">.video-frame {
aspect-ratio: 16 / 9;
background: #eee;
}
Reserva espacio para más que imágenes
- Establezca una relación de aspecto para video y medios integrados.
- Utilice una altura mínima estable para una región que recibirá contenido asincrónico.
- Evite insertar un banner encima de la posición de lectura actual sin reservar su espacio.
medir el cambio
Utilice las herramientas de rendimiento del navegador para encontrar cambios de diseño y confirmar que la solución aborda el elemento que mueve la página. Un marcador de posición que cambia de tamaño después de la carga puede recrear el mismo problema.
La geometría estable ayuda a las personas a mantener su lugar y respalda una experiencia de página más fluida. Las dimensiones correctas deben reflejar el contenido en lugar de ser adivinadas para obtener una puntuación.