El cambio de diseño acumulativo (CLS) mide cuánto contenido de la página se desplaza inesperadamente durante la carga, lo que puede frustrar al usuario y provocar clics accidentales. Esta regla del cuadro de mando lo ayuda a identificar y solucionar problemas de estabilidad visual que afectan negativamente la experiencia del usuario y la finalización de tareas.
Acerca de esta regla del cuadro de mando
Esta regla de cambio de diseño acumulativo es parte del Nivel 2 (Proactivo) en el modelo de madurez de la experiencia digital. Evalúa si tus páginas mantienen estabilidad visual durante la carga, evitando que el contenido salte e interrumpa la interacción del usuario.
Por qué esto es importante: Los cambios de diseño hacen que el usuario haga clic accidentalmente en elementos incorrectos, pierda su lugar mientras lee o abandone tareas por frustración. Los buenos puntajes CLS indican páginas que se cargan de manera previsible, lo que permite al usuario interactuar con confianza sin movimientos de contenido inesperados.
Cómo funciona esta regla
Esta regla evalúa si el percentil 75 del puntaje Cumulative Layout Shift (CLS) de su página supera 0,1, que es el umbral de Google para una estabilidad visual "buena". CLS mide la suma de todos los puntajes de cambios de diseño inesperados durante todo el ciclo de vida de una página.
Nota importante: CLS se mide como un puntaje sin unidades, no en segundos. El puntaje representa el impacto y la distancia de los cambios de diseño combinados.
Entendiendo tu puntaje
- Aprobado (Verde): El puntaje CLS del percentil 75 es 0,1 o inferior (Bueno)
- Reprobado (rojo): el puntaje CLS del percentil 75 supera 0,1 (necesita mejorar o deficiente)
- objetivo: Lograr puntajes CLS inferiores a 0,1 para una experiencia óptima del usuario
Umbral CLS de Google:
- Bueno: 0,1 o menos
- Necesita mejorar: 0,1 a 0,25
- Pobre: mayor a 0,25
Qué significan los cambios de diseño: Un cambio de diseño ocurre cuando un elemento visible cambia su posición de un cuadro renderizado al siguiente. CLS mide la mayor explosión de puntajes de cambio de diseño durante todo el ciclo de vida de una página, lo que afecta la estabilidad visual y la experiencia del usuario.
Cómo mejorar los puntajes del CLS
Si su puntaje muestra una estabilidad visual deficiente, siga estos pasos para reducir los cambios de diseño:
1. Identificar páginas y elementos problemáticos
- Revisar los datos CLS en New Relic Browser: identificar qué páginas tienen los puntajes CLS más altas
- Evaluar el impacto en el usuario: determinar cuántos usuarios experimentan problemas con el cambio de diseño
- Analizar patrones de cambios: comprender cuándo durante la carga de la página se producen los cambios con mayor frecuencia
- Priorizar por impacto en el negocio: centrar en las páginas críticas para las conversiones y las tareas del usuario
2. Solucionar las causas comunes de los cambios de diseño
Reservar espacio para imágenes:
- Especifique siempre los atributos de ancho y alto para las imágenes
- Emplee la propiedad de relación de aspecto CSS para imágenes adaptables
- Implementar estrategias adecuadas de carga de imágenes
Manejar el contenido dinámico adecuadamente:
- Reserve un espacio mínimo para anuncios, widgets y contenido dinámico
- Evite insertar contenido sobre el contenido existente
- Emplee el marcador de posición mientras se carga el contenido
Optimizar la carga de fuentes:
- Precargue fuentes críticas para reducir los cambios en el diseño del texto
- Emplee font-display:swap para un mejor rendimiento de carga
- Elija fuentes de respaldo seguras para el sitio web similares a las fuentes personalizadas
Gestionar contenido de terceros:
- Establecer dimensiones consistentes para el contenido incrustado
- Cargar widgets de redes sociales y anuncios de forma asincrónica
- Pruebe el script de terceros para comprobar el impacto en el diseño
3. Implementar las mejores prácticas de desarrollo
Diseño para la estabilidad:
- Emplee CSS Grid y Flexbox para diseños más previsibles
- Implementar pantallas de esqueleto mientras se carga el contenido
- Pruebe diseños en diferentes longitudes y tipos de contenido
Monitorizar y validar:
- Emplee Chrome DevTools y Lighthouse para realizar pruebas de CLS
- Implemente el monitoreo de usuarios reales con New Relic Browser
- Configurar alertas cuando los puntajes CLS superen el umbral
- Pruebe en varios dispositivos y condiciones de red
Medición de la mejora
Realice un seguimiento de estas métricas para verificar sus esfuerzos de optimización de CLS:
- Reducción del puntaje CLS: disminución de los valores CLS del percentil 75 hacia 0,1 o menos
- experiencia del usuario métrica: Tasas de rebote reducidas, finalización de tareas mejorada
- Impacto en la conversión: Mayor tasa de conversión en páginas con mejor estabilidad visual
- Comentarios de los usuarios: Menos quejas sobre experiencias de página inestables o con saltos
Escenarios y soluciones comunes
Páginas de productos de comercio electrónico:
- Reserve el espacio exacto para imágenes de productos y opiniones de clientes.
- Emplee diseños consistentes para la información y los precios de los productos.
Sitios web de contenido:
- Reserva espacio para anuncios para evitar cambios de contenido
- Optimice la carga de fuentes para reducir el reflujo del texto
Páginas de destino:
- Diseñar formularios con espaciado fijo para mensaje de error
- Cerciorar de que los botones de llamada a la acción permanezcan en posiciones estables
Consideraciones importantes
- Optimización del equilibrio con la funcionalidad: Es posible que sean necesarios algunos cambios de diseño para la experiencia del usuario.
- Pruebe en condiciones reales: cerciorar de que las optimizaciones funcionen en varios dispositivos y velocidades de red
- Centrar en el impacto en el usuario: priorizar la solución de los cambios que afectan las conversiones y los recorridos críticos del usuario.
- Monitoreo continuo: CLS puede cambiar con actualizaciones de contenido, nuevas características y modificaciones de terceros
Próximos pasos
- Acción inmediata: identificar las páginas con los puntajes CLS más altos e implementar soluciones rápidas para imágenes y contenido dinámico
- Optimización técnica: abordar la carga de fuentes, scripts de terceros y arquitectura de diseño
- Integración de procesos: Agregar monitoreo CLS a flujos de trabajo de desarrollo y cotizaciones de rendimiento
- Continuar con la optimización: avanzar hacia otros Core Web Vitals como LCP e INP
Para obtener orientación detallada sobre la optimización de CLS, consulte nuestra Core Web Vitals documentación de y mejores prácticas de monitoreo de rendimiento .