La antigua expresión “el tiempo es dinero”, tiene mucho sentido en el e-commerce. Cada segundo o milésima de segundo que se pierde al cargar una página representa muchas oportunidades de negocio que quedan en el camino. Este escenario se puede demostrar con algunos datos conocidos del mercado, a saber:
- Según Kissmetrics, el 40 % de los consumidores abandona un sitio que tarde más de 3 segundos en cargarse;
- De acuerdo con Radware, un segundo de atraso en cargarse puede representar una caída del 7 % en las conversiones, el 11 % en los pageviews y el 16 % en la satisfacción del consumidor;
- Según datos de Web Performance Today cuando Walmart comenzó a trabajar para optimizar el rendimiento del sitio, obtuvo un aumento del 2 % en las conversiones por cada segundo de carga más veloz de sus páginas.
- Si el sitio de su tienda virtual no se carga en 1, 2 o hasta 3 segundos, su performance puede y debe mejorar.
¿Cómo medir la velocidad de su tienda?
La mejor manera de saber si su sitio demora al cargarse es utilizando las herramientas de monitoreo de velocidad. Las mejores son WebPagetest, Pingdom Website Speed Test, PageSpeed Insights, GTmetrix y el plugin Developer Toolbar de Google Chrome (solo hay que presionar ‘F12’ al acceder al sitio, ir a la pestaña ‘Network’ y volver a cargar la página para hacer la medición).
Tomando como base los tests realizados en WebPagetest, sus resultados muestran métricas interesantes que el minorista puede aprovechar, tales como:
First Byte Time; Load Time; Start Render; Bytes In; Keep-Alive Enabled; Compress Transfer; Compress Images; Cache Static Content; Effective use of CDN.
¿Qué es lo que puede causar lentitud en un e-commerce?
En general, lo que más pesa al cargar el sitio de una tienda virtual es la personalización. Esto significa que la forma en que se personaliza un sitio, es decir, la cantidad de imágenes y tags HTML, JavaScript y CSS es lo que puede diferenciar el rendimiento de un e-commerce frente a los demás.
Por ejemplo, el exceso de rastreadores de publicidad, remarketing, análisis, heatmap, motor de recomendación de productos e interacción con los clientes pueden retrasar la carga completa del sitio. Además, muchas de esas tags son activadas por terceros para aumentar la cantidad de recursos del sitio, pero, aunque algunas sean realmente necesarias, no siempre estas funcionalidades extras valen la pena. Por eso, cada minorista debe analizar cómo impacta cada solicitud en sus conversiones. Si los resultados fueran positivos, puede mantener esas solicitudes.
Además, existen otros recursos como el almacenamiento en caché y el uso de CDN (red de entrega de contenidos). La cuestión es que, en estos casos, el cliente de VTEX no siente tanto la diferencia porque la infraestructura de la plataforma es la misma para todos. Por ejemplo, en nuestro sistema, tanto la CDN como la definición del tiempo de aprovechamiento de caché son nativos.
Hay otros problemas de orden más técnico o profundo que merecen un análisis más detallado, a saber:
Imágenes pesadas y con dimensiones exageradas
La cantidad de imágenes que se cargan en una tienda virtual no representan un problema, pero sí lo es el peso y la medida de cada archivo.
Por ejemplo, una imagen que pese más de 100 kb es demasiado, principalmente si tenemos en cuenta que un e-commerce carga muchas imágenes. Lo ideal es que el tamaño del archivo sea entre 50 kb y 80 kb.
En relación a las dimensiones de estas imágenes, el problema aparece cuando, por ejemplo, la foto de un producto se muestra en un tamaño reducido en la estantería de la página de inicio, pero, en realidad, posee una dimensión mayor.
Seamos más prácticos. Imagine la foto de una batidora en la página de inicio de una tienda virtual de electrodomésticos que se muestra al usuario en un tamaño de 220 x 220 pixeles. Hasta ahí, todo bien. El error se produce cuando, originalmente, la misma imagen tiene 1000 x 1000 pixeles. Los navegadores hacen la solicitud, descargan la foto original y la redimensionan, en general por medio de CSS, al tamaño definido por el minorista o su equipo de desarrolladores.
Scripts que se ejecutan antes de tiempo
Anteriormente hablamos sobre el peso que las solicitudes accionadas por terceros causan en la carga de un sitio de e-commerce. En este caso, el gran problema se encuentra en el orden de ejecución de las tags.
Piense, por ejemplo, en la necesidad de mostrar un chat de atención sin que el usuario se quede más tiempo en el sitio o de accionar un motor de recomendación sin que el visitante ni siquiera se haya desplazado por la página de productos.
No es necesario que se ejecuten todas las solicitudes al cargar la página principal. Si esto sucede, sin duda, la carga se hace mucho más lenta.
Estanterías horizontales de productos
Una práctica que genera lentitud y que pocos minoristas notan es el uso de estanterías de navegación horizontal.
Muchas veces, el minorista prefiere exhibir 12 productos en la misma línea, en lugar de mostrar solo 4 al mismo tiempo. El problema es que 8 productos quedan ocultos y solo se muestran cuando el visitante hace clic.
El público tiende a navegar más de forma vertical que horizontal. Por lo tanto, tal vez no sea necesario incluir estas nuevas solicitudes (más imágenes y desplazamientos horizontales), a menos que funcionen muy bien en su tienda.
¿Cómo reducir el tiempo de carga de su tienda?
Existen algunas buenas prácticas que ayudan a los minoristas a mejorar la performance de su e-commerce y, de esta forma, ofrecer al consumidor una experiencia de uso más agradable. A continuación, señalaremos las principales prácticas:
Comprima el tamaño de las imágenes
Una foto de 500 kb se puede comprimir a menos de 100 kb sin que la imagen pierda mucha calidad. Esto es posible con el uso de algunos programas y herramientas. Adobe Photoshop es una de las opciones, pero hay otras aplicaciones más simples, como Riot y sitios como TinyJPG, Kraken (use la opción “Lossy”) y Compress PNG.
En la mayoría de los casos, se podrá reducir por lo menos en un 50 % el tamaño de los archivos de imágenes, que es una disminución bastante considerable para el sitio.
Redimensione las imágenes
Redimensionar las fotos es más simple que comprimirlas. Se puede hacer con Paint, Photoshop o Riot.
En internet, hay sitios y herramientas como Fotor, iLoveIMG e ImageResizer que simplifican este trabajo.
No existe un estándar ideal para el tamaño de las fotos, siempre dependerá del lugar donde se quieran mostrar. En la página de inicio, por ejemplo, si no se amplían cuando se pasa con el mouse, las imágenes se pueden cargar del tamaño que se muestran. En las páginas de productos, las imágenes pueden ser un poco más grandes porque aunque se muestren en dimensiones más pequeñas, el consumidor puede hacer zoom para ver el producto en alta definición.
Reduzca los códigos Java, HTML y CSS de la tienda
La compresión de los códigos de estos tipos es una tarea más técnica y, generalmente, queda a cargo del equipo de desarrolladores y programadores de su plataforma.
La minificación de las solicitudes en Java, HTML y CSS consiste en retirar, modificar o reducir espacios, comentarios, caracteres, saltos de línea y nombres de algunas variables. La intención es compactar estos códigos en la menor cantidad de líneas posible para que sean más rápidos y, así, ahorrar recursos y acelerar el tiempo de respuesta de los servidores.
Existen algunas herramientas que se pueden utilizar para optimizar los códigos, tales como Adobe Dreamweaver(con un enfoque en la mejora de HTML), Minify (CSS y Java) y YUI Compressor (CSS y Java).
Modifique la cantidad o disposición de productos en las estanterías
Como señalamos anteriormente, la organización visual de los productos que se muestran en la página de inicio y en las páginas de categoría puede influir al cargar el sitio.
Por eso, es interesante probar un layout que elimine todo tipo de desplazamiento horizontal y enfocarse en el desplazamiento vertical.
Los productos que antes quedaban ocultos pueden aparecer en una línea nueva o se puede reducir la cantidad de artículos, haciendo que el navegador tenga que cargar menos solicitudes.
Evalúe la necesidad de utilizar determinadas solicitudes
Gracias a las herramientas de monitoreo de velocidad del sitio, se pueden identificar las solicitudes cargadas por su e-commerce. Al analizar el resultado, vale la pena evaluar el impacto de cada script en la performance y, principalmente, en las conversiones de la página. Esto ayudará a definir la necesidad real de cada uno.
Además, es importante comprobar la presencia de posibles códigos y solicitudes duplicadas en los resultados o en la estructura de HTML, CSS y JavaScript de su sitio.
Otro consejo interesante es el uso del plugin Ghostery para Google Chrome. Con este plugin, se pueden identificar todos los rastreadores y solicitudes de terceros que se ejecutan en el sitio.
En caso de encontrar tags duplicadas o que ejecuten funciones iguales o parecidas, intente bloquear o eliminar estas solicitudes por medio de Google Tag Manager o desde cualquier otro administrador de tags de su sitio.
Configure el orden de ejecución de los códigos
Otra forma de administrar el uso de las solicitudes es reordenando sus cargas. En este caso, lo mejor es hacer que determinados scripts se ejecuten según la interacción del usuario con el sitio.
El minorista puede hacer esto usando Google Tag Manager. Con esta aplicación se puede, por ejemplo, ejecutar una tag de remarketing para que se active solo cuando el visitante pase más de 30 segundos en el sitio.
Otra herramienta muy útil es LazyLoad, que mejora la carga de las páginas al hacer que las imágenes se ejecuten solo cuando aparezcan en el campo visual del usuario.
En suma, estos servicios ayudan a que su sitio cargue el contenido primario de forma más rápida, logrando que el Time to Interact sea más corto.
¿De qué forma VTEX ayuda a que sus clientes obtengan una mejor performance?
El back-end de su e-commerce también puede influir mucho en la velocidad del sitio. En el caso de VTEX, como la infraestructura es única para todos los clientes, el punto de partida es el mismo. De esta forma, los minoristas comienzan con recursos que mejoran su performance.
Uno de ellos es la CDN nativa que ya mencionamos en este artículo. Además, los minoristas también cuentan con la compresión WebP, que puede compactar imágenes en formatos PNG, JPG y JPEG entre un 30 % y un 40 % del tamaño de su archivo, incluso si ya se ha comprimido antes.
VTEX también ayuda a los clientes en la implantación del protocolo HTTP2 para los minoristas que migran su e-commerce a HTTPS en la plataforma. Esta combinación ofrece más seguridad en las transacciones que realizan los consumidores y más rapidez al abrir páginas que el tradicional HTTP 1.1.
Además, agregamos en la página de inicio del dashboard de cada cliente, un gráfico que monitoreará el histórico del tiempo medio de carga de la tienda y lo comparará con otros sitios de e-commerce de la base de VTEX.
Conclusión
En una tienda virtual, la velocidad de carga y la conversión son dos temas que se relacionan profundamente. Por esta razón, los minoristas deberían estar más pendientes de la performance de sus sitios y tener un poco más de cautela al personalizar las páginas. Al final, la personalización es lo que más diferencia al e-commerce más rápido del más lento.
En el caso de VTEX esto es aún más evidente, ya que la infraestructura es la misma para todos los clientes. En realidad, todos los minoristas tendrían que saber esto, porque las imágenes y los códigos que no se optimicen y las tags que sean poco productivas, pueden retrasar a los consumidores.
Así, es necesario hacer el monitoreo de las solicitudes, comprimir las imágenes y los códigos y mantener solamente los scripts que ayudan en las conversiones. Son algunas prácticas que harán que su tienda sea más rápida y, por ende, más rentable.
