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

La historia de una startup que creó una experiencia web de primer nivel.

Harleen Batra
Harleen Batra

Acerca de

Truebil, fundado en 2015, 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 la 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 y los informes de inspección detallados, y obtener evaluaciones de los 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, una función para compartir un automóvil y mucho más.

Desafío

Truebil es una startup ágil con transacciones de alta frecuencia y alto valor, por lo que era fundamental elegir la plataforma adecuada para priorizar y en la que 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 su fácil descubrimiento y baja fricción. 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 más bajos que la compilación de una app para iOS o Android. Además, con la compilación de una app web progresiva (PWA), Truebil podría obtener todas las ventajas de la Web y los beneficios 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:

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

Optimiza para que la primera carga y las navegaciones sean rápidas

Con Lighthouse como guía para las optimizaciones de rendimiento, el equipo adoptó una cultura que prioriza el rendimiento mientras implementaba nuevas funciones. Truebil pudo mejorar significativamente la experiencia del usuario dando prioridad a las métricas First Contentful Paint y Time to Interactive (TTI), y optimizando para obtener cargas 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 lograrlos.

Establece presupuestos de rendimiento

Con una mentalidad que prioriza 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 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 comprometa la velocidad, en especial a medida que se agregan más funciones.

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

Cómo optimizar los paquetes de JavaScript

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

Para cargar de forma diferida recursos no críticos, usaron sus componentes de carga diferida a nivel del framework para cargar fragmentos debajo 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 el 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 segundos a alrededor de 5 segundos y del primer procesamiento de imagen significativo (FMP) de 4.1 segundos a 3.6 segundos.

Capturas de pantalla de las Herramientas para desarrolladores de Chrome que muestran el tamaño de compilación de Truebil Lite antes y después de la división de código.
Impacto de reducir el tamaño del fragmento.

CSS crítico intercalado

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

Capturas de pantalla de las Herramientas para desarrolladores de Chrome que muestran el tiempo de Truebil Lite hasta la primera pintura significativa antes y después de intercalar CSS.
Impacto de intercalar CSS crítico.

Evitar varios viajes de ida y vuelta costosos 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 carga la página y resuelva previamente los nombres de dominio de origen cruzado, lo que permite una experiencia del usuario segura y ágil.

Capturas de pantalla de Herramientas para desarrolladores de Chrome que muestran el efecto de rel=preconnect.
Impacto de agregar <link rel=preconnect>.

Cómo recuperar de forma previa la siguiente página de forma dinámica

Al analizar sus datos, el equipo identificó los recorridos de los usuarios más comunes para los que podrí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. Mientras el equipo identifica manualmente los vínculos para la precarga, usa webpack para agrupar el JS de esos vínculos.

Capturas de pantalla de la app de Truebil Lit y Chrome DevTools que muestran que no se necesitan solicitudes de red en las navegaciones comunes porque los recursos ya se recuperaron previamente.
El efecto de la precarga de recursos para recorridos comunes de los usuarios.

Optimiza las imágenes y las fuentes

Las imágenes son una parte fundamental de la experiencia y la credibilidad de los productos de Truebil, ya que 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 flash de texto invisible y mantener el tiempo de carga lo más bajo posible, Truebil configuró su CSS para usar las fuentes del sistema como resguardo hasta que se carguen las fuentes externas.

Otras optimizaciones

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 cambió 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.

Cómo incorporar la 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 anchos de banda tan bajos como 2G. Por lo tanto, crear una experiencia resiliente fue 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 funcione.

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

La interactividad y el ritmo de cambio del contenido de Truebil varían mucho. Para garantizar que todo su contenido sea actualizado y confiable, el equipo de Truebil implementó la caché de la API con una combinación de estrategias que priorizan la red, la caché y 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é en primer lugar para ir primero a la caché de la 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 fichas de productos o las páginas de detalles, Truebil usa una estrategia de prioridad de la red para que el navegador primero verifique el contenido de la red antes de recurrir a la caché de la API si la red no está disponible.

Y para las páginas dinámicas que cambian con frecuencia, como las páginas principales, de filtros, de búsqueda y de ciudades, Truebil usa una estrategia de prioridad para elegir entre la red o la caché según lo que aparezca 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 (los automóviles se pueden agregar o comprar en cualquier momento), el equipo quería asegurarse de que sus usuarios tuvieran algún contenido con el que interactuar, incluso si tenían redes irregulares o estaban completamente sin conexión.

Con los servicios en primer plano, el equipo pudo almacenar en caché los datos estáticos y los datos dinámicos con los que un 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 conectarse, el equipo cambió la IU a escala de grises para indicar el modo sin conexión. La navegación 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 las fichas y las páginas de productos que visitaron antes, pero no podrán ver ninguna actualización de la ficha o el producto.

Captura de pantalla de la app de Truebil Lite en modo sin conexión.
Truebil Lite en modo sin conexión.

Mejora la participación para que los usuarios vuelvan

Una primera experiencia atractiva

Dado que la mayoría de sus usuarios provienen de canales pagados, Truebil necesitaba complementar su aplicación 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 que accedan por primera vez tengan un inicio en frío, el equipo integró un sistema de recomendación con sus iniciativas de marketing digital. Agregan detalles de productos, como el modelo de 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 lee su sistema de recomendación y se refleja en los productos que se muestran. En caso de que el sistema no lea esos detalles en la URL, recurrirá a los automóviles populares, que son una combinación de modelos populares, presupuestos populares y automóviles 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 con una experiencia del usuario atractiva, Truebil quería asegurarse de que sus usuarios regresaran. Se dieron cuenta de que hacer que la app se pudiera instalar facilitaría mucho las visitas repetidas.

El equipo implementó la función Agregar a la pantalla principal para que su producto sea una app web progresiva (AWP) completa. Este enfoque permitió a los usuarios agregar Truebil Lite a la pantalla principal y, luego, iniciarlo en modo de pantalla completa. Y, 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 promover la instalación de la AWP, de modo que los mensajes de instalación aparezcan cuando realmente sean útiles para diferentes tipos de usuarios. Truebil se decidió por una estrategia de tres partes:

  • Muestra instrucciones cuando el usuario completó una acción o está inactivo.
  • Muestra instrucciones contextuales a los usuarios mayores de edad.
  • Muestra un banner cuando el usuario haya pasado una cantidad determinada de tiempo en el sitio.

Banners predeterminados al completar el proceso y en páginas de alto tráfico

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

Capturas de pantalla del banner de instalación de Truebil Lite.

Instrucciones contextuales para usuarios mayores de edad

Para los usuarios que interactuaron 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:

Capturas de pantalla de los mensajes de instalación contextuales de Truebil Lite para usuarios mayores de edad.

Un banner personalizado para mensajes basados en el tiempo

Por último, el equipo integró un banner no intrusivo con un diseño similar a una notificación que se activa en eventos específicos, como la apertura de una página de ficha o después de que el usuario pasa una cantidad determinada de tiempo en la app:

Una captura de pantalla del banner de solicitud de instalación basada en el tiempo de Truebil Lite.

Gracias a estas mejoras, los porcentajes de conversiones y de participación de Truebil aumentaron significativamente, con sesiones de usuario un 26% más largas y un 61% más de conversiones, lo que es significativo para su empresa debido al 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. Cambiar a una AWP centrada en la velocidad, la resiliencia y la participación nos permitió aumentar nuestra 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 director de Producto y Ciencia de Datos en Truebil

44%

Mejora en el tiempo de carga

26%

Sesiones de usuario más largas

61%

Aumento en las conversiones

80%

Aumento de la relación entre los ingresos y la inversión en marketing