Creación de un panel de rendimiento web y optimización de JavaScript, los recursos y la página principal para lograr el éxito comercial.
Tokopedia es una de las empresas de comercio electrónico más grandes de Indonesia. Con más de 2.7 millones de redes de comercios a nivel nacional, más de 18 millones de fichas de productos y más de 50 millones de visitantes mensuales, el equipo web sabía que invertir en el rendimiento web era esencial. Con el desarrollo de una cultura centrada en el rendimiento, obtuvieron un aumento del 35% en las tasas de clics (CTR) y un aumento del 8% en las conversiones (CVR).
35%
Aumento en la CTR
8%
de aumento en el CVR
4 s
Mejora en el TTI
Destacar la oportunidad
El equipo web habló con su equipo de liderazgo sobre la importancia de invertir en el rendimiento web para mejorar la experiencia del usuario y la participación, y también mostró el impacto del rendimiento mediante el uso de APIs y patrones avanzados.
El enfoque que usaron
JavaScript y optimización de recursos
El bloqueo del procesamiento o el JavaScript de larga duración es una causa común de los problemas de rendimiento. El equipo tomó varias medidas para minimizar esto:
- Compilaste una biblioteca de controladores de secuencias de comandos para cargar de manera selectiva secuencias de comandos de terceros a fin de optimizar la ruta de procesamiento crítica.
- Se reemplazaron las bibliotecas más pesadas por otras más livianas.
- Se implementó la división de código y se optimizó para el contenido de la mitad superior de la página.
- Se implementó la carga adaptable, p.ej., cargar solo imágenes de alta calidad para dispositivos en redes rápidas y usar imágenes de menor calidad para dispositivos en redes lentas.
- Imágenes de la mitad inferior de la página de carga diferida
- Carga diferida de JavaScript no crítico
Optimización de la página principal
El equipo utilizó Svelte para crear una versión lite de la página principal para los visitantes nuevos, lo que garantiza una experiencia rápida en el sitio web. Esta versión también usó un service worker para almacenar en caché los elementos de la versión no lite en segundo plano.
Presupuesto y supervisión de rendimiento
El equipo creó un panel de supervisión del rendimiento con Lighthouse y otras herramientas para mejorar la calidad de las páginas web:
- Mide la calidad de la red, la supervisión de la infraestructura, el rendimiento del frontend y el rendimiento del servidor.
-
Usa una combinación de APIs de plataforma web (como la
API de Resource Timing
y el
encabezado
Server-Timing), la API de PageSpeed Insights (PSI) y el Informe sobre la experiencia del usuario de Chrome para supervisar las métricas de campo y lab. - Analiza imágenes de Lighthouse para identificar oportunidades de optimización de imágenes.
- Aplica un presupuesto del tamaño de un paquete durante la integración continua (CI). La ejecución de la CI falla si el tamaño del paquete supera el presupuesto.
Dado que es una empresa de comercio electrónico, la adquisición de usuarios es un aspecto fundamental de nuestro éxito. Reconocemos la importancia de la Web y, por lo tanto, nos apasiona invertir en todas las herramientas y funciones que les brindarán la mejor experiencia a nuestros usuarios.
Dendi Sunardi, gerente de Ingeniería, Plataforma Web, Tokopedia
Consulta la página Casos de éxito de Scale on Web para obtener más historias de éxito de India y el Sudeste Asiático.