Cómo Truebil convirtió a la Web en su canal de crecimiento

La historia de una startup sobre la creación de una experiencia web de primer nivel

Información

Fundado en 2015, Truebil es un mercado en línea indio que vende automóviles usados 100% certificados. Con más de 1.4 millones de usuarios activos por mes, es una solución integral que incluye transferencia de título, seguros, préstamos y garantías de servicio. Los clientes potenciales pueden ver las páginas de productos individuales con imágenes e informes de inspección detallados, además de obtener evaluaciones de vehículos con las funciones “Comparar” y “Truescore” del sitio. Truebil diferencia su producto con funciones enriquecidas, como recomendaciones personalizadas basadas en el aprendizaje automático, una función para agregar a favoritos, la función para compartir un automóvil y mucho más.

Desafío

Truebil es una startup eficiente con transacciones de bajo valor y baja frecuencia, por lo que fue fundamental elegir la plataforma adecuada para priorizar e invertir.

Truebil identificó a los dispositivos móviles como su plataforma de segmentación y eligió la Web para su primera app, Truebil Lite, debido a la facilidad de descubrimiento y la baja fricción de la Web. La tecnología web proporciona costos de desarrollo más bajos, menos uso de datos y memoria, y costos de adquisición de clientes significativamente menores que cuando se compila una app para iOS o Android. Además, mediante la compilación de una app web progresiva (AWP), Truebil podría obtener todos los beneficios de la Web y los de iOS y Android.

Solución

Un equipo interno tardó cuatro meses en desarrollar Truebil Lite con React, Django y Preact (para la migración de producción). Establecen principios rectores claros para la aplicación web en función de los objetivos del usuario. La experiencia tenía que ser:

• Rápido en la primera carga y en las navegaciones posteriores
• Es confiable, independientemente de las restricciones de la red o del dispositivo del usuario.
• Genera participación, en especial para pantallas de dispositivos móviles pequeñas, por lo que los usuarios querrán volver a usarla.

Optimización para una primera carga y navegaciones rápidas

Con el uso de Lighthouse para guiar las optimizaciones de rendimiento, el equipo adoptó una cultura centrada en el rendimiento mientras implementaba funciones nuevas. Truebil pudo mejorar significativamente la experiencia del usuario priorizando las métricas First Contentful Paint y Time to Interactive (TTI) y realizando optimizaciones para lograr primeras cargas rápidas, visitas repetidas y una navegación fluida. El equipo logró esos resultados fijando presupuestos de rendimiento y usando una variedad de técnicas para lograrlos.

Establece presupuestos de rendimiento

Con una mentalidad centrada en el rendimiento, el equipo de Truebil eligió diseñar su experiencia como una app de una sola página con renderización del servidor para la primera carga y renderización del cliente para las cargas posteriores. Mantener las aplicaciones web con buen rendimiento de renderización del cliente puede ser difícil, por lo que Truebil establece presupuestos de rendimiento muy estrictos para garantizar que no comprometan la velocidad, especialmente a medida que agregan más funciones.

El equipo estableció presupuestos estrictos basados en hitos para TTI con el objetivo de mantenerlo por debajo de los cinco segundos. Para cumplir ese objetivo, se aseguró de que ninguna compilación superara el tamaño de paquete de JavaScript de 250 KB, mantuvo una verificación constante de los tamaños de las imágenes y realizó un seguimiento continuo de la puntuación de rendimiento de Lighthouse de la app.

Optimiza los paquetes de JavaScript

El equipo comenzó por los aspectos básicos usando el patrón PRPL para almacenar previamente en caché y optimizar las cargas útiles de JavaScript, y pasando a HTTP/2 para entregar paquetes críticos de JavaScript.

Para cargar de forma diferida recursos que no eran críticos, utilizaron sus componentes de carga diferida a nivel del framework para cargar fragmentos de la mitad inferior de la página.

Para quitar los cuellos de botella de los paquetes de JavaScript, el equipo redujo las cargas útiles mediante la división de código. Usaron la fragmentación basada en componentes y rutas para reducir el tamaño del paquete principal y mejorar su tiempo de carga en un 44%, con una disminución del TTI de 6 a alrededor de 5 segundos y de First Meaningful Paint (FMP) de 4.1 segundos a 3.6 segundos.

Intercala el CSS crítico

Para mejorar aún más el FMP, el equipo utilizó Lighthouse para buscar oportunidades y validar el impacto de las optimizaciones de rendimiento. Lighthouse indicó que la reducción del CSS que bloqueaba la renderización tendría el mayor efecto, por lo que Truebil integró todas las CSS críticas y las CSS no críticas diferidas. Esta técnica redujo FMP en aproximadamente 2 segundos.

Evita los viajes de ida y vuelta costosos y múltiples a cualquier origen

Para mitigar la sobrecarga de DNS y TLS, Truebil usó <link rel="preconnect"> y <link rel="dns-prefetch">. Este enfoque hace que el navegador complete el protocolo de enlace TLS lo antes posible cuando se cargue la página y resuelva previamente los nombres de dominio de origen cruzado, lo que permite una experiencia del usuario segura y ágil.

Carga previa dinámica de la página siguiente

Al analizar sus datos, el equipo identificó los recorridos de usuario más comunes para los que podían realizar optimizaciones. En estos casos, la app descarga de forma dinámica el recurso de la página siguiente con <link rel=prefetch> para garantizar una navegación fluida para los usuarios. Si bien el equipo identifica manualmente los vínculos que se deben cargar previamente, usa webpack para empaquetar el JS de esos vínculos.

Optimiza imágenes y fuentes

Las imágenes son una parte fundamental de la experiencia y la credibilidad de Truebil, ya que cada ficha de producto incluye hasta 40 imágenes. Para asegurarse de que las imágenes no bloqueen la carga de la página, el equipo decidió entregar todos sus recursos desde una CDN y usar imagemagick para la optimización de las imágenes. También comprimieron con Gzip todos los recursos que se pueden comprimir, incluidas imágenes, JavaScript y CSS, para reducir aún más el tiempo de carga.

Para evitar un destello de texto invisible y mantener el tiempo de carga lo más bajo posible, Truebil configuró su CSS para usar fuentes del sistema como resguardo hasta que se hayan cargado fuentes externas.

Más optimizaciones

Cuando la app estaba lista, el equipo quiso reducir aún más el tamaño del paquete de proveedores y el tiempo de ejecución de JavaScript, por lo que cambiaron su app de React a Preact en producción. (Obtén más información en la colección Reaccionar). Este enfoque los ayudó a reducir el tamaño del paquete de proveedores de 82.3 KB a 51.2 KB.

Fiabilidad incorporada

Con un enfoque en el mercado indio, una gran mayoría de los usuarios de Truebil acceden a su producto a través de redes irregulares que, a veces, usan anchos de banda tan bajos como 2G. Por lo tanto, crear una experiencia resiliente era fundamental no solo para mejorar el rendimiento en condiciones de red limitadas, sino también para ofrecer un producto en el que sus usuarios pudieran confiar, uno que siempre funciona.

Una estrategia híbrida de almacenamiento en caché para una carga confiable

La interactividad y la velocidad de cambio del contenido de Truebil varían mucho. Para garantizar que todo su contenido esté actualizado y confiable, el equipo de Truebil implementó el almacenamiento en caché de APIs con una combinación de estrategias centradas en la red, en la caché y en priorizar la más rápida.

En el caso de las páginas estáticas, como la de suscripciones, Truebil usa una estrategia en la que se prioriza la caché para ir primero a la caché de la API de suscripción y recurrir a la red.

En el caso de las páginas con contenido dinámico que rara vez cambia, como las fichas de productos o las páginas de detalles, Truebil usa una estrategia centrada en la red para que el navegador primero verifique la red en busca de contenido antes de volver a la caché de la API si la red no está disponible.

Además, en el caso de las páginas dinámicas que cambian con frecuencia, como la página principal, el filtro, la búsqueda y las páginas de ciudades, Truebil utiliza una estrategia más rápida para elegir entre la red o la caché, según lo que ocurra primero. Para garantizar que el contenido esté actualizado, la caché se actualizará cada vez que la respuesta de red sea diferente de la que está en la caché.

Trabajadores de servicio para una experiencia completa sin conexión

Si bien gran parte del contenido de Truebil es muy dinámico (los automóviles se pueden agregar o comprar en cualquier momento), el equipo quería asegurarse de que los usuarios tuvieran algún contenido con el que interactuar, incluso si pasaban por redes irregulares o no tenían conexión.

Con los service worker, el equipo pudo almacenar en caché los datos estáticos y los dinámicos con los que ya había interactuado el usuario para que pudieran verlos sin conexión. Para asegurarse de que los usuarios sepan que el contenido podría cambiar cuando vuelvan a estar en línea, el equipo cambió la IU a escala de grises para indicar el modo sin conexión. Navegar por las páginas de productos es una parte fundamental del recorrido del usuario de Truebil. Los usuarios que visitaron la AWP al menos una vez pueden explorar fichas y páginas de productos que visitaron antes, pero no podrán ver ninguna actualización de la ficha o el producto.

Mejorar la participación para que los usuarios regresen

Una experiencia inicial atractiva

Dado que la mayoría de sus usuarios provenían de canales pagados, Truebil necesitaba complementar su aplicación web de carga rápida con un producto que muestre recomendaciones muy relevantes para aumentar las conversiones. Si bien el equipo utiliza un sistema de recomendación basado en filtros sofisticados para los usuarios existentes, su sistema no funciona para los usuarios que acceden por primera vez.

Para evitar que los usuarios nuevos empezaran en frío, el equipo integró un sistema de recomendaciones aprovechando sus iniciativas de marketing digital. Agregan detalles del producto, como el modelo del automóvil, el precio y el tipo de carrocería, a la URL de destino de un anuncio a través de un parámetro de UTM, que su sistema de recomendaciones lee y se refleja en los productos que se muestran. En caso de que el sistema no lea esos detalles en la URL, recurre a los automóviles populares, que es una combinación de modelos y presupuestos populares, y automóviles que han sido populares en las últimas semanas o días.

Una app web instalable

Después de crear una app web rápida, con todas las funciones y una experiencia del usuario atractiva, Truebil quería asegurarse de que sus usuarios siguieran regresando. Los miembros del equipo notaron que si la app fuera instalable, las visitas repetidas mejorarían mucho más.

El equipo implementó la función Agregar a la pantalla principal para convertir su producto en una app web progresiva (AWP) completa. Este enfoque permitió a los usuarios agregar Truebil Lite a la pantalla principal y, luego, iniciarlo en el modo de pantalla completa. Y como ya habían implementado un modo sin conexión, el equipo pudo agregar fácilmente la nueva función.

Para garantizar que sus usuarios no reciban spam y aumentar la probabilidad de que instalen la app, el equipo recientemente actualizó su estrategia para promocionar la instalación de AWP para que las solicitudes de instalación aparezcan cuando realmente sean útiles para diferentes tipos de usuarios. Truebil estableció una estrategia de tres partes:

• Muestra mensajes cuando el usuario haya completado una acción o esté inactivo.
• Muestra indicaciones contextuales a usuarios adultos.
• Mostrar un banner cuando el usuario haya permanecido un período determinado en el sitio.

Banners predeterminados cuando se complete el proceso y en páginas con mucho tráfico

El equipo decidió mostrar un banner de instalación cuando un usuario complete una tarea o esté en páginas de alto tráfico pero inactivo (es decir, sin realizar ninguna acción, como desplazarse o completar un formulario). Este enfoque les permitió evitar interrumpir la actividad del usuario.

Mensajes contextuales para usuarios adultos

En el caso de los usuarios que habían interactuado con la aplicación por un tiempo, el equipo utilizó mensajes personalizados altamente contextuales para mostrar el valor de instalar la aplicación en la pantalla de inicio:

Un banner personalizado para mensajes basados en el tiempo

Por último, el equipo creó un banner no invasivo con un diseño similar a una notificación que se activa en eventos específicos, como abrir una página de la ficha o después de que el usuario haya pasado un tiempo determinado en la app:

Gracias a estas mejoras, los porcentajes de conversiones y participación de Truebil aumentaron significativamente, con sesiones de usuario más largas y un 61% más de conversiones, lo cual es significativo para su empresa debido al alto valor de transacción de cada conversión.

Para una startup con recursos limitados, la elección de la plataforma adecuada puede ser fundamental para el éxito del negocio. Pasar a una AWP enfocada en la velocidad, la resiliencia y la participación nos permitió aumentar nuestra inversión de ingresos en marketing en un 80% gracias al aumento de las conversiones y al alcance sin inconvenientes de la Web.

Rakesh Raman, cofundador y director de Ciencia de Productos y Datos de Truebil