Cómo las optimizaciones de CLS aumentaron en Yahoo! Aumento del 15% en las vistas de página por sesión de Yahoo! Japan

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.

Informe de Métricas web esenciales de Google Search Console que muestra un CLS alto para la página de detalles del artículo.
Informe de Métricas web esenciales de Google Search Console
Lighthouse evita una auditoría de cambios de diseño grandes que muestra los elementos DOm que más contribuyen al CLS en la página.
La auditoría de Lighthouse "Evita los grandes cambios de diseño" muestra qué elementos contribuyen a la puntuación CLS y en qué medida.

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.

Página de detalles del artículo con rectángulos azules superpuestos sobre la imagen principal y el texto.
Cambios en el diseño visualizado.

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.

Capturas de pantalla de la página de detalles del artículo que muestran una comparación en paralelo antes y después del cambio de diseño.
Cambio de diseño en la página de detalles del artículo.

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.

Capturas de pantalla de la página de detalles del artículo que muestran una comparación en paralelo antes y después de la optimización de CLS.
Izquierda: Espacio en blanco reservado para la imagen en la parte superior de la página; derecha: La imagen hero cargada en el espacio reservado sin cambios de diseño.

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.

El informe de Search Console muestra una disminución significativa en las páginas con problemas de rendimiento.
Tras mejoras en Search Console.

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.

Etiqueta de página rápida en Chrome para Android.
La etiqueta "Página rápida" en 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.