WPO Prestashop. Aumentar la Velocidad de Carga para mejorar el SEO

No vamos a entrar a valorar los factores SEO más importantes de este año ni nada por el estilo. Pero mentiríamos si no dijésemos que entre esos factores uno de los más importantes es el SEO Técnico. Y dentro de este apartado se encuentra la Velocidad de carga de la web.

¿Por qué es importante mejorar la velocidad de carga para el SEO?

Por varias razones. La principal es por la experiencia de usuario. Un tiempo de carga desmesurado hará el que usuario o posible comprador de la tienda abandone la misma, ya no por aburrimiento, sino por desconfianza. Y es que en los albores del siglo XXI, la influencia del dispositivo y / o la red de conexión utilizada es muy pequeña en el conjunto de los factores que afectan a la velocidad de carga de una web. Por ello el que los usuarios abandonen la tienda por su tardanza en cargar genera una mala experiencia de usuario, y éste es otro factor muy importante para el posicionamiento de una Tienda.

Por otro lado, Google asigna a cada web un Crawl Budget, también llamado presupuesto de Rastreo. Se trata de un tiempo asignado para que el robot rastree las urls de una tienda. Por ello, a grandes rasgos, si una url tiene un tiempo de carga de 5 segundos, al ser rastreada por el robot de Google consumirá 5 segundos del mismo. Si bajamos la velocidad de carga a 1, los otros 4 segundos serán utilizados por el robot para rastrear otras urls de la miasma web, y por tanto tendrás más posibilidades que Google indexe más palabras clave de tu proyecto.

Ya sabemos el por qué la velocidad de carga es crucial para el SEO. Ahora explicaremos cómo optimizar una Tienda Prestashop para mejorar su velocidad de carga.

Lo primero que tenemos que hacer es medir la velocidad real de carga. Para ello utilizaremos dos herramientas: Pingdom tolos y Gtmetrix:

Acceso a Pingdom tools: https://tools.pingdom.com/

Acceso a Gtmetrix: https://gtmetrix.com/

Será el punto de partida para llevar a cabo las diferentes labores de WPO.

Pasos para mejorar el WPO de una Tienda en Prestashop

Rendimiento Prestashop

Es el lugar en donde deberemos entrar para modificar los parámetros de optimización de Prestashop para mejorar la velocidad. Es lo único que podremos hacer desde el backoffice de la plataforma sin instalar módulos adicionales. De forma nativa Prestashop ofrece al webmaster la posibilidad de trabajar varios conceptos para mejorar el rendimiento. Y por ello a esta sección le ha llamado Rendimiento.

Para acceder tenemos que pinchar en Opciones Avanzadas >>> Rendimiento

El primer módulo de rendimiento es el llamado Smarty.

La primera opción que debemos elegir es la compilación de la plantilla.

En este apartado deberemos elegir entre 3 opciones:

• Nunca recompilar los archivos de la plantilla: No se compilará nunca la plantilla aunque se modifique.
• Recompilar las plantillas cuando los archivos sean modificados: Sólo se compilará aquellos archivos que hayan sido modificados.
• Forzar compilación: Se compilará siempre.

La segunda opción es la activación de Caché. Lo recomendable es tenerlo activado, para que la plantilla sea cacheada. Por defecto la caché de Prestashop está configurada para utilizar sistema de archivos, pero también se puede seleccionar que utilice la BBDD MySQL para la caché.

La sincronización multiservidor será otra opción que deberá activarse si se utiliza más de uno.

También podemos borrar la caché cuando algo se modifique o no borrar nunca.

Lo ideal es conocer tu proyecto para saber que apartados vamos a activar o desactivar, pero en condiciones normales, deberemos dejarlo como en la imagen.

El segundo bloque de rendimiento es el modo depuración.

Las opciones que tenemos en este caso son:

• Desactivar los módulos no nativos de Prestashop: Esto significa que si has instalado algún módulo adicional, que no vaya incluido de forma nativa en Prestashop se desactivará, por si puede provocar una ralentización de la web.
• Desactivar los métodos overrides: Si desactivas el método sobrecarga obligas a Prestashop a no sobrecargar ningún proceso de programación.
• Modo depuración: si activas el modo depuración aparecerán en pantalla todos los errores técnicos.

Cada proyecto es distinto, por ello deberás elegir la combinación adecuada para el mismo.

Características opcionales.

Son tres opciones que podemos habilitar o deshabilitar según nuestras prioridades y necesidades:

• Combinaciones: Sólo si no tenemos combinaciones podremos desactivar las combinaciones (atributos). En caso de tenerla aparecerá como en la imagen y no dejará activar o desactivar.
• Características: En Prestashop aparecen como una pestaña junto a la descripción larga. A veces las características ralentizan tu web en gran medida. Por ello una buena estrategia podría ser desactivarlas.
• Grupos de clientes: Si no trabajas con grupos de clientes, lo mejor es desactivarlos también. Ahora bien, si ofreces distintos descuentos a grupos distintos de clientes, etc… deberás tenerlo desactivada esta opción.

 

Módulo CCC ( Combinación, compresión y caché)

Lo primero que debemos decir sobre este apartado de rendimiento es que no todas las plantillas de Prestashop lo soportan. Lo que conseguimos con esto es combinar todos los archivos css en uno solo al igual que con los js, minificar (comprimir) los archivos eliminando líneas que no sirven para nada y optimización de Apache para la activación de la caché.

Por ello algunas plantillas cuando minificas o combinas archivos CSS haces que se “rompa” la visualización principal de la plantilla. Si te ocurre esto tienes dos opciones: Utilizar otra plantilla o tratar de arreglarlo, o no utilizar la opción que provoque el fallo.

Las opciones son:

• “Smart cache” para las hojas de estilo (CSS): Combina y comprime todas las hojas de estilo CSS en una sola reduciendo su peso de forma global.
• “Smart cache” para el código de JavaScript: Combina y comprime todas las páginas de código JS.
• Optimización de Apache: Optimizará la configuración del servidor web para conseguir mayor eficiencia de la CCC.

En versiones anteriores de Prestashop, como la 1.6 había 6 opciones distintas. En la 1.7 la han resumido en 3.

La siguiente opción es para utilizar Servidores de medios o CDN

Aquí lo más lógico es utilizar servidores CDN ya sea de Cloud Flare o de Amazon CloudFront. Ambos son interesantes para poder mejorar el rendimiento web y, por tanto, la velocidad de carga.

 

El último apartado para configurar es la utilización de caché.

En este caso podremos elegir entre varios tipos de cacheado de servidor. Memcaché se utiliza habitualmente cuando tenemos varios servidores, como por ejemplo con Cloudflare. APC se  utiliza sólo cuando dispones de un servidor. Mientras que Xcaché se trata de un sistema de cacheado para el servidor Lighttpd, y no es compatible con Apache.

 

Lo ideal es utilizar la caché conforme está la imagen, e incluir en el apartado multiservidor, los servidores CDN que hayas contratado adicionales. No obstante, como hemos comentado ya en otras ocasiones, cada proyecto es distinto y necesita una combinación distinta.

 

Minificación de Imágenes

A menudo el principal problema de la velocidad de carga de una web es el peso de la propia web. Si bien es cierto que las hojas de estilo y algunos ficheros JS sobrecargan la plantilla, la componente que más peso aporta a una web es la imagen. Por ello deberá reducir al máximo las imágenes que utilizas para subirlas en la tienda online.

Por cada imagen que se sube Prestashop crea varias de forma adicional, según la configuración y plantilla. Por ella la imagen que se decida subir a un producto debe ser lo suficientemente grande como para satisfacer las necesidades de búsqueda del usuario pero no ser demasiado pesada, para que tarde en cargar muy poco.

Aquí tenemos dos variantes:

1. Si ya tenemos las imágenes subidas muy grandes e indexadas en Google.
2. Si todavía no hemos subido ninguna imagen.

En el caso primero podemos hacer dos cosas. Hacerlo de forma manual (opción no recomendable, porque cada imagen está replicada un mínimo de 12 en una plantilla), por lo que deberíamos acceder por FTP, descargar cada imagen, reducirla con Photoshop o cualquier otro programa de tratamiento de imágenes y volverla a subir en el mismo sitio sustituyendo la nueva por la antigua en el server. La otra situación es hacerlo de forma automática. Para ello utilizaremos un Plugin llamado “Módulo Compresor de Imágen con TinyPNG”.

De esta forma el módulo se encarga de reducir y optimizar todas las imágenes de la tienda. Sinceramente, por el coste que tiene: 39,95€ es totalmente recomendable, ya que te ahorra un tiempo muy valioso que lo puedes utilizar en otra cosa, como por ejemplo captación de enlaces o escribir contenido original para tu tienda.

¿Por qué no debes cambiar las imágenes en cada producto del backoffice?

No podemos eliminar las imágenes y subir otras nuevas reducidas porque en la mayor parte de los casos lo hará con una url nueva. Y si las imágenes están indexadas, ya que todavía estamos hablando de la variante 1, esa url devolverá un error 404 y esto es perjudicial para el SEO. Si no queremos ir imagen por imagen como indicábamos anteriormente debemos hacer las redirecciones 301 pertinentes para no perder posicionamiento en Google.

En cuanto a la 2ª variante, si todavía no hemos subido ninguna imagen, será mucho más fácil, porque lo único que deberemos hacer es optimizar esa imagen y dejarla con el menor peso posible sin perder calidad. Para ello podemos utilizar algún programa de tratamiento de imagen, como Photoshop o podemos utilizar la herramienta Tinypng. Esta herramienta es gratuita, y podemos utilizarla en formato online.

El enlace para acceder aquí es: https://tinypng.com/

La forma de utilizarlo es fácil. Arrastras aquí o cargas la imagen y descargas la imagen ya reducida. Comprueba que la reducida no pierde calidad. Puedes incluso subir varias a la vez y descargarlas en un zip.

Sea como fuere, el tratamiento de las imágenes es crucial si se quiere conseguir que el peso de la tienda sea el adecuado.

Compresión GZip

La compresión gzip es un sistema de compresión de archivos en el lado del servidor de forma que se reduce en gran medida el peso global de los ficheros. Los navegadores son capaces de descomprimir dichos archivos y mostrarlos tal y como son.

Para poder utilizar la compresión Gzip es necesario que el servidor esté preparado para tal fin. Mediante el archivo info.php podrás saber si está o no activada. Si tienes dudas habla con tu proveedor de hosting y te solucionará el problema.

En el caso de la tienda sólo necesitaremos poner un código en fichero .htaccess que se encuentra en la raíz de la tienda. El código que tenemos que poner es el siguiente:

<IfModule mod_deflate.c>

<IfModule mod_filter.c>

AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript font/ttf application/x-font-ttf font/otf application/x-font-otf font/opentype

</IfModule>

</IfModule>

Con esto haremos que nuestra web pese mucho menos y se abra con más velocidad, pero también ocupará más recursos (RAM) en el servidor.

 

Módulos no utilizados.

El problema de los CMS es que tendemos a utilizar módulos para todo. Es imprescindible utilizar los módulos justos, y aquellos que no utilicemos no solo hay que desactivarlos sino que también hay que borrarlos. El problema es que si no los borramos dejan multitud de residuos en JS y hojas de estilo que no hacen otra cosa sino aumentar el tiempo de carga de la tienda. Lo ideal es desactivarlos todos los que no vayamos a utilizar, aunque hay algunos que se utilizan de forma puntual. A mi modo de ver lo mejor es instalarlos en el momento que los utilicemos y luego los desistalemos (borremos del backoffice).

Tema – Plantilla de Prestashop utilizada.

Es común que cuando se elige una plantilla para Prestashop, no se hable con el Consultor SEO o con el especialista de marketing que desarrollará el proyecto web. Y por ello es habitual también que la plantilla o theme elegido se haga única y exclusivamente por la línea gráfica y elegancia del sitio, es decir, sólo atendiendo a los gráficos.

Pero este es uno de los errores más grandes que podemos cometer. Y es que en la mayor parte de los casos, pese a hacer todo lo anterior no conseguimos mejorar la velocidad de carga de nuestra tienda. Esto es debido a la propia programación del Site. Y es que hay temas que utilizan módulos propios que añaden llamadas continuas innecesarias, algunas de ellas en bucle y provocan que el tiempo de carga de la web sea desmesurado.

Obviamente, no voy a poner aquí ningún theme o desarrollador que hace temas no recomendables, por razones obvias, pero si diré cuáles son los mejores temas para conseguir una mayor velocidad de navegación en la web.

Los temas ideales son todos aquellos que utilizan la base del tema por defecto de Prestashop y no utilizan ningún módulo adicional para hacer ciertas funciones en la portada.

En las próximas semanas sacaré un listado de los mejores temas de Prestashop desde el punto de vista de la velocidad de carga. Si quieres que te avise Suscríbete a la comunicad Elblogdelseo y serás el primero en saberlo.

[thrive_leads id=’4274′]

Hosting

Aquí hay tanta controversia y desconocimiento que a menudo se desinforma a los propietarios de una web por parte de los propios diseñadores. Cuando una web es lenta y tarda en cargar, lo más sencillo es decir: “hay que mejorar los recursos del hosting”, “la culpa es del alojamiento web”, “tenemos que cambiar de hosting, este es una… “. Es lo más fácil. Si el dueño de la web no entiende de nada lo más normal es que crea lo que dice el programador, que es la persona de confianza que ha contratado para sacar a delante su proyecto. Pero en la gran mayoría de los casos la experiencia me dice que no es culpa del hosting, sino de la inexperiencia, inaptitud, inactitud o simplemente desconocimiento para afrontar la optimización de una tienda online, en este caso en Prestashop.

¿Cómo saber si me no me están diciendo la verdad?

Si no queremos poner un ticket al soporte del hosting ni nada de esto, haremos una comprobación muy sencilla:

Vamos a medir la velocidad de carga en el robots.txt. Para ello entramos en https://tools.pingdom.com/ y en la dirección colocamos nuestro dominio/robots.txt de esta forma nos dará el tiempo de carga y el tiempo de respuesta de nuestro hosting.

Otra cosa es que tengamos un hosting compartido y que la web necesite tantos recursos (RAM, transferencia…) que no es capaz de servirlo el propio hosting. En estos casos deberemos llamar a la empresa de hosting y solicitar un upgrade con mejores capacidades.

Desde el punto de vista técnico estos serían los mejores hosting que se pueden utilizar para tu web en Prestashop:

 

Plugin de Caché para Prestashop.

Hay varios Módulos que podemos utilizar para trabajar con nuestra web cacheada y mejorar la velocidad de carga de la web.

El que módulo más interesante sería el llamado “Page Caché Ultimate”.

Es un módulo de pago que podemos encontrar en el repositorio de Addons de Prestashop aunque el enlace lo he puesto de la propia web del autor, que es más barato. Cuesta unos 149€. ¿Caro? Bueno pues en realidad para una web que no tiene ventas sí que lo puede ser. Pero si lo instalamos en una web que tiene unas 3-4 ventas diarias, sería muy rentable, debido a que mejoraría la carga de la web y por tanto la tasa de conversión. Sólo en muy poco días se rentabilizaría el coste del módulo.

¿Qué resultados obtenemos con el plugin?

En la siguiente imagen puedes ver una muestra de la velocidad de carga medida con Pingdom de bombillasledpro.com antes de instalar el módulo de Jpresta:

A continuación instalamos el módulo del enlace anterior, lo configuramos y activamos caché. Los resultados son sorprendentes:

Vemos cómo se reduce la velocidad de carga en más de medio segundo y aumenta el performance Grade en 10 puntos.

Este es el aspecto que tendría el módulo en modo producción.

Tiene un Widzard muy intuitivo. No necesitas tener conocimientos de sistemas ni de programación para instalarlo y configurarlo.

Es de lo mejorcito que hay en Prestashop.

 

En resumen, si queremos mejorar la velocidad de carga de nuestra tienda en Prestashop deberemos:

1. Configurar de forma adecuada la sección de rendimiento de la web
2. Optimizar las imágenes para quitar peso a la web.
3. Compresión Gzip
4. Organizar y eliminar módulos no utilizados
5. Elección de la plantilla.
6. Hosting
7. Módulo de Caché Premium

Si hacemos todo esto nuestra web volará.

¿Crees que podemos hacer algo más para mejorar la velocidad de carga?

Actualización con aportes de los comentarios:

Santiago Alonso:

(Antonio López: he añadido este aporte de Santiago que me parece tremendo en todos los sentidos por su simplicidad y su lógica, pero también por su creatividad)

he detectado que sí permite arañar unos ms a la carga es revisar, sobre los módulos que sí estamos usando, en qué páginas se van activando.

Muchos módulos se activan por defecto en la home y cargan scripts estilos o incluso html e imágenes que no tiene sentido alguno cargar. Usando el debug profiler y las excepciones de los hooks en cada módulo se puede ahorrar algo de peso.