El desafío de mejorar el rendimiento de un comercio electrónico no es algo trivial. Perder ventas por tener un sitio web lento es una de las pesadillas de cualquier negocio que tenga una tienda en línea. Por lo tanto, en VTEX, optimizar el rendimiento y el tiempo de carga de la página son la máxima prioridad.
Este artículo no es una receta de éxito para mejorar el rendimiento, sino un informe que muestra un camino audaz hacia la innovación. Una trayectoria que tuvo aciertos, desaciertos, pruebas y mejoras, pero que ya tiene un impacto diario en la vida de los clientes.
¿Por qué es importante el rendimiento para el comercio electrónico?
Inevitablemente, el rendimiento es uno de los factores críticos para el éxito de un comercio electrónico. Según Radware, el 20% de los consumidores abandonan sus carritos de compras debido a la velocidad del sitio web. Además de eso, el tiempo de carga de la página y su ranking de SEO están íntimamente relacionados. Por lo tanto, los desarrolladores de todo el mundo trabajan duro para optimizar sus sitios web.
Desde métodos simples hasta herramientas extremadamente complejas, hay muchas formas de lidiar con problemas de rendimiento: reducir el tamaño de la imagen, reducir la cantidad de solicitudes HTTP y almacenar el máximo de datos posible en el caché son excelentes formas de lidiar con esto. Pero en VTEX, decidimos ir más allá:
Rendimiento de las tiendas VTEX: ir más allá con Store Framework y React
Nuestros desarrolladores trabajan sin parar buscando formas disruptivas de lidiar con la necesidad de optimización del rendimiento. En el caso de Store Framework, nuestra solución para la implementación de tiendas, que se basa en componentes React, la respuesta encontrada fue Partial Hydration de React, un método innovador para lidiar con la velocidad de carga de componentes no estáticos, como un carrusel.
Si se pregunta qué es React, puedo explicarlo: React es una biblioteca de JavaScript creada por Facebook para el diseño front-end y es la base de muchos sitios web como Netflix, Walmart y Airbnb. En VTEX, es la base de nuestros componentes y también de Store Framework.
Ahora, imagine que accede a una página que tiene elementos interactivos como en el caso de un carrusel. Los carruseles, por ser elementos dinámicos, requieren que los datos asociados a estos sean descargados para que solo entonces podamos verlos. Pero no es posible descargar solo el código del carrusel, todo el contenido de la página debe descargarse, lo que causa lentitud. En este contexto surge Partial Hydration de React, que permite descargar solo el contenido necesario.
Hablando en términos técnicos: cuando se accede a una página creada usando React, el código JavaScript presente en cada componente debe ejecutarse para devolver un elemento HTML. Para hacerlo, realizamos el Server Side Rendering (SSR), proceso en el que los componentes de JavaScript y CSS en una página se renderizan de forma estática en el servidor en lugar de cargarse en el navegador (client-side). Este proceso reduce el tiempo de carga de la página, lo que permite al usuario tener acceso a ese contenido de forma casi instantánea.
El único problema de SSR es que solo devuelve componentes estáticos: el contenido se vuelve dinámico del lado del cliente a través de un proceso llamado Hydration. Sin embargo, esto sucede para todo el contenido de la página, es todo o nada: todo el código de la página se descarga y se ejecuta en el usuario, lo que provoca que se cargue lentamente.
Este es el problema que resuelve Partial Hydration. Con este método, podemos descargar y ejecutar solo las partes del código que son necesarias, en este caso, el contenido que ve el usuario, arriba del scroll de la página. Debajo del scroll, los componentes se cargan “a pedido”, es decir, solo cuando el usuario se desplaza hacia abajo se descargan y ejecutan. De esta forma, al descargar solo el código necesario, logramos reducir el tiempo de carga de la página.
En este ejemplo, el código del componente ProductSummary no se carga en un primer momento, cuando está debajo del scroll de la página. Solo cuando el usuario se desplaza hacia abajo, se descarga y ejecuta.
Un nuevo paradigma para los equipos de negocio y desarrollo
Lucas Bebber, desarrollador de VTEX que ha liderado el proyecto de rendimiento en el equipo de producto, señala que este cambio es un nuevo paradigma en el uso de React. Además, nos contó sobre la tecnología asociada con Partial Hydration:
¿Por qué React fue la tecnología elegida por VTEX para construir tiendas en Store Framework?
“React es muy popular en la industria tecnológica, pero no exactamente por razones de rendimiento. En VTEX, lo elegimos porque con esta tecnología somos capaces de estructurar muy bien las partes de nuestro código. Esto permite que se creen componentes independientes y que puedan actualizarse. Además, con el uso de Partial Hydration, encontramos lo mejor de ambos mundos: tener componentes React, manteniendo la renderización en el servidor y descargando apenas los componentes no estáticos.”
Si Partial Hydration es tan prominente, ¿por qué pocas empresas lo utilizan alrededor del mundo?
“Es posible que las compañías apliquen Partial Hydration para productos internos, pero como herramienta de plataforma es de hecho muy poco utilizado. Una de las razones de esto es que React, en sí, solo funciona con renderización, no cuida de la parte de descarga de assets, que también sería necesario para aprovechar mejor esta técnica. Por lo tanto, para realizar Partial Hydration, la compañía necesita tener un control total del stack: una plataforma que cuide tanto del back-end como del front-end. Y este es uno de nuestros diferenciales con VTEX IO.”
Los resultados de utilizar Store Framework y la tecnología React
En VTEX, la idea de utilizar Partial Hydration se formuló e implementó en los últimos 4 meses y todavía planeamos desarrollarla más. En el futuro, evolucionaremos para reducir aún más la necesidad de descarga y ejecución del lado del cliente: los componentes estáticos nunca necesitarán descargarse y ejecutarse. Además, hay otras mejoras de rendimiento en progreso, como la optimización de personalizaciones CSS.
Reconocemos que los procesos de mejoras de rendimiento están en progreso. Hemos trabajado y logrado resultados efectivos, pero somos conscientes de que esta jornada de mejora es interminable.
Los resultados son alentadores: hemos realizado una serie de pruebas para validar este método y mejorarlo, como en la tienda Al’s Sporting Goods.
Estos resultados nos dan la seguridad de que vamos en la dirección correcta y poco a poco los beneficios comienzan a materializarse: recientemente, hicimos un release sobre mejoras de rendimiento y, en los próximos meses, tenemos la intención de proporcionar a todos los desarrolladores de Store Framework más herramientas para garantizar el rendimiento que siempre hemos deseado.
