Desplazamiento del diseño
CLS · Puntuación que indica cuánto se mueven los elementos de forma inesperada mientras carga la página; Google considera bueno 0,1 o menos.
- 01
Por qué importa
El desplazamiento de diseño consiste en que los elementos se mueven de forma inesperada mientras se carga la página. El texto que se está leyendo salta y el visitante pulsa el botón equivocado; resulta molesto y puede provocar pedidos o clics erróneos. Las imágenes sin dimensiones definidas, los anuncios que se cargan más tarde y los cambios de fuente son las causas más frecuentes.
- 02
Ejemplo
En la página de pago, un banner promocional que se carga tarde se inserta sobre el botón «Completar pedido» y lo empuja hacia abajo. Una vez reservado el espacio para el banner, el botón permanece en su sitio y se acaban los clics erróneos.
- 03
Error frecuente
No indicar a las imágenes un ancho y un alto. Si el navegador no conoce de antemano el tamaño de una imagen, no puede reservar espacio, de modo que el contenido se desplaza hacia abajo cuando la imagen llega.
- 04
Términos relacionados
- Core Web Vitals · Métricas de experiencia de página de Google
- LCP · Tiempo de carga del contenido principal
- INP · Tiempo de respuesta a la interacción
Servicios y guías relacionados
Hablemos de tu proyecto.
Cuéntenos lo que necesita; definiremos el alcance juntos.