Como conseguir un 100% de Velocidad en Google PageSpeed con una tienda Prestashop

Este post está enfocado a desarrolladores/as expertos/as en Prestashop, ya que no contemplará las formas básicas de optimización, sino algunas más avanzadas.

Sinceramente, no es fácil conseguir un 100% en Google PageSpeed para ningún E-Commerce. Las grandes empresas lo persiguen y las optimizaciones tanto del servidor como de la web requieren mucha inversión de tiempo.



Nosotros lo hemos conseguido recientemente con un cliente y aquí os muestro cómo lo hemos hecho.

  • Web: https://www.comarfi.com/es/
  • Servidor: Debian con Plesk Panel.
  • RAM del Servidor: 32 GB
  • Proveeder del servidor: OVH
  • Versión del e-commerce: Prestashop 1.6.1


Para poneros en contexto:

Se trata de una web de venta de disfraces con más de 5.600 productos, por lo que la base de datos tiene que ser potente para que la web pueda ser ligera.

Voy a obviar en este post las reglas básicas de optimización de una web, ya cuento con que deben de estar hechas:

  • Compresión de la web en htaccess
  • Todas las imágenes con el tamaño definido
  • Mobile First
  • Consiguración de servicio CDN
  • Optimización en la zona de Rendimiento de Prestashop

Partición de Base de Datos

En un e-commerce se almacenan millones de datos, entre ellos cada consulta que los usuarios de la web realizan en la zona de búsqueda. Para aligerar la base de datos de Prestashop, lo que hice fue partirla en dos, dejando una sola base de datos para el almacenaje de las búsquedas de los usuarios en la web, por lo que el peso de la base de datos principal disminuyó bastante. También configuré a parte la base de datos del blog.

Carga de imágenes y fondos

Un paso fundamental que nos ha dado un gran empujón en nuestra web es contar con carga LazyLoad, tanto para imágenes como para los fondos de la web. Estuve un tiempo dándole vueltas a cómo hacer la carga en formato Lazyload para background-image y al final desarrollé un módulo que permite hacerlo con cualquier fondo basándose en el código nativo Lazy de Google.

Limpieza de código Smarty

Cuando desarrollamos cualquier web muchas veces tendemos a dejar parte del código comentado en los ficheros .tpl y eso al final perjudicará en la compresión de la web sobre todo en las webs con Prestashop. Tendremos que dejar limpios todos los ficheros.

Optimizar consultas a la base de datos

Se acabaron los “select * from”, cada consulta que realiza la web con un SELECT ALL, tardará más que si especificamos los campos requeridos que queremos consultar. Imagínate esta consulta cada vez que carga tu web.

Imágenes en Webp

Es importante que las imágenes estén optimizadas y que se el usuario (en este caso Google) tiene un navegador que soporta Webp, la web se las muestre en este formato.

Para ello, creé una regla en .htaccess y un cron en el servidor con un pequeño programa que diariamente identifica cada imagen de la web y si no existe su versión en webp, la crea.

Desinstalar módulos innecesarios o sin uso

Prestashop por defecto tiene varios módulos de Analítica en el backoffice y esto al final hará que nuestros usuarios naveguen más lento en nuestra web, ya que hay módulos por ejemplo que registran cada log. Lo que recomiendo es que no sólo se desactiven sino que también se desinstalen. Lo mismo con módulos que no tenemos activos. Para la analítica web usamos Google Tag Manager con la API de Analitycs.

  • También recomendable en el servidor. Si tenemos módulos en desuso, lo recomendable es desactivarlos y si es posible, desinstalarlos.

Optimiza la carga de ficheros JS

Los ficheros JavaScript serán los que seguramente más ralenticen la carga de tu web por lo que vigila bien cuáles cargas y cuáles no. Aunque Prestashop comprima todos los ficheros en uno, no cargues los que no sean necesarios. Puede haber módulos que utilicen los mismos JS de terceros (como por ejemplo JS de conexiones a Facebook).

En esta web, hicimos una integración con el Chat de Facebook por ejemplo, pero sólo requiere el JS de Facebook cuando el usuario interactúa con el Chat, por lo que no afecta a la carga de la página.

Siempre que puedas, para cualquier tipo de efecto, intenta utilizar CSS3 antes de JS como primera opción.

La carga asíncrona y al final de la página es un requerimiento básico en la carga de tus ficheros JS.

Evita efectos de transiciones

Para Google, hasta que la web no ha realizado la transición completa de todos sus elementos, no está completamente descargada así que elimina las transacciones que puedas de tu tienda prestashop. Para el usuario también será un punto fuerte en UX/UX.

Hay más optimizaciones a realizar, optimización de recursos en el servidor, la optimización de CSS, el balance entre velocidad y UX/UI, pero con estos valores presentes la velocidad de su tienda online en prestashop aumentará la velocidad considerablemente.

¿Quieres saber más?

Puedes echarle un vistazo a nuestro trabajo de Optimización WPO.

Darío Sánchez

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *