10 Ago
E-commerce

Haz que tu e-commerce vuele: optimiza la entrega de contenidos

UX Researcher ● Web Designer ● 🍺 ● 🤘🏼

Cuando se trata de vender un producto online es muy importante que el usuario reciba el contenido que desea de una manera rápida y fiable. La manera de gestionar los recursos que contiene nuestro e-commerce y hacen que funcione de manera correcta es una de las partes más sensibles y muchas veces más descuidadas. En este artículo vamos a ver cómo influye esta optimización de assets en una venta online, tanto para un usuario que accede desde un ordenador como para el cada vez más numeroso usuario mobile.

¿Por qué es importante optimizar un sitio web?

Vamos a comenzar este artículo con unas gráficas para ponernos en contexto:

A close up of a map

Fuente: Statcounter

En la imagen superior podemos observar el porcentaje de uso global de dispositivos con los cuales accedemos a internet desde enero de 2013 hasta julio de 2017. Se observa de manera clara la tendencia: el uso de desktop (azul) cae en picado frente al ascenso meteórico de los dispositivos mobile (verde).

 

Average Bytes per Page by Content Type Average Bytes per Page by Content Type

 

En estos dos gráficos podemos observar el «peso» medio de descarga tanto en webs visitadas por ordenadores de escritorio o portátiles (izquierda) como por dispositivos móviles (derecha). Más de 3Mb para desktop y más de 2,6Mb para mobile de media por web. Los mismos datos de hace dos años reflejan una tamaño bastante menor:

 

Average Bytes per Page by Content Type Average Bytes per Page by Content Type

 

Si analizamos los datos obtenidos de HTTP Archive tenemos una tendencia al alza consolidada del uso de smartphones frente a escritorio, y las webs visualizadas desde dispositivos móviles casi alcanzan a las de escritorio en peso de recursos descargados. Por no decir que hemos multiplicado por 2.5 el peso de la web móvil en dos años.

Teniendo en cuenta que los smartphones dependen de tarifas de datos, es muy importante optimizar este canal para evitar que los usuarios malgasten sus datos y nosotros perdamos una venta por tener un sitio web lento y sin optimizar.

Cómo optimizar una web para móviles

En los siguientes puntos vamos a ver qué podemos hacer para que nuestra tienda online haga una gestión correcta de los recursos descargados:

Eliminar descargas innecesarias

Los mejores recursos son aquellos que no hace falta descargar. Así de simple. Necesitamos hacer una revisión minuciosa de qué recursos estamos utilizando y entregando a cada visitante, y plantearnos si de verdad es necesario para el correcto funcionamiento de nuestro e-commerce.

Es importante saber si cualquier recurso que utilicemos y que pertenezca a terceros está de por sí optimizado y no presenta una traba en el rendimiento de nuestra web. Por ejemplo, un script para conseguir estadísticas de visitas o un plugin para compartir en redes sociales.

Muchas veces este tipo de scripts externos son sencillamente implementables en nuestro propio sitio con un poco de desarrollo, y así evitamos realizar peticiones externas que quedan fuera de nuestro control.

Por otro lado, si utilizamos bien nuestras métricas y análisis de usuarios, sabremos si cierto contenido de nuestro sitio es relevante y funciona o por el contrario no lo hace y simplemente está generando una carga innecesaria. Por ejemplo, un carrusel con imágenes de nuestros productos o un vídeo incrustado en la página de un producto determinado.

Optimización de elementos de código (HTML, CSS, JS)

En las webs, el código de texto pesa. Los espacios y los comentarios pesan. Por lo tanto es muy importante eliminar todo desperdicio del código y dejar lo estrictamente necesario para que nuestro sitio funcione correctamente. Utilizando técnicas de minificación y concatenación de los recursos HTML, CSS y JavaScript conseguiremos dos cosas:

  • Reducir el tamaño de estos recursos y por lo tanto entregarlos de forma más rápida.
  • Reducir el número de peticiones a nuestro servidor y ganar tiempo al realizar menos conexiones.

Compresión de elementos de código

Al igual que el paso enterior, es muy importante la compresión de los recursos de parte de servidor. Para ello éste debe tener habilitada la compresión Gzip. En la siguiente tabla podemos comprobar cuánto ganamos usando de forma correcta Gzip:

GZIP

Fuente: Google

Optimización de imágenes

Tal y como hemos visto en los gráficos anteriores, las imágenes son los elementos que más ocupan en las webs, y por lo tanto debemos tener mucho cuidado al tratarlas. No es lo mismo un formato que otro, o un tamaño a otro.

Para elementos propios del diseño de la web (logotipos, tramas, iconos, etc.) es recomendable usar SVG. Este tipo de elementos suelen ser poco complejos, por lo que el uso de gráficos escalables nos permiten optimizar el recurso y no perder calidad aún a altas resoluciones de pantalla o zoom.

Para el resto de imágenes (productos, composiciones, banners, etc.) es obligatorio usar recursos optimizados. Existen multitud de herramientas y plugins que nos permiten hacerlo de forma sencilla, tal y como comentamos en nuestro artículo sobre cómo mejorar la velocidad de carga de WordPress y WooCommerce.

Uso de las cachés de servidor y navegador

La caché de servidor permite a éste dar al usuario contenido guardado y ya compilado, sin tener que cargar por completo la página que el visitante desea ver y generarla de nuevo.

La mayoría de hostings del mercado nos permitirán activar desde su panel de control la caché de servidor, y así optimizar la entrega de recursos. De este modo ahorraremos unos preciosos megabytes.

La caché de cliente permite al navegador saber qué recursos ya utilizados anteriormente no han cambiado desde la última visita y así servirlos de modo local, sin realizar la conexión al servidor, y por lo tanto ahorrar esa descarga.

Para la caché de parte de cliente, los navegadores actuales hacen muy buena gestión de la misma aunque generalmente es necesaria una pequeña ayuda para forzarles a hacerlo aún mejor. Añadiendo al archivo .htaccess de la raíz de nuestro e-commerce las siguientes líneas de código lo conseguiremos:

    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"

Conclusiones

Dependiendo nuestras ventas en más de un 54% del canal móvil, no podemos dejar de lado la optimización de nuestra tienda online y debemos poner de nuestra parte para facilitar el uso a nuestros visitantes. Una web rápida y optimizada convierte más y mejor.

En Vital Innova somos expertos en este tipo de optimizaciones enfocadas a comercio electrónico. Si tienes una tienda online y quieres mejorar tus ventas, no dudes en contactar con nosotros.

Solicitamos tu permiso para obtener datos estadísticos de la navegación en esta web, en cumplimiento del Real Decreto-ley 13/2012. Si continúas navegando consideramos que aceptas el uso de cookies.

AceptarMás información