Cambios de diseño
Silktide observa tu página mientras se carga y mide cuánto salta el diseño, identificando las partes concretas de la página que se mueven. Una página estable aparece una vez y se mantiene; una inestable cambia a medida que llegan imágenes, fuentes y contenidos incrustados.
La métrica es el Cambio de diseño acumulado (CLS), una de las de Google. Suma cada movimiento inesperado durante la carga: 0,1 o menos se considera bueno, y 0,25 o más se considera deficiente.
Por qué es importante
Los cambios de diseño provocan errores reales. Un visitante va a tocar un enlace, el contenido salta en el último momento y toca otra cosa, a veces un anuncio, a veces "Comprar" en lugar de "Cancelar". El texto que el visitante está leyendo se le escapa de debajo. Hace que un sitio parezca roto y poco fiable, de una forma que los visitantes perciben de inmediato aunque no sepan nombrarla.
Google también utiliza las Core Web Vitals, incluida esta, como señal de posicionamiento en la búsqueda, por lo que una página inestable puede costarte visibilidad además de la confianza de los usuarios.
Cómo solucionarlo
Silktide muestra qué elementos se desplazaron; la solución es reservar su espacio antes de que se carguen.
- Asigna a cada imagen y vídeo un ancho y un alto explícitos (o una relación de aspecto en CSS), para que el navegador reserve el espacio adecuado antes de que llegue el archivo; consulta Tamaños de imagen explícitos.
- Reserva espacio para anuncios, incrustaciones y otros contenidos que cargan tarde con un contenedor de tamaño fijo, incluso si a veces queda parcialmente vacío.
- No insertes contenido nuevo por encima de lo que el visitante ya está leyendo, a menos que sea en respuesta a su propia acción.
- Carga las fuentes personalizadas de un modo que evite el reflujo visible del texto; consulta Texto visible durante la carga.
Cómo lo prueba Silktide
- Carga la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
- Registra cada movimiento de diseño inesperado mientras se carga la página y súmalos para obtener la puntuación de Cambio de diseño acumulado de la página.
- Informa de cada elemento que se desplazó, con su y su contribución individual al total.
- Se evalúa la página por su puntuación total, según la escala pública de esta métrica: 0,1 o menos es bueno; 0,25 o más es deficiente.
Solución de problemas
No veo que la página se mueva
Los desplazamientos suelen ocurrir en los primeros instantes de la carga, antes de que empieces a leer, o solo en conexiones más lentas donde los archivos llegan espaciados en el tiempo. Es posible que tu navegador también tenga en caché las imágenes y fuentes de la página, de modo que nada llegue tarde. No obstante, los elementos que enumera la comprobación señalan con precisión qué se movió, aunque fuera brevemente.
Mi puntuación difiere de otras herramientas
El CLS depende del dispositivo, la velocidad de conexión y de hasta dónde se extiende la medición. Silktide mide una carga de página controlada con los ajustes configurados para tus pruebas de velocidad; las herramientas basadas en datos de visitantes reales (o que siguen midiendo mientras los usuarios se desplazan e interactúan) pueden informar legítimamente de valores diferentes para la misma página.
Más información
- Velocidad de página y Core Web Vitals - marco de priorización para el CLS y el resto de métricas
- Cumulative Layout Shift (web.dev)
- Optimizar el Cumulative Layout Shift (web.dev)
- Tamaños de imagen explícitos
- Texto visible durante la carga
- Web Vitals