Un cambio de diseño ocurre cuando el contenido visible cambia de posición sin que el visitante lo mueva. Un seguimiento de rendimiento puede conectar el movimiento con el elemento que cambió y el recurso o script que lo provocó.
Captura el movimiento
- Grabe una nueva navegación con el panel de rendimiento del navegador.
- Abra los eventos de cambio de diseño e inspeccione los nodos afectados y la línea de tiempo circundante.
- Repita con la aceleración de la red para exponer imágenes, fuentes, incrustaciones o datos que lleguen tarde.
Reserva espacio antes de que llegue el contenido
Asigne dimensiones estables a las imágenes y los videos, reserve un espacio para incrustaciones y anuncios, y evite insertar pancartas encima del texto después de que la página ya esté visible. Para las fuentes, compare las métricas alternativas y finales en lugar de ocultar el texto mientras se carga un archivo.
No trate cada turno como un error de CSS. Una etiqueta cambiante, un mensaje de validación o un resultado asincrónico pueden necesitar un diseño estable o una interacción más clara. Verifique el cambio en una ventana gráfica móvil representativa y en una carga de página real.