Mejore el comercio electrónico móvil: haga que su sitio web vaya más rápido

Varias estadísticas señalan la diferencia que cada segundo de tiempo de carga hace en la tasa de conversión de una tienda de comercio electrónico. Personalmente, tengo algunas dudas sobre muchas de estas estadísticas, ya que hay muchos otros factores que pueden influir en la tasa de conversión de una tienda. Sin embargo, con el dominio del comercio electrónico móvil y la navegación sobre la navegación de escritorio para casi todos los sitios web minoristas, es claramente importante que una tienda de comercio electrónico sea lo más rápida posible, ya que la velocidad afectará directamente la experiencia del usuario.

Existen numerosas formas de optimizar el front-end de su sitio web; algunos complejos y costosos, algunos bastante simples. A menudo encontrará que puede obtener grandes ganancias rápidas y fáciles desde el principio, pero eventualmente comenzará a obtener rendimientos decrecientes y mejoras incrementales más pequeñas.

Lo lejos que llegue realmente depende del tamaño de sus ingresos en línea y cuántos ingresos adicionales del comercio electrónico móvil es probable que obtenga a partir de las mejoras incrementales más pequeñas.

Mejorar la tasa de conversión en un 0,1% generará un retorno de la inversión mucho mayor para un minorista grande que para uno más pequeño.

Optimice las imágenes para una excelente experiencia de comercio electrónico móvil

La optimización de imágenes es un área en la que se puede lograr rápida y fácilmente una gran reducción en el tiempo de carga de la página. A menudo veo un conflicto entre los diseñadores gráficos, los comerciantes y los gerentes de comercio electrónico cuando se trata de la calidad y el tamaño de la imagen. Un diseñador gráfico quiere la imagen más grande y de mayor resolución posible, y no siempre considerará las implicaciones de velocidad de una imagen que crea. Es probable que un comerciante quiera las imágenes de productos más grandes y de mayor resolución, mientras que el gerente de comercio electrónico puede ser el único con la visibilidad y apreciación de la velocidad general de la página.

La optimización de imágenes es siempre un equilibrio entre la calidad y el tamaño del archivo. Cuanto mayor sea la calidad de la imagen, mayor será el tamaño del archivo. El tamaño nativo y la complejidad de la imagen también afectan el tamaño del archivo. Es probable que una imagen con un fondo complejo y detallado tenga un tamaño de archivo mucho mayor que una con un fondo simple.

A los diseñadores a menudo les gusta crear banners de alto impacto para un sitio web usando muchos colores y un fondo que no sea solo un color simple. Esto puede tener un alto impacto visual, pero la consecuencia será un tamaño de archivo mucho mayor que un banner similar con un fondo simple. La introducción de pantallas de alta resolución como la pantalla Retina de Apple hace que el equilibrio sea aún más difícil de mantener, ya que las pantallas resaltan las imperfecciones en las imágenes de menor calidad.

Es importante que todos los miembros del equipo aprecien la optimización de front-end y el impacto que tendrán las decisiones gráficas en el tamaño de las imágenes y, por lo tanto, en la velocidad de la página.

Si bien las herramientas de diseño estándar, como Photoshop, permiten a los diseñadores optimizar las imágenes, hay una serie de servicios de terceros disponibles que pueden optimizar automáticamente las imágenes en su sitio web. Tanto Akamai como Ampliance ofrecen servicios de gestión de imágenes que optimizan sus imágenes en función de un conjunto de reglas configuradas. Incluso pueden transformar archivos jpeg en imágenes WebP para navegadores compatibles para garantizar que el tamaño de los archivos sea lo más pequeño posible.

En Envoy, recientemente probamos el administrador de imágenes de Akamai en el sitio web de un cliente y vimos una reducción promedio del 80 % en el tamaño de archivo de las imágenes PLP, sin una disminución notable en la calidad visual. Esto resultó en una gran caída en el peso total de las páginas PLP (página de listado de productos) y un gran salto inmediato en sus puntajes de Google Pagespeed. Si no desea utilizar un servicio de terceros para esto, puede implementar una herramienta de código abierto como Thumbor, que es un servicio que instala localmente en sus servidores web. Herramientas como esta optimizan automáticamente sus imágenes sobre la marcha y luego las almacenan en caché en un repositorio.

Usar un CDN

Las redes de entrega de contenido (CDN) son servicios que almacenan en caché su contenido en una red de servidores comúnmente conocida como borde. Estos servidores normalmente se alojan globalmente en muchas ubicaciones para garantizar que su contenido se almacene en caché en una ubicación físicamente más cercana a los usuarios que sus servidores de origen. Si bien los CDN a menudo se usan solo para almacenar en caché imágenes, css, JavaScript y videos, también puede usarlos para almacenar en caché páginas HTML completas.

Al almacenar en caché páginas HTML completas, puede acelerar significativamente la entrega de páginas a sus usuarios. Como el HTML se almacena en caché, su aplicación web de origen no tiene que crear la página y devolverla al usuario cada vez que se solicita y es probable que el servidor de caché de CDN (punto de presencia) esté físicamente más cerca del usuario que su origen. servidores. Los CDN también tienen tecnología para comprimir y acelerar la entrega de contenido a los usuarios, lo que resulta en una experiencia mucho más rápida.

Los CDN también pueden reducir significativamente la carga en sus servidores de origen. Una página PLP es a menudo una página que requiere mucho procesador para que su aplicación web la genere sobre la marcha. Puede contener una gran cantidad de productos y facetas, que suman mucho procesamiento. En la mayoría de los casos, una página PLP no cambiará de una hora a la siguiente, por lo que almacenar en caché esa página durante una hora es perfectamente factible. En lugar de tener que generar potencialmente esa página miles de veces en una hora, su servidor de origen tendrá que hacerlo una vez. En realidad, no funciona así, ya que muchas CDN tendrán múltiples cachés independientes, pero aún puede esperar una descarga de alrededor del 60%. Esto significa que sus servidores y aplicaciones de origen recibirán un 60 % menos de solicitudes que sin la CDN.

Use herramientas de análisis de velocidad para optimizar la experiencia de comercio electrónico móvil

Hay una serie de herramientas en línea gratuitas y de pago que pueden analizar una página web y proporcionar recomendaciones sobre cómo hacer que su sitio web vaya más rápido. Probablemente las tres herramientas gratuitas más utilizadas son Google PageSpeed ​​Insights, Yslow y Webpagetest. Cada una de estas herramientas es ligeramente diferente, pero todas analizan su URL y envían un informe que contiene recomendaciones, junto con una puntuación.

Estas herramientas pueden ser muy valiosas para mostrarle rápidamente qué elementos de una página web la están ralentizando, y algunas herramientas incluso le brindan soluciones para resolver estos problemas. Si bien no son completos, son una forma rápida y fácil de encontrar los cambios que pueden tener un gran impacto.

Minimice el uso de scripts de terceros

La mayoría de los sitios web de comercio electrónico B2C contienen una gran cantidad de recursos de terceros, que van desde scripts de seguimiento de redes de afiliados hasta pruebas MVT. Pueden contener un feed de Twitter, seguimiento de Facebook o incluso fuentes externas. Estos recursos externos pueden ralentizar significativamente un sitio web si no se administran con mucho cuidado.

Cuando utilice un analizador de velocidad de página web, a menudo encontrará que estos recursos aparecen constantemente en la lista de elementos que contribuyen a la velocidad de la página. Uno de los mayores desafíos es que no tiene control sobre el tamaño y la optimización de estos recursos, ya que son desarrollados y alojados por terceros.

Debe auditar periódicamente los recursos de terceros a los que llama su sitio web y asegurarse de que todos se activan en el lugar correcto y de la manera correcta, y que realmente los está utilizando. He visto muchos casos en los que un script de seguimiento para un servicio que ya no se usa todavía se dispara porque se agregó usando GTM y alguien olvidó eliminarlo cuando el servicio dejó de usarse.

AMP de Google

El proyecto Google Accelerated Mobile Pages es una tecnología de publicación web de código abierto que tiene como objetivo mejorar la velocidad y el rendimiento del contenido, específicamente entregado a los dispositivos móviles. Dirigida por Google e iniciada en 2015, la tecnología AMP se diseñó originalmente para la entrega de contenido de noticias. Las páginas AMP son muy livianas y tienden a usar alrededor de 10 veces menos datos que sus contrapartes equivalentes que no son AMP y, a menudo, se cargan en menos de 1 segundo. Sin embargo, hay una gran trampa. Las páginas AMP admiten un conjunto muy limitado de funcionalidades y, por lo tanto, no son apropiadas para muchas aplicaciones, especialmente sitios web de comercio electrónico completos y funcionales.

Un puñado de minoristas ha probado AMP para el comercio electrónico con un éxito mixto. Aunque tienen páginas mucho más rápidas, han tenido que rediseñar por completo la funcionalidad y la experiencia del usuario en torno a las limitaciones de AMP. Las áreas complejas del sitio web, como el proceso de pago, no se pueden crear en AMP, por lo que el usuario accede a HTML estándar o a un proceso de pago de una aplicación web progresiva (PWA).

Si bien AMP es un proyecto muy interesante y ha sido bien adoptado en la industria de las noticias, aún debe mostrar una tracción real con el comercio electrónico. Si Google continúa expandiendo la funcionalidad disponible, puedo ver que se convertirá en una herramienta viable para el comercio electrónico.

Ir adaptativo

La mayoría de los sitios web de comercio electrónico ahora se crean de manera receptiva, donde el diseño se adaptará dinámicamente para adaptarse a la pantalla en la que se está viendo. Esto es ciertamente preferible a tener versiones móviles y de escritorio separadas de su sitio web y, en general, significa que su sitio funcionará bien en la multitud de tamaños de pantalla disponibles.

Sin embargo, con un diseño receptivo, los mismos activos tienden a usarse sin importar en qué dispositivo se esté viendo el sitio web. Los banners y las imágenes de productos a menudo se muestran en un tamaño más pequeño, o incluso se ocultan en una vista móvil, pero el archivo grande aún se descarga.

Aquí es donde se pueden utilizar elementos de diseño adaptativo. En lugar de crear un diseño fluido que cambie dinámicamente según el tamaño de la pantalla, un sitio web adaptable tiene múltiples diseños fijos diseñados para tamaños de pantalla específicos. Esto permite a los diseñadores controlar y optimizar estrictamente la experiencia del usuario para cada tamaño de pantalla específico.

Si bien esto es más complejo y lento de implementar, uno de los beneficios clave de la velocidad es que, en lugar de solo mostrar una imagen más grande en un tamaño más pequeño en un dispositivo móvil, cargará una imagen optimizada móvil específica en ese dispositivo, por lo tanto reduciendo el tiempo de carga. En un diseño receptivo, puede ocultar ciertos elementos del escritorio cuando el sitio se ve en un dispositivo móvil. En un diseño adaptativo, ni siquiera los carga en absoluto.

Una alternativa pragmática a la adaptación total es usar JavaScript en su diseño receptivo para detectar el tamaño de pantalla que se usa y garantizar que se soliciten y muestren imágenes optimizadas para dispositivos móviles en lugar de simplemente mostrar imágenes más grandes en un tamaño más pequeño. Esto garantiza que solo se soliciten y, por lo tanto, se descarguen las imágenes y el contenido que se muestran, al mismo tiempo que brinda los beneficios de un diseño receptivo.

Hay una multitud de formas diferentes de acelerar las páginas de su sitio de comercio electrónico móvil. Algunos involucran desarrollo, otros involucran el uso de servicios de terceros y algunos involucran un equilibrio entre diseño y función.