digitalDot diseño webLogo Diseño Web digitalDot

Optimización de velocidad en una tienda online

17/05/2016

Optimización de velocidad en una tienda onlineEsta semana hemos recibido la contratación para SEO y posicionamiento web de una tienda online basada en PrestaShop, nos había llegado con una plantilla de themeforest, sin duda estas plantillas han conseguido facilitar el lanzamiento de tiendas, pero en algunas ocasiones están dando lugar al cierre de comercios online por pérdidas de ventas al no conseguir un correcto posicionamiento.

No quiero decir con esto que todos los themes sean malos, pero los que encontramos habitualmente contienen muchos fallos de programación ni tienen en cuenta la velocidad de cargar de la web.

¿Por qué es necesario mejorar la velocidad web?

Mientras trabajaba en este proyecto, he leído un post de uno de los grandes de este mundillo, Rubén Alonso, donde nos comentaba como la velocidad de carga de la web es fundamental para reducir nuestro porcentaje de rebote y conseguir captar a nuestro público.

En algunos detalles del artículo del blog optemos datos como que la velocidad de la página web debe ser menor a 4 segundos y si la gente nos visita desde el móvil será imposible que aguante mucho más, sabemos que es un factor importante en el algoritmo de Google, quien mostrara siempre aquellas web de mayor velocidad y usabilidad.

Otro de los puntos que nos llamó la atención fue donde podían evaluarse que un 0,1 segundo implicaba la pérdida del 1% de las ventas de nuestro e-Commerce, por ello debemos dedicar cierto esfuerzo a mejorar el WPO de nuestro negocio online.

Cuando nos llega una web de este tipo, lo primero que hacemos es medir y valorar los tiempo de carga y su capacidad, en nuestro caso gracias a herramientas como Firebug podemos ver rápidamente la velocidad de carga, los tiempos de demora y donde está el gran problema, si es por una carga excesiva de javascript, CSS o bien por el tamaño de imágenes.

Herramientas para medir la velocidad de una web

Si no conoces Firebug en Chrome también han lanzado un debug que viene preinstalado, sólo debemos darle a F12 para mostrarlo, si no queremos complicarnos la vida herramientas como GTmetrix, PageSpeed de Google o Pingdom, son herramientas online para poder evaluar nuestra velocidad. Aquí os dejamos el enlace de cada uno de ellas:

https://gtmetrix.com/
https://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/

Por nuestra parte nos gustan todas ellas aunque si tenemos que destacar alguna es Pingdom, porque nos permite ver un historial de las optimizaciones de la web, un gran comparador para mostrar el trabajo conseguido.

velocidad de carga web

Bien, para comenzar, revisamos si tiene activado la compresión de CSS y js desde nuestro panel de administración de Prestashop, este suele ser la instrucción más común cuando buscas por internet optimización de nuestra Ecommerce, recordar que una vez lo activéis debéis comprobar el funcionamiento completo de la tienda incluido un proceso de comprar, para poder activarlo, nos vamos a la opción del Backend de PrestaShop, Parámetros avanzados -> rendimiento ->

velocidad de carga y posicionamiento web

Sin duda con esto reducimos el número de llamadas al servidor y el número de conexiones por lo que nuestro servidor entregará de forma más rápida la web.

Con las herramientas anteriormente elegidas podemos analizar si alguna foto tiene un tamaño excesivo o si el slider no tiene el tamaño adecuado, en nuestro caso, las fotos estaban bien optimizadas por lo que pudimos reducir escasamente 500 kb del tamaño teniendo que seguir trabajando más a fondo para optimizarla.

Los principales demoras de carga pueden venir por exceso de módulos, por ello nos tocaba analizar aquellos módulos activos y no funcionales. Nos hemos topado con una plantilla que usa un gran número de módulos, por lo que debemos encontrar un proceso fácil para nuestra optimización.

En esta ocasión PrestaShop tiene una gran utilidad que nos va a permitir analizar la carga de nuestra tienda online analizando la demora por módulos o por consultas lentas.

Para ello, vamos a nuestro directorio “Config”de PrestaShop y abrimos el fichero define.inc y modificamos la línea.

define('_PS_DEBUG_PROFILING_', false);

por

define('_PS_DEBUG_PROFILING_', true);

Este cambio no es recomendable hacerlo con tiendas online en producción o en horarios en los que tengamos visitantes, sería recomendable en caso de no tener un entorno de desarrollo, poner la tienda online en mantenimiento de forma que nuestros visitantes no se vean afectados por nuestro proceso de optimización.

Una vez entramos en nuestra tienda con el debug activado, debemos ir a nuestro panel de administrador, al Backend de la tienda, recordar que por motivos de seguridad es recomendable crear una url personalizada para nuestro gestor de PrestaShop, veremos una pantalla como la siguiente

velocidad de carga posicionamiento web

Como podemos ver tenemos un resumen de carga, donde nos informara en color rojo de aquellos puntos donde el tiempo de carga o memoria excede de lo recomendable. Así como aquellos módulos que ralentizan nuestra web.

mejorar velocidad de carga y posicionamiento web

En esta ocasión, hemos querido sacar los valores de una tienda limpia en PrestaShop 1.6.1.5 para poder compararla con la tienda online de nuestro cliente pudiendo evaluar la carga de consultas, procesos y configuración.

web más rápida

Si nos fijamos la tienda del cliente tiene una diferencia de casi un segundo en el config, por lo que recuperamos el fichero configuration y profile de la versión PrestaShop original que le correspondía, consiguiendo optimizar en casi 2 segundos la carga de la web.

posicionamiento web mejora velocidad de carga

Si nos fijamos en la parte de Load Time nos informa un mensaje diferente al anterior “You'd better run your shop on a toaster” ahora nos indica que “Unicorn powered WebServer”.

Si nos preguntamos cómo estas clases han sido alteradas solo debemos pensar en que nuestra plantilla adquirida ha podido añadir alguna funcionalidad que estaba afectando al rendimiento de nuestra tienda online.

Optimización WPO

Esto ha sido sólo el principio de la optimización WPO para una tienda online, ahora tendremos que realizar algunas mejoras como:

  • Afinar la compresión de css
  • Optimización de carga en javascript
  • Optimización de imágenes con técnicas de Sprites CSS
  • Reducción de tamaños de imágenes acorde a la resolución de nuestro visitante.

Si analizamos nuestra tienda con Pingdom antes de la mejora optemos los siguientes datos

posicionamiento web tienda online velociad carga

Después de la mejora, hemos reducido el tamaño y el tiempo, como veréis aún estamos por encima de lo recomendado por Google de 4 Segundos, que sería lo ideal para un correcto posicionamiento web en buscadores.

posicionamiento web tienda online

Gracias a Rubén Alonso por permitimos compartir su blog en nuestra web y de aquí felicitarle por sus grandes artículos, si queremos estar al día en SEO y Posicionamiento es uno de los blog más recomendables.

crossmenuchevron-down