El equipo analizó los datos de 10 millones de visitas a sus páginas de destino y descubrió una sólida correlación entre la métrica Largest Contentful Paint y el porcentaje de conversiones.
Groupe Renault es un fabricante multinacional francés de automóviles con presencia en más de 130 países. Para un grupo de la industria automotriz como Renault, los sitios de marca con buen rendimiento que generan más participación y conversiones de los usuarios implican más negocios. El objetivo de todos sus sitios de marcas es proporcionar la mejor experiencia del usuario a escala y, al mismo tiempo, mantener la flexibilidad del contenido y las funciones para los sitios localizados. En este contexto, la supervisión del rendimiento es un tema clave para el equipo de experiencia del cliente que está a cargo del desarrollo y el mantenimiento de la plataforma global.
Medición del impacto empresarial de las Métricas web esenciales
Medición en Google Analytics
En colaboración con cincuenta y cinco, su socio de datos global, Renault configuró la biblioteca de web-vitals, que permite enviar a Google Analytics todas las métricas de Métricas web de usuarios reales de manera que coincida de forma precisa con la manera en que Chrome las mide y las informa a otras herramientas de Google.
El siguiente análisis muestra un conjunto de datos capturado con estas herramientas durante cuatro meses entre diciembre de 2020 y marzo de 2021.
El LCP optimizado se correlaciona estrechamente con la participación de los usuarios y las métricas comerciales
Los equipos identificaron una correlación particularmente fuerte entre un Largest Contentful Paint (LCP) bajo y los porcentajes de rebote y de conversión favorables, como se muestra en la siguiente visualización.
El conjunto de datos capta más de 10 millones de visitas en 33 países durante cuatro meses y muestra cómo las mediciones del LCP más bajas se correlacionan con lo siguiente:
- Porcentajes de rebote más bajos
- Más conversiones (formularios de clientes potenciales completados)
Curiosamente, dado que el sitio web se ejecuta como una aplicación de una sola página (SPA), todas estas mediciones se capturan solo en las páginas de destino. Los datos muestran que vale la pena optimizar el sitio web hasta que el LCP alcance menos de 1 segundo. ¡Los sitios de la marca del grupo nunca se podrán optimizar demasiado!
Este conjunto de datos no solo muestra la correlación negativa entre el LCP y las métricas empresariales, sino que también destaca las discrepancias de rendimiento entre las páginas de destino con mejor rendimiento. En el contexto de este sitio web, obtener un LCP de menos de 1 segundo genera grandes aumentos en las conversiones y reducciones en el rebote.
Eja Rakotoarimanana, consultora, cincuenta y cinco
La mejora del LCP de 1 segundo puede producir una disminución de 14 puntos porcentuales (ppt) en el porcentaje de rebote y un aumento del 13% en las conversiones.
| Mejora de 1 segundo en el LCP | Resultado |
|---|---|
| LCP alrededor de 1 s | más de un 13% de CVR |
| LCP inferior a 1.6 s | Porcentaje de rebote de -14 pp |
| LCP superior a 1.6 s | Porcentaje de rebote de -5 pp |
El enfoque de Renault para optimizar las Métricas web esenciales a gran escala
Desde principios de 2020, en los 5 mercados europeos más importantes de la marca, la cantidad de visitantes que experimentan un LCP rápido (menos de 2.5 s) mejoró, en promedio, 22 ppt en los dominios de Renault (del 51% al 73%).
Así es como lo abordaron.
Una optimización central de la SPA
Desde el punto de vista de la plataforma, el rendimiento ha sido una prioridad durante años, y agregar las Métricas web esenciales como métricas clave fue un proceso fluido. Los equipos centrales configuraron una solución de supervisión integral (con Google Lighthouse y la API de Chrome UX Report) y establecieron una cultura de rendimiento en toda la organización. Existen varias estrategias para optimizar la aplicación de una sola página, incluidas las siguientes:
- Renderización del servidor (SSR) para garantizar un primer procesamiento de imagen con contenido (FCP) rápido
- División del código para entregar solo los fragmentos de JS y CSS necesarios para la página de destino (a fin de mejorar el LCP y el FID).
- CDN con un alto nivel de almacenamiento en caché de recursos (que incluye Lambda@Edge para ordenar y quitar parámetros de consulta innecesarios). Esto ayudó a evitar las desventajas de SSR (TFB más lento debido al procesamiento del servidor) y a entregar contenido más cerca del usuario final (para mejorar el TTFB y el LCP).
- Optimiza la compresión con brotli para reducir el tamaño del código.
- HTTP2 para habilitar la multiplexación de solicitudes y respuestas.
- Usa imágenes responsivas con compatibilidad con WebP y los atributos
srcsetysizespara mostrar a los usuarios el tamaño y formato de imagen más adecuados. - Carga diferida de imágenes, iframes y videos con
IntersectionObservery FPO (miniaturas pequeñas de 1 KB). - Quitar las secuencias de comandos de bloqueo y ajustar la transpilación a los objetivos del navegador para reducir el tamaño de los archivos JS (y evitar polyfills innecesarios)
- Reduce el tamaño del contenedor de Google Tag Manager para cargar secuencias de comandos de terceros solo donde y cuando sea necesario.
- Reduce la cantidad de fuentes personalizadas usando formatos woff/woff2 con intervalo Unicode y
font-display:swappara reducir el tamaño de los archivos de fuente y mostrar el texto lo antes posible, incluso si aún no están disponibles las fuentes personalizadas. - Precarga de hero images, que suelen ser elementos LCP.
El equipo sigue trabajando en futuras mejoras, como las siguientes:
- Envío del servidor para mejorar el FCP mediante la entrega de CSS más rápido. (En espera debido a la falta de compatibilidad con AWS y a la propuesta de baja.
- Hidratación progresiva para mejorar la FID.
- Compatibilidad con el módulo ES6 para ofrecer una experiencia más rápida con compilaciones de ES6 para navegadores modernos.
El enfoque de SPA puede ser beneficioso para el rendimiento, ya que no es necesario volver a cargar la página completa cuando los usuarios navegan por las páginas. Dicho esto, las metodologías actuales de medición de Métricas web esenciales en SPA pueden percibirse como una desventaja, ya que no se miden las transiciones de ruta; por lo tanto, no se tienen en cuenta las cargas de páginas comparativamente más rápidas en una sesión debido al almacenamiento en caché de la IU. También dificulta la comparación de las Métricas web esenciales con un sitio web de la competencia de una aplicación de varias páginas donde una caché semicaliente reduciría las mediciones en cada página que un usuario exploraría durante una sesión. Consulte las Preguntas frecuentes de la SPA de Métricas web para obtener más detalles.
Estas son limitaciones conocidas que están investigando los equipos de productos de Chrome. Ya se envió una actualización de la métrica CLS para mejorar la medición en las SPA.
El rendimiento requiere una supervisión constante, ya que varios equipos técnicos pueden afectarlo. A pesar de las limitaciones en la forma de medirlas en las SPA, las Métricas web esenciales nos permiten hacer un seguimiento del impacto de las acciones que realizan nuestros equipos. Esperamos que pronto se tomen en cuenta las transiciones de rutas.
Cedric Bazureau, líder tecnológico, Renault
Lineamientos locales que promocionan la optimización del rendimiento como una responsabilidad compartida
El rendimiento se comunica como una responsabilidad global (central) y local. Los equipos crearon una serie de prácticas recomendadas que los propietarios de contenido locales deben seguir. A continuación, se incluyen algunos ejemplos de estos lineamientos:
- Optimiza el contenedor local de Google Tag Manager para mejorar el rendimiento del sitio. Por ejemplo, activa condicionalmente ciertas etiquetas.
- Para limitar el tamaño del contenido de video, comprímelo con herramientas internas o alójalo en una plataforma externa (como YouTube).
- Evita subir fotos a través de Google Tag Manager.
Comprender en profundidad nuestro rendimiento digital es fundamental para garantizar una optimización continua de nuestros sitios de marcas. El enfoque de nuestro equipo de experiencia del cliente es proporcionar una plataforma global que tenga un impacto positivo en los resultados comerciales de los equipos locales y, al mismo tiempo, empodere a estos equipos con lineamientos y prácticas recomendadas para mantener este rendimiento de alto nivel.
Alexandre Perruche, director de Rendimiento, Renault
Para concluir, el rendimiento del sitio web siempre ha sido una prioridad en Renault, y la plataforma de su sitio web se optimiza continuamente. La medición de las Métricas web esenciales junto con las métricas empresariales les permitió promocionar este tema como una responsabilidad compartida a nivel global, y los lineamientos locales brindan a los equipos la capacidad de participar en esta iniciativa beneficiosa.