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

La historia de una startup que creó una experiencia web de primera clase.

Acerca de

Fundado en 2015, Truebil es un mercado en línea de la India que vende automóviles usados 100% certificados. Con más de 1.4 millones de usuarios activos mensuales, es una solución integral que incluye transferencia de títulos, seguros, préstamos y garantías de servicio. Los clientes potenciales pueden ver páginas de productos individuales con imágenes e informes de inspección detallados, y 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 aprendizaje automático, una función para agregar a favoritos, una función para compartir un automóvil y mucho más.

Desafío

Truebil es una startup eficiente con transacciones de alta frecuencia y alto valor, por lo que era fundamental elegir la plataforma adecuada para priorizarla y realizar inversiones en ella.

Truebil identificó los dispositivos móviles como su plataforma objetivo 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 ofrece costos de desarrollo más bajos, menor uso de datos y memoria, y costos de adquisición de clientes significativamente más bajos que la creación de una app para Android o iOS. Además, con la creación de una app web progresiva (PWA), Truebil pudo obtener todos los beneficios de la Web y los de iOS o Android.

Solución

Un equipo interno tardó cuatro meses en desarrollar Truebil Lite con React, Django y Preact (para la migración a producción). Establecieron principios rectores claros para la app web en función de los objetivos de los usuarios. La experiencia debía ser la siguiente:

• Rápido en la primera carga y en las navegaciones posteriores
• Confiable, independientemente de las limitaciones de red o dispositivo del usuario
• Atractivo, especialmente para pantallas móviles pequeñas, de modo que los usuarios quieran volver a él

Optimiza la primera carga y la navegación rápidas

Con Lighthouse como guía para las optimizaciones del rendimiento, el equipo adoptó una cultura centrada en el rendimiento mientras implementaba nuevas funciones. Truebil pudo mejorar significativamente la experiencia del usuario priorizando las métricas de primer procesamiento de imagen con contenido y tiempo de interactividad (TTI), y realizando optimizaciones para lograr cargas iniciales rápidas, visitas repetidas y una navegación fluida. El equipo logró esos resultados estableciendo presupuestos de rendimiento y usando una variedad de técnicas para alcanzarlos.

Establece presupuestos de rendimiento

Con una mentalidad centrada en el rendimiento, el equipo de Truebil optó por 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 el rendimiento de las apps web con renderización del cliente puede ser difícil, por lo que Truebil estableció presupuestos de rendimiento muy estrictos para garantizar que no se vea comprometida la velocidad, especialmente a medida que agregan más funciones.

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

Optimiza los paquetes de JavaScript

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

Para cargar de forma diferida los recursos no críticos, utilizaron sus componentes de carga diferida a nivel del framework para cargar fragmentos por debajo del pliegue.

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

Inserta el CSS crítico

Para mejorar aún más el FMP, el equipo usó Lighthouse para encontrar oportunidades y validar el impacto de las optimizaciones del rendimiento. Lighthouse indicó que reducir el CSS que bloquea la renderización tendría el mayor efecto, por lo que Truebil intercaló todo el CSS crítico y aplazó el CSS no crítico. Esta técnica redujo el FMP en alrededor de 2 segundos.

Evita 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 durante la carga de la página y resuelva previamente los nombres de dominio de origen cruzado, lo que permite una experiencia del usuario segura y rápida.

Prefetch dinámicamente la página siguiente

Al analizar sus datos, el equipo identificó los recorridos del usuario más comunes para los que podía 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 para la recuperación previa, usa webpack para agrupar el código JS de esos vínculos.

Optimiza imágenes y fuentes

Las imágenes son una parte fundamental de la experiencia y la credibilidad del producto de Truebil, y cada ficha de producto incluye hasta 40 imágenes. Para garantizar que las imágenes no bloqueen la carga de la página, el equipo decidió publicar todos sus recursos desde una CDN y usar imagemagick para la optimización de imágenes. También comprimieron con Gzip todos los recursos comprimibles, incluidas las 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 alternativa hasta que se carguen las fuentes externas.

Optimizaciones adicionales

Cuando la app estuvo lista, el equipo quiso reducir aún más el tamaño del paquete del proveedor 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 React). Este enfoque los ayudó a reducir el tamaño del paquete del proveedor de 82.3 KB a 51.2 KB.

Incorpora confiabilidad

Con un enfoque en el mercado indio, la gran mayoría de los usuarios de Truebil acceden a su producto en redes irregulares que a veces tienen un ancho de banda de 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 los usuarios pudieran confiar, uno que siempre funcione.

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

La interactividad y la velocidad de cambio del contenido de Truebil varían mucho. Para garantizar que todo su contenido sea reciente y confiable, el equipo de Truebil implementó el almacenamiento en caché de la API con una combinación de estrategias de prioridad de la red, prioridad de la caché y prioridad de la velocidad.

En el caso de las páginas estáticas, como la página de suscripciones, Truebil usa una estrategia de almacenamiento en caché primero para ir primero a la caché de su API de suscripciones y, luego, recurrir a la red.

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

En el caso de las páginas dinámicas que cambian con frecuencia, como las páginas de inicio, de filtro, de búsqueda y de ciudades, Truebil usa una estrategia de "lo más rápido primero" para elegir entre la red o la caché según lo que se cargue primero. Para garantizar que el contenido esté actualizado, la caché se actualiza cada vez que la respuesta de la red difiere de lo que hay en la caché.

Service workers para una experiencia sin conexión completa

Si bien una gran parte del contenido de Truebil es muy dinámico (se pueden agregar o comprar automóviles en cualquier momento), el equipo quería asegurarse de que sus usuarios tuvieran algo con lo que interactuar, incluso si tenían redes inestables o estaban completamente sin conexión.

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

Mejora la participación para que los usuarios regresen

Una primera experiencia atractiva

Dado que la mayoría de sus usuarios provienen de canales pagados, Truebil necesitaba complementar su app web de carga rápida con un producto que mostrara recomendaciones muy relevantes para aumentar las conversiones. Si bien el equipo usa un sistema de recomendación basado en un filtrado sofisticado para los usuarios existentes, su sistema no funciona para los usuarios que acceden por primera vez.

Para evitar que los usuarios nuevos tuvieran un inicio en frío, el equipo integró un sistema de recomendación a sus esfuerzos de marketing digital. Agregan detalles del producto, como el modelo, el precio y el tipo de carrocería del automóvil, a la URL de destino de un anuncio a través de un parámetro de UTM, que lee su sistema de recomendaciones 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 autos populares, que son una combinación de modelos populares, presupuestos populares y autos que fueron populares en las últimas semanas o días.

Una app web instalable

Después de crear una app web rápida y con todas las funciones, y con una experiencia del usuario atractiva, Truebil quería asegurarse de que sus usuarios siguieran regresando. Se dieron cuenta de que hacer que la app se pudiera instalar haría que las visitas repetidas fueran mucho más fluidas.

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 ejecutarlo en modo de pantalla completa. Como ya habían implementado un modo sin conexión, el equipo pudo agregar la nueva función con facilidad.

Para asegurarse de que sus usuarios no recibieran spam y aumentar la probabilidad de que instalaran la app, el equipo actualizó recientemente su estrategia para promocionar la instalación de la PWA, de modo que los mensajes de instalación aparezcan cuando realmente sean útiles para los diferentes tipos de usuarios. Truebil se decidió por una estrategia de tres partes:

• Mostrar mensajes cuando el usuario haya completado una acción o esté inactivo
• Mostrar instrucciones contextuales a los usuarios mayores de edad
• Mostrar un banner cuando el usuario haya pasado una cantidad de tiempo establecida en el sitio

Banners predeterminados en la finalización del proceso y en las páginas con mucho tráfico

El equipo decidió mostrar un banner de instalación cuando un usuario completa una tarea o se encuentra en páginas con mucho tráfico, pero está inactivo (es decir, no realiza ninguna acción, como desplazarse o completar un formulario). Este enfoque les permitió evitar interrumpir la actividad del usuario.

Instrucciones contextuales para usuarios mayores de edad

En el caso de los usuarios que habían interactuado con la app durante un tiempo, el equipo usó mensajes personalizados altamente contextuales para mostrar el valor de instalar la app en la pantalla principal:

Un banner personalizado para las instrucciones basadas en el tiempo

Por último, el equipo incorporó un banner no intrusivo con un diseño similar al de las notificaciones que se activa en eventos específicos, como cuando se abre una página de la ficha o después de que el usuario pasa una cantidad determinada de tiempo en la app:

Gracias a estas mejoras, las tasas de participación y conversión de Truebil crecieron significativamente con sesiones de usuario un 26% más largas y un 61% más de conversiones, lo que es significativo para su empresa dado el alto valor de transacción de cada conversión.

Para una startup con recursos limitados, elegir la plataforma adecuada puede ser fundamental para el éxito de la empresa. Pasar a una PWA centrada en la velocidad, la resiliencia y la participación nos permitió aumentar nuestra relación entre los ingresos y la inversión en marketing en un 80% gracias al aumento de las conversiones y el alcance sin fricciones de la Web.

Rakesh Raman, cofundador y jefe de Producto y Ciencia de Datos en Truebil