La optimización de CLS en 0.2 generó un aumento del 15% en las páginas vistas por sesión, una duración de sesión un 13% más larga y una disminución del 1.72% en el porcentaje de rebote.
Centro de ayuda de Yahoo! Japón es una de las empresas de medios más grandes de Japón, con más de 79,000 millones de vistas de página por mes. Su plataforma de noticias, Yahoo! JAPAN News cuenta con más de 22,000 millones de páginas vistas por mes y cuenta con un equipo de ingeniería dedicado a mejorar la experiencia del usuario.
Mediante la supervisión continua de las Métricas web esenciales, correlacionaron la puntuación mejorada del Cambio de diseño acumulado (CLS) del sitio con un aumento del 15% en las páginas vistas por sesión y del 13% en la duración de la sesión.
0.2
Mejora de CLS
15,1 %
Más vistas de página por sesión
13,3%
Mayor duración de la sesión
El desplazamiento del contenido de la página de forma inesperada suele causar clics accidentales, desorientación en la página y, en última instancia, frustración para el usuario. Los usuarios frustrados tienden a no quedarse mucho tiempo. Para que los usuarios estén satisfechos, el diseño de la página debe mantenerse estable durante todo el ciclo de vida de su recorrido. Para Yahoo! JAPÓN News que esta mejora tuvo un impacto positivo importante en las métricas de participación fundamentales para la empresa.
Para obtener detalles técnicos sobre cómo mejoraron el CLS, consulta la página de Yahoo! Publicación del equipo de Ingeniería de Noticias de Japón.
Cómo identificar el problema
La supervisión de las Métricas web esenciales, incluido el CLS, es fundamental para detectar problemas y también identificar de dónde provienen. En Yahoo! JAPAN News, Search Console proporcionó una excelente descripción general de grupos de páginas con problemas de rendimiento, y Lighthouse ayudó a identificar oportunidades por página para mejorar la experiencia de página. Con estas herramientas, descubrieron que la página de detalles del artículo tenía un CLS deficiente.
Es importante tener en cuenta la parte acumulada del Cambio de diseño acumulado; la puntuación se captura durante todo el ciclo de vida de la página. En el mundo real, la puntuación puede incluir cambios que ocurren como resultado de las interacciones del usuario, como desplazarse por una página o presionar un botón. Para recopilar puntuaciones de CLS de los datos de campo, el equipo integró los informes de la biblioteca de JavaScript de web-vitals.
El equipo usó las Herramientas para desarrolladores de Chrome para identificar qué elementos realizaban cambios de diseño en la página. Las regiones de cambio de diseño en Herramientas para desarrolladores visualiza los elementos que contribuyen a CLS destacando con un rectángulo azul cada vez que se produce un cambio de diseño.
Descubrieron que se producía un cambio de diseño después de que se cargaba la imagen hero en la parte superior del artículo para la primera vista.
En el ejemplo anterior, cuando la imagen termina de cargarse, el texto se desplaza hacia abajo (el cambio de posición se indica con la línea roja).
Mejora de CLS para las imágenes
En el caso de las imágenes de tamaño fijo, se pueden evitar los cambios de diseño especificando los atributos width y height en el elemento img y usando la propiedad aspect-ratio de CSS disponible en los navegadores modernos. Sin embargo, Yahoo! JAPAN News necesitaba admitir no solo navegadores modernos, sino también navegadores instalados en sistemas operativos relativamente antiguos, como iOS 9.
Usaron cuadros de relación de aspecto, un método que usa lenguaje de marcado para reservar el espacio en la página antes de que se cargue la imagen. Este método requiere conocer de antemano la relación de aspecto de la imagen, que se pudo obtener de la API de backend.
Resultados
La cantidad de URLs con bajo rendimiento en Search Console disminuyó un 98%, y el CLS en los datos de lab disminuyó de 0.2 a 0. Lo más importante es que, se realizaron varias mejoras correlacionadas en las métricas empresariales.
Cuando Yahoo! JAPAN News comparó las métricas de participación del usuario antes y después de la optimización de CLS, observó varias mejoras:
15,1 %
Más vistas de página por sesión
13,3%
Mayor duración de la sesión
1.72%*
Porcentaje de rebote más bajo (*puntos porcentuales)
Al mejorar la CLS y otras métricas de Métricas web esenciales, Yahoo! JAPAN News también tiene la etiqueta"Página rápida" en el menú contextual de Chrome para Android.
Los cambios de diseño son frustrantes y disuaden a los usuarios de leer más páginas, pero se pueden mejorar usando las herramientas adecuadas, identificando problemas y aplicando las prácticas recomendadas. Mejorar CLS es una oportunidad para optimizar tu negocio.
Para obtener más información, consulta la documentación de Yahoo! publicación del equipo de ingeniería de Japón.