Fecha de publicación: 28 de enero de 2025
En este caso de éxito, se describe cómo Ray-Ban mejoró sus métricas de LCP con la API de Speculation Rules para acelerar las navegaciones futuras de los usuarios mediante la renderización previa y cómo eso mejoró el rendimiento comercial de la plataforma de comercio electrónico de Ray-Ban. El éxito de esta medida animó a Ray Ban a buscar otras opciones para mejorar el rendimiento de manera similar, como hacer que las páginas sean aptas para bfcache.
Ray-Ban es una marca icónica de anteojos reconocida por sus estilos atemporales, como Aviator y Wayfarer, que combinan diseños clásicos con tendencias modernas. Como uno de los líderes reconocidos en anteojos, el canal de comercio electrónico de Ray-Ban desempeña un papel fundamental para garantizar la competitividad de la empresa, ya que atrae a más de 80 millones de visitantes únicos anualmente.
Como canal comercial clave, Ray-Ban continúa mejorando la experiencia del usuario de su plataforma de comercio electrónico y reconoce la importancia de las métricas web esenciales y su impacto directo en la experiencia del usuario de la plataforma.
Enfoque continuo de Ray-Ban para mejorar su recorrido crítico del usuario
Debido a la naturaleza de la arquitectura de la MPA (aplicación de varias páginas) que se usa en la plataforma de comercio electrónico de Ray-Ban, cada vez que un usuario interactúa con un vínculo o un botón que requiere una página nueva, el navegador envía una solicitud de navegación al servidor, que responde con una nueva página HTML. Esto plantea un desafío para Ray-Ban para mantener una experiencia de navegación fluida para los usuarios, especialmente en su página de detalles del producto (PDP), que se identificó como uno de los puntos de entrada más utilizados y es una parte fundamental del embudo de conversión.
Gracias a un rediseño que se completó recientemente, Ray-Ban observó una mejora en sus métricas de Métricas web esenciales. Sin embargo, aún hay margen de mejora, especialmente en los casos en los que se requiere el uso extensivo de bibliotecas externas para proporcionar una experiencia del usuario interactiva, lo que aumenta la métrica de página con más contenido (LCP) en comparación con otras páginas.
Por este motivo, Ray-Ban decidió implementar la carga especulativa para mejorar el recorrido clave del usuario en su sitio. El uso de reglas de especulación puede ser una de las soluciones más eficaces para reducir la velocidad de carga percibida de la página para navegaciones futuras, ya que carga y, luego, renderiza de forma previa el contenido de las páginas que el usuario visitaría a continuación.
Estrategia de renderización previa específica del dispositivo de Ray-Ban
Ray-Ban adoptó dos estrategias de renderización previa independientes para tener en cuenta las diferencias en el comportamiento y los recursos entre los dispositivos móviles y las computadoras de escritorio. Estas estrategias se diseñaron para maximizar el rendimiento sin comprometer las funciones existentes del sitio web ni la experiencia del usuario.
En computadoras, la renderización previa se ejecuta colocando el cursor sobre las tarjetas de productos en la página de fichas de productos (PLP), usando la configuración de prioridad "moderate" y pasando como selector una clase de identificación de las mismas tarjetas.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Dado que el evento hover no está disponible en dispositivos móviles, la renderización previa se ejecuta con un parámetro de configuración de prioridad immediate en las primeras cuatro tarjetas, que se encontraron que son las que más se hacen clic.
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
Resultados de la renderización previa
Las dos estrategias de renderización previa tuvieron un impacto significativo en las métricas de Core Web Vitals de las páginas de PDP de Ray-Ban y en las tendencias de los KPIs comerciales.
| Dispositivo | LCP | Cambio en el porcentaje de conversiones | Cambio en el porcentaje de salidas | Tasa de renderización previa | ||
|---|---|---|---|---|---|---|
| Antes | Después | Cambiar | ||||
| Dispositivos móviles | 4.69 s | 2.66 s | 43.28% | +101.47% | -13.25% | 29% |
| Computadora de escritorio | 3.03 s | 1.74 s | 42.57% | +156.16% | -13.18% | 50% |
Las métricas comerciales de los usuarios que navegaban por la PDP que se entregaba desde el servidor se compararon con las de los usuarios que navegaban por la PDP renderizada previamente. Después de recopilar datos del espacio de trabajo de seguimiento de Adobe para usuarios con navegadores que admiten la API (como Chrome), Ray-Ban reveló mejoras significativas que demuestran que los usuarios pueden navegar por el sitio con mayor fluidez. En el caso de los otros navegadores, en los que no se admite la renderización previa, Ray-Ban decidió recuperar los recursos de antemano en el momento del evento hover en computadoras de escritorio y para las primeras cuatro tarjetas del PLP en dispositivos móviles.
La implementación de la API de Speculation Rules para la renderización previa fue un cambio radical para la plataforma de comercio electrónico de Ray-Ban. Gracias a estas estrategias innovadoras, Ray-Ban logró una mejora del 43% en el LCP en computadoras de escritorio y dispositivos móviles, lo que mejoró significativamente la experiencia del usuario.
Esta optimización no solo proporcionó cargas de páginas casi instantáneas, sino que permitió muchos de los beneficios de la arquitectura de estilo SPA y, al mismo tiempo, mantuvo la arquitectura de MPA actual, especialmente en páginas críticas como la PDP.
Desde una perspectiva empresarial, las mejoras han sido transformadoras, como lo confirman las pruebas A/B:
- Aumento en los porcentajes de conversiones:
- Los porcentajes de conversiones móviles en las PDP aumentaron considerablemente un 101.47%.
- Los porcentajes de conversiones en computadoras de escritorio experimentaron un aumento aún más impresionante del 156.16%.
- Participación del usuario mejorada:
- La cantidad promedio de páginas vistas por sesión aumentó un 51.95% en dispositivos móviles y un 65.30% en computadoras de escritorio, lo que indica una navegación más fluida y un interés más sostenido de los usuarios. Nota: No consideramos las páginas renderizadas previamente que no se activaron como "vistas".
- Porcentajes de salidas reducidos:
- Las tasas de salida (porcentaje de usuarios que abandonan una página en relación con las vistas de página de esa página) disminuyeron un 13.25% en dispositivos móviles y un 13.18% en computadoras de escritorio, lo que demuestra una mayor retención durante los momentos de compra importantes.
Se expandió para ofrecer más navegaciones instantáneas de los usuarios
En vista de los excelentes resultados obtenidos con la renderización previa de los PDP, Ray-Ban decidió maximizar aún más el potencial de la API de Speculation Rules renderizando previamente los vínculos de PLP en el menú. Este enfoque permite mejorar significativamente la velocidad de carga (y, por lo tanto, el LCP) de los tipos de páginas de catálogo y de productos.
Si bien la renderización previa ayuda con las navegaciones futuras, Ray-Ban también observa una parte significativa de la navegación de ida y vuelta entre PLP y PDP. Dado que los resultados del experimento de renderización previa demuestran que una navegación del usuario optimizada se correlaciona directamente con buenas métricas comerciales, Ray-Ban también analizó la caché de atrás/adelante (bfcache).
La bfcache es una optimización del navegador que proporciona navegaciones instantáneas hacia adelante y hacia atrás, ya que mantiene una instantánea de las páginas aptas en el historial del navegador en la memoria y las restablece sin pasar por la red. Para garantizar que el PDP y el PLP de Ray-Ban sean aptos para bfcache, se realizaron varias actualizaciones rápidas:
- Inhabilita el evento
unloady restringe el acceso a las APIs de Bluetooth y accelerometer del dispositivo con un valor de encabezadoPermissions-Policydeunload=(), bluetooth=(), andaccelerometer=(). - Cierra las conexiones de RTC y IndexedDB en el evento
pagehide. - Evita el uso innecesario del encabezado de respuesta
Cache-Control: no-store.
Desbloquear la compatibilidad con la bfcache en los PLP en los que la navegación hacia atrás o hacia adelante representaba hasta el 40% del tráfico mientras que la tasa de hits de la bfcache era de 0 generó una mejora de casi el 30% en la LCP y del 83% en la CLS.
| Métricas | 13/10/2024 > 9/11/2024 | 24-11-2024 > 21-12-2024 | Delta |
|---|---|---|---|
| LCP | 3,725 ms | 2,674 ms | -28.21% |
| INP | 521 ms | 395 ms | -24.18% |
| CLS | 0.46 | 0.08 | -82.61% |
| Tasa de aciertos de la memoria caché atrás/adelante | 0.02% | 72.90% | +72.87pp |
Conclusión
Estos resultados ilustran el potencial de la renderización previa para mejorar significativamente el rendimiento de un sitio de comercio electrónico. Con la renderización previa de páginas según el comportamiento de los usuarios para navegaciones futuras, Ray-Ban no solo mejoró las métricas web esenciales, sino que también mejoró la participación de los usuarios y aumentó las ventas. Este beneficio fortaleció el compromiso de Ray-Ban de ofrecer una navegación fluida no solo para las navegaciones futuras, sino también para las navegaciones hacia atrás y hacia adelante que proporciona bfcache.
En este caso de éxito, se destaca cómo el uso de técnicas modernas de rendimiento web puede cerrar la brecha entre las métricas técnicas y los KPI comerciales, estableciendo un nuevo punto de referencia para la experiencia del usuario y el éxito del comercio electrónico.
Agradecemos especialmente a Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard y Jeremy Wagner por su contribución a este trabajo.