Comercio electrónico y “PageSpeed”: velocidad de carga de tiendas online ecuatorianas

El comercio electrónico en el Ecuador están creciendo. Frecuentemente nuevas tiendas en línea salen al aire ¿Pero cómo están optimizadas estas tiendas para los usuarios (y para Google) que quieren realizar compras online?

Hay diferentes formas para revisar si una página web está bien optimizada. En este artículo voy a  escribir sobre el tiempo en que las tiendas online del país se cargan.

La velocidad en que una página web se carga es importante para cualquier negocio en línea, principalmente por tres razones:

  • Una carga lenta aumenta la tasa de rebote. Los internautas que encontraron algo interesante en Google no quieren esperar mucho tiempo hasta que una página web se visualiza. Ellos hacen clic en otro resultado de búsqueda.
  • Se dice que un 25 por ciento de los usuarios se van si una página web necesita 4 segundos o más para abrirse. Un 75 por ciento de los usuarios móviles abandonan una página que no se carga en 5 segundos. Más información sobre este tema aquí.
  • Una Velocidad baja influye negativamente en la tasa conversión. A nadie le gusta comprar algo en una tienda virtual que funciona lentamente.
    Google prefiere páginas web que se cargan rápidamente. “PageSpeed” es un factor que influye en el ranking en Google (directamente y indirectamente a través de la tasa de rebote.)

Método

Revisé la velocidad de carga de todas las tiendas en línea del Ecuador que conozco (aquí encuentras la lista de las tiendas). Para medir la velocidad escogí el home y una página de un producto que se puede abrir inmediatamente desde el home (no en todas las tiendas esto es posible, entonces a veces escogí un producto que se abre luego de dos clics: home-categoría-producto).

Número de las tiendas revisadas

En total revisé 64 tiendas. De estas 64 tiendas una sale con muchas redirecciones en el caso del home y de los productos (http://www.liderlogo.com.ec/). Entonces para esta tienda no hay resultados.

Otro comercio electrónico tiene un home que funciona pero todas las paǵinas de productos muestran el error “404” (no existen) (http://stickers.center/). Entonces en el caso del “home” revisé efectivamente 63 tiendas. En el caso de las páginas de los productos revisé 62 páginas/tiendas.

Google Page Speed

Google muestra los elementos que debes corregir para mejorar la velocidad de carga
Google muestra los «elementos que debes corregir» para mejorar la velocidad de carga.

Utilicé Google PageSpeed para ver en qué tiempo una página se carga en un dispositivo móvil y en una computadora.
Google muestra la velocidad en puntos (0 hasta 100). Un puntaje de 0 hasta 64 significa que la velocidad de carga de un página es mala (color rojo en Google Pagespeed). 65 hasta 84 es media (color amarillo), y 85 hasta 100 es buena (color verde).

Además anoté los “elementos que debes corregir” (según Google) más típicos para cada página que revisé:

  • Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
  • Reducir el tiempo de respuesta del servidor
  • Especificar caché de navegador
  • Optimizar imágenes
  • Reducir el tiempo de respuesta del servidor

Los «elementos que debes corregir» también son marcados con rojo en Google PageSpeed. Esto significar que «si se solucionara esto, se obtendría un impacto medible en el rendimiento de la página».

Significado colores Google PageSpeed
Esto es lo que significan los colores en Google PageSpeed, fuente: https://developers.google.com/speed/docs/insights/about.

Pingdom

Con el “Pingdom Website Speed Test” conseguí el peso de las páginas revisadas. Pingdom te da una lista de todos los elementos que contiene una página web incluido su peso.

Velocidad: Resultados “home”

Velocidad de carga

Pagespeed comercio electrónico página de inicio

El promedio de la velocidad de carga de las páginas de inicio (home) de las tiendas ecuatorianas es de 47,71 puntos (dispositivo móvil) y de 53,57 (computadora).

Velocidad de carga de la página del inicio

De las 63 tiendas online revisadas, 36 (57,14 por ciento)  tiendas tienen una velocidad mala (computadora), 26 (41,27 por ciento) una velocidad media (computadora) y una tienda en línea una velocidad buena (1,59 por ciento) (computadora).

Velocidad carga de la página del inicio a través de un dispositivo móvil

En el caso de un dispositivo móvil, 51 (80,95 por ciento) tienen una velocidad de carga mala y 12 (19,05 por ciento) una velocidad de carga media.

36 (57,14 por ciento)  tiendas tienen una velocidad mala, 26 (41,27 por ciento) una velocidad media y una tienda en línea una velocidad buena (1,59 por ciento).

El comercio electrónico con la velocidad de carga más rápida de su «home» fue http://www.ecushopping.com/ para computadoras (86 puntos) y http://shop.cellairis.ec/ para dispositivos móviles (75 puntos).

Problemas que impiden una carga rápida

Los problemas principales de las páginas del inicio de las tiendas online en el Ecuador (dispositivo móvil)

Los problemas principales de las páginas del inicio de las tiendas en línea son (dispositivo móvil):

  • Optimizar imágenes: un 42,86% de las comercios electrónicos deben optimizar las imágenes en su página principal.
  • Especificar caché de navegador: un 63,49% deben especificar el caché de navegador.
  • Un 92,06% de las tiendas online debe eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.
  • Un 55,55% de los sitios debe habilitar compresión de sus datos/archivos (gzip).
  • Reducir el tiempo de respuesta del servidor: en un 25,4% de los casos el servidor necesita mucho tiempo para responder.

Velocidad: Resultados página de producto

Velocidad de carga

Pagespeed de las páginas de los productos

La velocidad de las páginas de productos es muy parecida al pagespeed de los homes. Los valores son 47,27 en promedio (dispositivo móvil) y 53,79 en promedio (computadora).

Velocidad de carga de las páginas de los productos a través de una computadora

De las 62 páginas de productos de tiendas online revisadas, 54 (87,1 por ciento) tienen una velocidad de carga mala (computadora), 8 (12,9 por ciento) una velocidad de carga media (computadora).

Velocidad carga página de producto - dispositivo móvil

En el caso de un dispositivo móvil, 43 (69,35 por ciento) de las páginas de productos revisadas tienen una velocidad mala, 15 (24,19 por ciento) una velocidad media y 4 tiendas en línea una velocidad buena (6,45 por ciento).

En el caso de las páginas de los productos la tienda más rápida fue http://tc.openshopen.ec/ con 76 puntos (dispositivo móvil) y 89 puntos (computadora).

Problemas que impiden una carga rápida

Problemas comunes que impiden una carga rápida de las páginas de los productos

Los problemas principales de las páginas de productos de las tiendas en línea son (dispositivo móvil):

  • Optimizar imágenes: un 30,65% de las comercios electrónicos deben optimizar las imágenes en su página principal.
  • Especificar caché de navegador: un 58,06% deben especificar el caché de navegador.
  • Un 95,16% de las tiendas online debe eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.
  • Un 61,29% de los sitios debe habilitar compresión de sus datos/archivos (gzip).
  • Reducir el tiempo de respuesta del servidor: en un 30,65% de los casos el servidor necesita mucho tiempo para responder.

Elementos que debes corregir según Google PageSpeed

Optimizar imágenes

En un 42,86 por ciento de las páginas del inicio y en un 30,65 por ciento de las páginas de productos revisados Google recomienda optimizar las imágenes.

Muchas comercios electrónicos quieren ofrecer a sus clientes imágenes de alta calidad de los productos que venden. Sin embargo, fotos de alta calidad muchas veces son bastante pesadas.

Los formatos adecuados para imágenes son jpg y png. También existen un formato desarrollado por Google: WebP. Imágenes en formato WebP son menos pesadas que imágenes en formato jpg o png pero al mismo tiempo tienen una mejor calidad. Solo los navegadores Chrome y Opera soportan WebP. Es posible subir imágenes en formato jpg/png y WebP. A través del archivo .htaccess se puede indicar a Chrome y Opera cargar la imagen en WebP y a los otros navegadores cargar la misma imagen en formato jpg/png.

Para optimizar imágenes -y al mismo tiempo mantener una buena calidad- se puede utilizar programas como Photoshop. Luego puedes utilizar un servicio como punypng.com. Debes revisar la calidad de los resultados.

Optimizar imágenes es un trabajo fácil que todos los comercios electrónicos deberían practicar.

Especificar caché de navegador

Cerca de un 60 por ciento de las páginas revisadas no tienen el caché del navegador especificado.

La idea del caché es que cuando visitas una paǵina web por segunda (o tercera…) vez, el navegador no descarga todo el contenido nuevamente (imágenes, etc), sino solo algunas partes que se han cambiado.

De esta manera una página se puede abrir más rápidamente.

Hay formas distintas de especifica el caché. Para tiendas que por ejemplo funcionan con WordPress existen plugins.

Otra forma es modificar el archivo  .htaccess (a través de un programa ftp). Más información aquí: http://emiliocobos.net/creando-el-htaccess-perfecto/ y https://www.siteground.com/kb/leverage-browser-caching/.

Habilitar compresión

También la compresión de los archivos (casi un 60 por ciento de las páginas revisadas no tienen la compresión activada) se puede realizar a través del archivo .htaccess (servidor de Apache y IIS).
La compresión (a través de gzip) reduce el tamaño de los archivos que recibe el navegador.

Más información sobre el tema aquí: https://varvy.com/pagespeed/enable-compression.html y aquí: https://gtmetrix.com/enable-gzip-compression.html.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

JavaScript y CSS que bloquean la visualización de la mitad superior de una página web, ejemplo http://www.ileshop.com.ec/.
Sugerencia de Google: eliminar JavaScript y CSS que bloquean la visualización de la mitad superior de una página web, ejemplo http://www.ileshop.com.ec/.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página es el problema principal de más de un 90 por ciento de las tiendas en línea en el Ecuador.

El gran problema es que la mayoría de las tiendas online utilizan alguna plataforma de comercio electrónico que viene con el código listo. En este caso es difícil cambiar la posición de javascript en el código html para que estos códigos se cargan al final o cargalos de la forma asíncrona.

También es muy difícil optimizar los archivos CSS para que, por ejemplo,  el CSS para la mitad inferior de una página web se cargue al final, mientras que el CSS para la mitad superior se cargue al inicio.

Para la optimización de javascript y CSS se necesita de algún programador que conoce el sistema de comercio electrónico usado.

Reducir el tiempo de respuesta del servidor

La velocidad de respuesta de un servidor depende de distintos factores, por ejemplo:

  • Escasez de recursos del procesador o de la memoria.
  • Consultas lentas a la base de datos.
  • Una lógica de aplicación lenta.

Lo mejor es comprar un servidor/alojamiento suficiente fuerte/grande para que el comercio electrónico puede funcionar sin problemas con la posibilidad de mejorar el servidor/alojamiento cuando el comercio electrónico crezca.

Más información sobre el tema «tiempo de respuesta del servidor» en Google Developers.

Peso de las páginas

Peso del home de una tienda virtual, ejemplo saz.com.ec
Peso de la página del inicio de una tienda virtual, ejemplo saz.com.ec.

En promedio, las páginas de inicio tienen un peso de 3,015625 MB. En el caso de las páginas de los productos, el peso en promedio es de 2,205238095 MB.

En el caso de las páginas del inicio y en el caso de las páginas de los productos hay páginas que pesan solo un poco más que 200 KB y al mismo tiempo páginas que pesan más que 13 MB.

No existe en peso perfecto para una página web. En general es mejor tener páginas livianas que pesadas. En todo caso un peso de más que 13 MB es demasiado y tiene una influencia muy negativa en la velocidad de carga.

En general se puede observar que las páginas más livianas se cargan más rápido que las páginas pesadas.

Sin embargo, una página con un peso de 3 MB puede cargarse más rápidamente que una página de solo 1 MB si los otros factores que influyen en la velocidad de carga -código javascript, CSS, gzip, etc.- son correctamente optimizadas.

En la mayoría de las páginas revisadas las imágenes son los archivos más pesados.

Algunas páginas tiene demasiadas imágenes y otros elementos. Cada uno es optimizado, pero el alto número de las imágenes y elementos hacen que la  página sea muy pesada. Un ejemplo es http://www.papagayoweb.com/.

Problemas con los resultados

El Pagespeed de una página puede variar un poco. Si revisas una página hoy en la mañana, el PageSpeed puede ser de 66. En la tarde -revisando la misma página la Velocidad de carga puede ser de 65.

Con un servicio como GTmetrix también puedes medir el peso de una página web. Los valores son un poco distintos a los valores de Pingdom.

Resumen

La mayoría de las tiendas online en el Ecuador se cargan de forma lenta. Sin embargo, existen comercios electrónicos con páginas rápidas.

En algunos casos las imágenes son la fuente principal que frena los sitios. Pero en muchas ocasiones son problemas técnicos. Algunos como activar el caché y la compresión normalmente se puede arreglar fácilmente.

Corregir otros problemas como cambiar la forma como se carga el Javascript o el CSS son más difíciles de realizar.

En casi un 30 por ciento de los casos, un problema es el servidor que las tiendas ecuatorianas utilizan. Aquí se debe mejorar o cambiar el alojamiento.

Lo interesante es que no necesariamente las tiendas grandes y conocidas tienen las páginas más rápidas. Un buen ejemplo es Comandato que carga media lenta.

Hay una tendencia de que los sitios de los comercios electrónicos cada año son más pesados y contienen más elementos (javascript, CSS, etc.) que se debe cargar. Esto es porque las tiendas cada vez tienen más funciones y ofrecen maś posibilidades de conocer un producto que antes.

Sin embargo, creo que en el Ecuador todavía falta mucho por hacer en la optimización de la velocidad de carga de las tiendas online. El comercio electrónico en el país está creciendo. Pero ya no es suficiente tener sola un sitio web donde se vende productos sino ya es más y más importante optimizar este sitio.

Un sitio más rápido sirve para mejor el SEO y para aumentar la tasa de conversiones.

Sería interesante saber si la velocidad de carga también es un factor para los eCommerce Awards.