Eleva tu tienda al siguiente nivel: consejos para optimizar el rendimiento con VTEX IO

Luego de migrar el e-commerce a VTEX IO, es necesario mantener su performance. Por lo tanto, es necesario adoptar algunas prácticas para que el sitio web continúe con un buen desempeño.

En este contenido, te brindaremos algunos consejos prácticos para optimizar el rendimiento de tu tienda con VTEX IO. ¡Compruébalo!

¿Qué es VTEX IO?

VTEX IO no es más que una plataforma SaaS de VTEX. Es una herramienta que permite el desarrollo en la nube del sistema de tu tienda. Gracias a esta infraestructura se garantiza una excelente experiencia de usuario y, sobre todo, la exitosa integración del e-commerce.

Es decir, con una sola aplicación es posible prevenir problemas con las actualizaciones, desarrollar el sitio web con más autonomía y practicidad, además de ganar agilidad en la integración.

Todas estas ventajas se pueden convertir en beneficios en ventas e ingresos comerciales. Por esta razón, es posible ver a VTEX IO como una inversión de gran retorno para los e-commerces.

¿Por qué es importante la optimización del rendimiento de la tienda?

Tener un sitio web optimizado es fundamental para el éxito de la tienda y a continuación podrás encontrar las principales razones para empezar a optimizar tu e-commerce ahora mismo:

  • Mejora la conversión: Un sitio web optimizado y de carga rápida proporciona al usuario una experiencia de compra fluida, sin fricciones ni impedimentos para completar la compra, aumentando así las posibilidades de conversión en el e-commerce.
  • Beneficios para la estrategia SEO: Los sitios web optimizados generalmente logran mejores rankings en los motores de búsqueda, aumentando así el tráfico orgánico a la tienda.
  • Aumenta tu competitividad: Un sitio web bien optimizado ciertamente destaca entre los competidores, permitiendo atraer más y retener clientes en el comercio digital.
  • Optimiza la experiencia del usuario: Tener un sitio web lento, donde las páginas tardan mucho en cargar o son difíciles de navegar, seguramente causará frustración en tus clientes, provocando que abandonen el sitio web, aumentando así la tasa de rebote. Prioriza tener un sitio web rápido y accesible para garantizar aún más ventas y una experiencia satisfactoria para tus clientes.

Cómo optimizar el rendimiento de la tienda con VTEX IO

Antes de ponernos manos a la obra y aplicar todos los consejos de optimización, es necesario analizar la tienda online tal como está hoy, es decir, examinar la estructura de bloques, los componentes personalizados, la carga de imágenes, la carga de fuentes, etc.

Posteriormente, en base a los análisis recopilados, podemos comenzar el proceso de ajustes y mejoras.

A continuación mostraremos el orden utilizado para investigar y realizar cambios según las necesidades de la tienda. Sin embargo, no existe una regla, porque cada e-commerce tiene estructuras y necesidades diferentes.

1 – Analizar la configuración de performance en Admin VTEX 

Existen varias opciones de configuración de performance en el Admin de VTEX (consulta los detalles de las opciones en la documentación aquí). Estas opciones pueden ayudar o perjudicar el rendimiento de tu tienda, por lo que es importante probarlas cuidadosamente antes de cambiar estas configuraciones.

Además, si bien existe una particularidad en cada tienda virtual, es posible establecer alternativas que sean necesarias para realizar un proceso adecuado. Los principales son:

Optimización de OrderForm (de: desactivado / a: activado)

Si la tienda ya utiliza los bloques minicart.v2, add-to-cart-button y checkout-cart, no es necesario cargar los OrderFormProvides heredados. Por lo tanto, podemos habilitar esta opción para no cargar la versión heredada de OrderForm. Si la tienda todavía usa minicart (v1) y buy-button (v1), aún es necesario cargar el OrderForm heredado. Verifica antes de cambiar esta opción.

Aquí puedes consultar más sobre la documentación de OrderForm.

Optimización de CSS crítico (de: desactivado / a: activado)

Para evitar afectar el tiempo de carga inicial del primer pliegue, la optimización de CSS crítico identifica los bloques de código esenciales y necesarios, mostrando lo que queda en la página de forma asincrónica.

Habilita la carga de forma lenta en la mitad inferior de la página (de: desactivado / a: activado)

Debajo del segundo pliegue de la tienda, el JS de los componentes son cargados lentamente.

2 – ¿Tu tienda utiliza el bloque __fold__?

El conjunto __fold__ es responsable de definir qué componentes del sitio web se cargarán primero para la representación y cuáles se cargarán junto con el desplazamiento del usuario. Esta funcionalidad es muy importante para mejorar el rendimiento de la página.

Ejemplo de cómo utilizar:

“store.home”: {

“blocks”: [

“carousel#home”,

“shelf#home”,

“info-card#home”,

“__fold__”,

“rich-text#question”,

“rich-text#link”,

“newsletter”.

En este ejemplo, la primera renderización se realizará hasta el bloque “info-card#home” y el resto de los componentes debajo de “__fold__” solo se cargarán cuando el usuario se desplace por la página.

Aquí puedes consultar más sobre la documentación sobre “Using the fold blocks”.

3 – Analizar la carga de imágenes

Cuando hablamos de rendimiento, uno de los principales detractores son sin duda las imágenes. Si están mal comprimidos y tienen un tamaño incorrecto, pueden provocar caídas de rendimiento en el escaparate virtual. Entonces, ¿qué es necesario analizar?

Hay tres elementos principales a analizar a la hora de cargar imágenes, y son:

  • Peso de la imagen
  • Anchura y altura
  • Lazy Loading

A continuación, consulta los detalles de cada uno:

Peso de la imagen

Este es el principal detractor cuando miramos cómo funciona. Este factor, combinado con una mala adaptación, da como resultado una pérdida total de carga de las páginas, especialmente para usuarios con una conexión lenta (3G).

Lo ideal es tener imágenes lo más desarrolladas posible, preferiblemente por debajo de los 100kb. Cuanto más optimizado esté, más rápido se cargará.

Hay varios sitios web que te ayudarán a conseguir lo que deseas, uno muy recomendable es Tiny PNG.

Anchura y altura

Hay dos puntos que debemos analizar con respecto al ancho y alto de una imagen. El primero de ellos es identificar si el tamaño es el que realmente se muestra al usuario.

Por ejemplo: tengo un banner en el sitio web con dimensiones 1700px x 500px, pero el tamaño total de 1500px x 300px solo se muestra al usuario, es decir, no es necesario que la imagen tenga dimensiones de 1700px x 500px.

Esto afecta directamente el rendimiento, ya que una imagen que mide 1700px x 500px probablemente tendrá un peso mayor que una que mida 1500px x 300px.

Por lo tanto, las piezas con ancho y alto incorrectos también afectan la métrica de “Mejores prácticas”, precisamente porque están renderizando una cantidad y originalmente tienen otra.

En segundo lugar, es necesario definir la métrica para reducir los cambios de diseño en la pantalla del usuario. Después de todo, las dimensiones definidas en las imágenes mejoran el CLS de la tienda.

Para obtener más detalles sobre las dimensiones, accede aquí.

Lazy Loading

Presta mucha atención al aplicar carga diferida a imágenes, especialmente aquellas en el primer pliegue.

Estos deben cargarse inmediatamente, así que evita utilizar la carga diferida. Cambia la propiedad loading=”lazy” a loading=”eager”. De esta forma, la pieza se cargará inmediatamente.

Para modelos LCP, como un banner grande en el primer pliegue, utiliza la propiedad fetchpriority=”high” para que se carguen rápidamente y con prioridad.

Una observación muy importante es analizar el impacto al utilizar esta propiedad.

¿UTILIZAS EL BLOQUE DE IMAGEN EN TU PROYECTO?

Aunque la documentación no muestra todos los dominios que puedes enviar como props al grupo “imagen”, al analizar el código en Github, puedes identificar qué props como loading y preload también se aceptan, es decir, reconocer tus bloques de imágenes y utiliza estos caracteres para mejorar su desempeño.

4 – Analizar la carga de fuentes

Las fuentes mal optimizadas pueden afectar la representación retrasada del texto y las métricas LCP y FCP, además de provocar cambios de layout (CLS).

Las fuentes en el e-commerce son recursos muy importantes y conviene cargarlas lo antes posible, ya que sin ellas el contenido no será visible. Hay cuatro elementos que debemos analizar, que son:

  • Formato y peso
  • Carga
  • Subconjuntos
  • Font faces

A continuación, consulta los detalles de cada uno:

Formato y peso

Existen varios formatos de fuentes, como: ttf, otf, woff2, entre otros. Sin embargo, el más moderno y que ofrece mejor compresión es woff2. Reduce el tiempo de download al ofrecer una buena compresión, lo que se traduce en un mejor rendimiento.

Por lo tanto, si aún no utilizas este modelo de fuente, considéralo ahora para mejorar aún más la compactación y el comportamiento.

Con woff2:

Sin woff2:

Con solo utilizar este formato, el peso de varias fuentes se redujo en más de un 50%, ofreciendo descargas mucho más rápidas y minimizando posibles impactos de CLS, FCP y LCP.

Carga

Las fuentes son una prioridad al cargar la página. Por tanto, conseguir que aparezca lo antes posible permite al usuario visualizar el contenido de la página rápidamente.

Comprueba si realmente tienen prioridad de carga. Entonces, para analizar el tiempo que lleva, abra DevTools, accede a la pestaña Red (Network), selecciona el filtro “Font”.

Se enumerarán los cargados y cuando hagas clic en ellos, simplemente ve a la pestaña “Timing”. Así, es posible visualizar todos los tiempos de lo seleccionado, como el inicio de la carga, el tiempo que tardó en cargarse, etc.

5 – Analizar códigos CSS duplicados o no utilizados

Al acceder a la página de una tienda online, se cargan los CSS de todos los componentes personalizados y VTEX. CSS también tiene prioridad de carga y debe optimizarse para evitar largas esperas.

Verifica todos los códigos CSS utilizados para buscar aquellos que ya no están activos, que están duplicados o incluso mal utilizados.

Utiliza la herramienta de coverage propia del navegador para encontrar códigos inactivos. Otro consejo que ayuda mucho durante todo el proceso dentro de VTEX IO es comenzar revisando y eliminando grupos que ya no son efectivos, ya que personalizamos muchos de ellos a través de la propiedad “blockClass”. Cuando encontramos código CSS que está en una blockClass que no existe, es muy probable que esta sección no esté teniendo ningún efecto en la tienda, y por tanto podría eliminarse.

Un recordatorio importante es realizar este proceso con mucho cuidado para evitar interrupciones en el layout de la tienda. Mantén siempre un backup.

6 – Analizar códigos JavaScript no utilizados o mal estructurados

Al igual que CSS, JavaScript también tiene prioridad de carga y es uno de los principales factores responsables del rendimiento del sitio.

Es común que las páginas tengan varios componentes personalizados para satisfacer las necesidades de la tienda, pero códigos mal estructurados pueden provocar lentitud, pérdidas de memoria, entre otros problemas.

En el escenario VTEX IO analizaremos dos aspectos:

  1. Componentes React custom: analiza si tus componentes están bien optimizados. Recomiendo usar la extensión React Developer Tools.
  2. Scripts de terceros: las páginas de e-commerce generalmente cuentan con integraciones de terceros que son necesarias para su correcto funcionamiento, sin embargo, estos scripts pueden estar afectando su funcionamiento. Es importante comprobar todos los scripts de terceros que estén cargados.

7 – Analizar las bibliotecas utilizadas en el proyecto

Las bibliotecas parecen inofensivas, pero pueden interferir en gran medida con el funcionamiento de la tienda. Se instalan en el proyecto y también deben cargarse cuando se carga la página, así como Javascript, CSS, fuentes y otros elementos.

Examina las dependencias del proyecto, eliminando las que ya no están en uso y analiza si las que están en uso realmente no están impactando en el comportamiento de la tienda online.

Para conocer el peso y el tiempo de carga de cada biblioteca, utiliza el sitio web de Bundlephobia.

Si identificas alguna biblioteca que pueda dañar el rendimiento de tu tienda, considera eliminarla o reemplazarla por una que esté mejor optimizada.

8 – Analizar la carga de componentes, especialmente los componentes en el header

El header es otro elemento importante en el e-commerce, ya que se carga en prácticamente todas las páginas de la tienda. Por lo tanto, si algún elemento personalizado no se implementa correctamente y ralentiza la ejecución, afectará a todas las páginas de la tienda que tengan el header.

Aquellos que tengan un componente personalizado que deba cargarse en el header, tengan mucho cuidado, podría estar afectando el rendimiento del sitio.

  • Asegúrate de que realmente deba cargarse en cada página y estar dentro del header.
  • Comprueba que los componentes que deben estar dentro del header estén bien optimizados.

9 – Tags GTM

El GTM se carga en todas las páginas del sitio, en su interior contiene varios scripts, eventos, entre otros elementos, que se cargan y activan.

Es importante analizar el GTM en su conjunto y principalmente eliminar etiquetas que no se estén utilizando para poder optimizarlo.

10 – Consultas GraphQL

Es muy común utilizar consultas y mutations de GraphQL en sitios. GraphQL nos permite un enfoque más eficiente y flexible. Además, para consumir datos de la API utilizamos React Apollo, que es una biblioteca para integrar GraphQL con React, facilitando la gestión de datos.

Ten en cuenta algunas posibilidades para mejorar las consultas:

  • Evita traer datos innecesarios. Por ejemplo: necesitamos consultar la información de un cliente y devolver solo el CPF, en este caso no es necesario traer todas las demás referencias innecesariamente. Al crear tu consulta, puedes definir solo los campos que deben devolverse.
  • Utiliza la política de caché del lado del servidor.
  • Confía en bibliotecas de memorización, como “memo” o “useMemo”, para evitar la rederización innecesaria de componentes cuando los datos aún no han cambiado.
  • Usa la fetchPolicy adecuada para las solicitudes. Actualmente hay opciones: cache-first, network-only o cache-and-network. Lee la documentación.

Existen varios otros enfoques que también se pueden utilizar para mejorar el rendimiento de las solicitudes.

Conoce las mejores prácticas recomendadas por Apollo Graphql, accediendo aquí.

A continuación tenemos ejemplos de antes y después de la tienda Sam’s Club después de las mejoras aplicadas según este artículo.

Métricas en Lighthouse antes de los cambios (HomePage):

Métricas en Lighthouse después de los cambios (HomePage):

Hubo una mejora significativa principalmente en las métricas de Performance, además de varias otras mejoras en las métricas de Accesibilidad, Mejores Prácticas y SEO.

Mantener un sitio optimizado es esencial para garantizar un buen rendimiento en el e-commerce y cada uno de estos pilares es igualmente importante para permitirlo. Espero que estas recomendaciones te sean útiles para aplicar en tu tienda VTEX IO.

Suscríbete a nuestro newsletter para recibir mensualmente los principales contenidos sobre tecnología, experiencia y marketing para e-commerce y aprovecha para visitar otros artículos sobre e-commerce VTEX, accediendo a continuación:

➡️ Implementando LiveScale con VTEX IO

➡️ Desarrollo en VTEX IO: 2 herramientas que necesitas conocer y que facilitarán tu rutina

➡️ Recurso de regionalización de VTEX: ¡descubre cómo funciona para el segmento de Grocery!

➡️ B2B en VTEX: ¡conoce su arquitectura y cómo configurarla!

➡️ Headless en la plataforma VTEX: ¿cómo aprovechar esta tecnología en tu tienda virtual?
➡️ Desarrollo VTEX: 8 APPs que contribuyen a mejorar la página

Escrito por:
João Goulart, Desarrollador VTEX IO
at Corebiz