Cómo optimizar las imágenes de tu tienda online para mejorar la velocidad de carga
Esta claro que, a todos nos gustan las páginas webs rápidas y más cuando estamos en fase de comprar un producto. No hay nada peor, que clicar en un enlace y quedarse esperando frente a una pantalla en blanco o frente a una web incompleta.
En nuestro trabajo diario como agencia SEO hemos visto comos se sacrifica tiempo de carga por consideraciones estéticas ( sliders, recursos y funcionalidades que quedan bonitas, pero no mejoran la conversión, e incrementan el tiempo de carga de la tienda).
Pensamos que el usuario tiene todo el tiempo y la paciencia que tenemos nosotros cuando miramos nuestra web. Y eso, es un error.
El usuario tiene menos paciencia de lo que creemos
El 40% de las personas abandona un sitio web que tarda más de 3 segundos en cargarse. ( Fuente Kissmetrics)
Pero aún hay más, según esta misma fuente el 79% de los usuarios web que tienen problemas con el rendimiento de un página web dicen que no volverán al sitio para comprar de nuevo. Eso es un porcentaje muy alto de potenciales compradores perdidos.
Te recomiendo que le eches un vistazo a este documento que Google publicó en 2018 y cuyas conclusiones siguen siendo validas en la actualidad.
Además, el tiempo de carga de la página se está convirtiendo en un factor más importante cuando se trata de clasificaciones en los motores de búsqueda. En 2018, google introdujo su “Speed Update” como respuesta al creciente tráfico de de móvil, dono de la velocidad de carga aún es más importante.
Cuál es la velocidad de carga ideal de una tienda online.
La velocidad óptima en muchas ocasiones no es fácil de conseguir, pero teniendo en cuenta los datos anteriores, lo ideal sería que estuviese por debajo de los 2 segundos, ya que los estudios muestran que el 47% de los usuarios ( siempre estamos hablando de datos en Estados Unidos, pero posiblemente bastante extrapolables a nuestro país) abandona una web si tarda más de 2 segundos en mostrarse.
El hosting y la programación en muchas ocasiones harán imposible conseguir esa cifra, pero es importante acercarse lo máximo posible para evitar fugas de usuarios y mejorar el posicionamiento orgánico.
Cómo averiguar la velocidad de carga de mi web.
Para saber cúal es la velocidad de carga actual de tu web tienes varias herramientas gratuitas disponibles que escanearán su página y te darán una puntuación de velocidad, junto con un desglose de los mayores problemas y cómo mejorarlos.
- Page Speed Insights de Google te permite saber cómo carga tu tienda tanto en el escritorio como en el móvil.
- Pingdom Tools te muestra el tamaño de su página y el tiempo de carga, sólo en ordenador
- GTMetrix te va a dar una idea muy visual de los problemas y sus posibles soluciones, sólo en ordenador.
Las imágenes, uno de los principales problemas SEO
Posiblemente, sí pasas tu web por cualquiera de estas herramientas, verás que uno de las principales mejoras tiene que ver con la optimización del tamaño y el peso de las imágenes.
Normalmente, las imágenes ocupan más espacio que cualquier otro archivo de un sitio web, especialmente cuando se trata de tiendas online, debido al número de ellas ( pongamos una media de 4 imágenes por producto, más las del blog , los sliders de la home,…)
Las imágenes suelen ser los archivos más «pesados» y más difíciles de trabajar para los navegadores, por lo que su tamaño y su calidad pueden mejorar o arruinar el rendimiento de tu web, en favor o detrimento del tráfico de tu web y por tanto, de tus ventas.
Cómo optimizar las imágenes de mi web:
Paso 1: guarda tus imágenes en el formato correcto
Los dos formatos de imagen más comunes en una página web son Portable Network Graphics (PNG) y Joint Photographic Experts Group (JPEG o JPG).
¿Cuál es la diferencia entre ambos formatos?
Basicamente, el formato PNG es de mejor calidad y permite trabajar con transparencias, pero el tamaño de los archivos de imagen es mayor. Los archivos JPEG no ofrecen tanta calidad, pero el tamaño de los archivos de imagen suele ser mucho más pequeño.
Los PNG no tienen pérdida, es decir que se pueden editar y guardar una imagen tantas veces como se quiera sin perder calidad . Los archivos JPEG, si pierden calidad cada vez que se vuelven a guardar.
¿Cuándo debo usar cada formato?
Los archivos JPEG serán su mejor opción en la mayoría de los casos, ya que son un buen compromiso entre la calidad de la imagen y el tamaño del archivo.
Como regla general, aquí tienes un listado de cuándo usar cada formato.
- Cuándo usar PNG:
- Para imágenes con fondos transparentes
- Para imágenes con opacidad
- Para imágenes más pequeñas como logotipos o íconos
- Para imágenes con texto en ellas
- Para imágenes con poca gama cromática
- Cuándo usar JPEG:
- Para imágenes y fondos de productos
- Para imágenes con muchos colores diferentes, como fotografías e imágenes realistas
Podríamos añadir el formato GIFT (Graphic Interchange Format) para ilustraciones sencillas con bloques de colores planos y sobre todo para crear imágenes con movimiento – admite 256 colores – transparencias absolutas (sin degradado) – poco peso en el disco.
Básicamente, utilizado en post de blogs y de redes sociales, aunque también puede utilizarse en alguna descripción larga, si aporta valor al producto ( uso, característica,…)
Si aún quieres optimizar más las imágenes usa WebP
Si utilizas Page Speed de Google, verás que te recomienda utilizar el formato WebP, desarrollado por el mismo, que genera unas imágenes sobre un 30% más ligeras que JPEG o PNG, sin perder calidad. Aunque es visible en la mayoría de navegadores, todavía no funciona en Safari de Apple, en cuyo caso verás el formato JPEG o PNG normal)
https://es.wikipedia.org/wiki/WebP
Paso 2: Adapta el tamaño de tus imagenes
Muchas veces, cuando subimos imágenes a la web no tenemos en cuenta el tamaño del archivo y el tamaño que muestra la web. Es decir, si tu cargas una imagen de 2.000 píxeles de ancho en la página de un producto, obligas al navegador a hacer un doble trabajo, porque debe cargarla con su tamaño original y luego “redimensionarla” y cargar un nuevo tamaño ajustado al área de imagen que tenga dispuesta tu página.
Si esto la multiplica por X imágenes, el problema puede convertirse en algo bastante grave.
Por lo tanto, verificar y subir las imágenes en el tamaño óptimo que necesitas es muy importante para mejorar la velocidad de carga de la web.
¿Cómo averiguo qué tamaño de imagen necesito subir?
Si estás utilizando Google Chrome, puedes utilizar la herramienta Inspector para ayudarte a determinar el tamaño del espacio para su imagen.
Entra en tu tienda y haces clic con el botón derecho en el área cuyo ancho desea investigar. Luego haga clic en «inspeccionar”
Aparecerá una barra de herramientas en la parte inferior. Podrá ordenar las secciones HTML de su sitio web, pasar el cursor sobre ellas y ver el ancho de esa sección.
Entonces, por ejemplo, si desea agregar una imagen a la publicación de su blog, debe conocer el ancho máximo de su área de contenido para que pueda cargar una imagen de ese tamaño o más pequeña.
Abra la herramienta del inspector para determinar el espacio para su imagen. En el siguiente ejemplo, el tamaño del área que ocupará su imagen es de 800 x 800 píxeles.
Ahora sabes que, para evitar que el navegador web cargue dos imágenes de diferentes tamaños (como se mencionó anteriormente), debe cambiar el tamaño de la imagen para que tenga un ancho de 800 px o menos.
Con las nuevas versiones de WordPress y Prestashop se generan varios formatos para adaptarlos a los diferentes dispositivos.
Importante: el tamaño del archivo, no es lo mismo que el tamaño de la imagen
El tamaño del archivo de imagen es la cantidad de espacio necesaria para almacenar la imagen en su servidor (por ejemplo, 450,7 KB). Cuanto mayor sea el tamaño del archivo, más tardará en cargarse la imagen.
Es importante, asegurarse de que que la mayoría de las imágenes en tu web no pesen más de los 150 KB.
Recomendamos siempre que las imágenes pesen menos de 100 KB.
Paso 3: guarda las imágenes para web
Como en muchas ocasiones tendrás que retocar el tamaño de tus imágenes para ajustarlas al tamaño adecuado para tu web, puedes usar la opción de «guardar para web» que para ajustar el tamaño del archivo de la imagen con una calidad más baja, para reducir su peso sin perder excesiva calidad.
Puedes utilizar programas como: Paint, Photoshop, Pixlr.com o Sketch.com
Paso 4: Optimizar las imágenes a través de un compresor
Los compresores de imágenes reducen el tamaño del archivo de imagen sin perder calidad eliminando información innecesaria, como detalles de la cámara, metadatos, perfiles de color, miniaturas incrustadas, etc.
Tienes magnificos compresores de imagen como TinyPNG o Kraken , y si utilizas Mac, una aplicación gratuita como ImageOptim también te ayudará.
Si tu web está desarrollada en WordPress te recomedamos que instales algún plugin como Smush Image Compression and Optimization o EWWW Image Optimizer para comprimir en masa todas las imágenes de tu página web y las que vayas subiendo de forma automática.
Paso 5: usar una CDN ( Content Delivery Network)
Si quieres mejorar todavía más la velocidad de carga de tu web, y además, te interesa llegar a usuarios de otros países, el uso de una CDN te puede ayudar de una forma importante.
La CDN te permite entregar una copia de tu web almacenada en el servidor de la red de tu proveedor más cercano al usuario, con lo que los tiempos de carga mejoran de una forma ostensible.
En este post encontrarás las ventajas y desventajas de utilizar una CDN
También puede interesarte leer estos posts relacionados con velocidad web.
Optimizar imágenes y descripciones es básico
Las claves del SEO para imágenes
