En este post te voy a explicar las diferentes acciones que puedes llevar a cabo para mejorar la velocidad de carga de Prestashop.
Si estás viendo este post, seguramente ya sabes lo importante que es para vender online tener una tienda online rápida. También para posicionarse mejor en Google.
En este post te comentaré algunos módulos que te puede ayudar extraordinariamente en mejorar el rendimiento de Prestashop. Así como otras acciones que puedes implementar con las opciones por defecto de Prestashop.
APÚNTATE A MI PLATAFORMA DE CURSOS ONLINE. ACCEDE A TODOS LOS CURSOS POR SOLO 10€/MES
INDICE: CÓMO MEJORAR VELOCIDAD DE CARGA Y RENDIMIENTO CON PRESTASHOP
- 1.- Módulos para mejorar la velocidad de carga de Prestashop (Módulos WPO Prestashop)
- 2.- Opciones de configuración de Prestashop para optimizar la velocidad de carga y rendimiento
1.- Módulos para mejorar la velocidad de carga de Prestashop (Módulos WPO Prestashop)
A continuación, te enumero 2 módulos para mejorar la velocidad de carga y rendimiento de Prestashop, sus características y configuración.
Son los mejores módulos en mi opinión entre los diferentes que puedes encontrar en Prestashop Addons, y ambos tienen un precio más que asequible.
Los resultados de ambos módulos son muy similares. El primero que te voy a comentar es más sencillo de configurar pues tiene menos opciones. El segundo tienes más opciones de personalización, por lo que es más personalizable. Pero, al final los resultados son similares en ambos, pues realizan más o menos las mismas tareas de optimización como son: cacheado de páginas, optimización de código, compresión de archivos, etc.
Módulo Prestashop para mejorar Velocidad de carga y rendimiento: Google PageSpeed Insights – Page Speed Optimization
Seguramente conoces la herramienta de test de rendimiento de Google conocida como Google PageSpeed Insights. Dicha herramienta analiza diferentes parámetros asociados a la web para valorar velocidad de carga y rendimiento.
Este módulo está especialmente diseñado para optimizar Prestashop a los requisitos que establece Google PageSpeed Insights.
De esta manera mejorará la valoración ante esta herramienta. Pero no solo eso. Habrá una mejora del rendimiento no solo a ojos de Google, sino también a ojos del usuario.
QUIERO EL MÓDULO
Las principales características del módulo son:
- i.- Compresión de archivos HTML, CSS, JavaScript, Texto, XML y archivos de fuentes
- ii.- Utilización de compresión gzip
- iii.- Pospone la carga de Javascript y CSS que bloquea la carga del contenido superior de la página
- iv.- Implementa caché de página
- v.- Implementa caché de servidor
- vi.- Optimiza la entrega de archivos CSS
- vii.- Minimiza archivos CSS y JavaScript
- viii.- Optimización de imágenes
- ix.- Optimización de base de datos
QUIERO EL MÓDULO
Este módulo tiene en el momento de escribir este post un precio de 69,99 €
Configuración del módulo Google Page Speed Prestashop:
Te voy a mostrar las principales opciones de configuración del módulo.
- Ultimate page caché: en esta pantalla dedicada a la activación del cacheo de páginas, simplemente establece el selector: “Page cache” en “ON” (lo demás déjalo como está) y haz clic en “Guardar”.
- Ultimate image Compressor: este apartado sirve para realizar una optimización de imagen. Simplemente, con las opciones por defecto haz clic en el botón: “Optimize existing images”
- Server caché and minimization: el este apartado dedicado a la generación de cache y minificación de archivos pon todas las opciones en “ON” y dale a “Guardar”
- Ultimate database optimization: este apartado está dedicado a optimizar la base de datos. Optmiza aquellos tipos de datos que el módulo te recomiende indicando que su estado no es “Bien” haciendo clic en el botón «clean»
- Browser cache and gzip feature: apartado dedicado a guardar páginas en caché del navegador del visitante y compresión en gzip, pon todos los selectores en “ON” y guarda.
Ya tienes configurado el módulo para optimizar el rendimiento de tu Prestashop.
QUIERO EL MÓDULO
Módulo Prestashop para mejorar velocidad de carga y rendimiento: Módulo performance PRO – All in One
Módulo muy completo en lo que a optimizaciones de rendimiento de Prestashop se refiere. Si me apuras, yo creo que el más completo que hay en el mercado.
Las principales características del módulo son:
- i.- Implementa caché de página
- ii.- Caché de navegador
- iii.- lazy load (cargar medios cuando el usuario los vaya a visualizar y no antes) de imágenes, iframes, vídeos y pie de página.
- iv.- mejora del scrolling con “pasive envent listener”
- v.- Compresión de archivos GZIP
- vi.- HTTP/2 push CSS
- vii.- Mejora del sitio añadiendo rel=“noopener” a todos los enlaces
- viii.- Minificación HTML
- ix.- Optimización rendimiento de atributos
- x.- Decode image Asynchronously
- xi.- Añadir “missing image size” (dimensiones faltantes de imágenes)
- xii.- Optimización de imágenes a formato WebP
- xiii.- Recomendaciones sobre módulos activos
Este módulo tiene en el momento de escribir este post un precio de 69,99 €
QUIERO EL MÓDULO
Configuración del módulo Performance Pro:
Te voy a mostrar ahora las principales opciones de configuración de este módulo de optimización de rendimiento y velocidad de Pretashop.
Una vez te hayas instalado el módulo, para la configuración tendrás que ir al menú del panel de administración de Prestashop y hacer clic en: “PERSONALIZAR > Performance pro”
Te aparecerá una interface con un menú lateral. Vamos a ver una configuración estándar del módulo.
Pestaña: Caché (sirve para poner en marcha una caché de páginas Prestashop y otra en el navegador del cliente)
En este apartado, activa las dos opciones. Es decir, pon “Page Cache” en “Enabled” y “Browser cache” también en “Enabled”
Guarda los cambios
Pestaña: Carga perezosa o lazy load (estas opciones sirven para que la carga de las imágenes no se haga hasta que el usuario las visualice)
Activa las cuatro opciones. Es decir, por en “Enabled” las opciones: “Cargar imágenes perezosamente”, “cargar perezosamente todos los iframes”, “cargar vídeos perezosamente”, “cargar perezosamente el pie de página”.
Guarda los cambios
QUIERO EL MÓDULO
Pestaña: Page optimization (Optimizaciones de páginas, como compresión de archivos)
En este apartado activa (pon en “Enabled”) las siguientes opciones: “Use passive event listeners”, “Gzip/DEFLATE”, “HTTP/2 push CSS”, “Add noopener”.
Guarda los cambios
Pestaña: HTML Optimization (Optimizaciones de código)
Pon en “Enabled” las siguientes opciones: “Minify HTML”, “Optimize attributes”, “Async image decoding”, “add missing image size”.
Guarda los cambios
Pestaña: Image Optimization (Optimizaciones de imágenes)
Pon en “enabled” las siguientes opciones: “Convert JPEG images to WebP”, “Convert PNG Images to WebP”.
Los valores de JPEG Image quality y PNG Image quality déjalos tal cual están por defecto.
Guarda
Ya estaría la configuración.
En la pestaña Module Analytics te recomendará que desactives los módulos de estadísticas. Pero de esto te hablaré en los siguientes apartados.
QUIERO EL MÓDULO
2.- Opciones de configuración de Prestashop para optimizar la velocidad de carga y rendimiento
Vamos a ver las opciones principales que pone a nuestra disposición Prestashop para mejorar el rendimiento y velocidad de la aplicación.
Para acceder a estas opciones iremos a: “panel de administración > CONFIGURAR > Parámetros avanzados > Rendimiento”
En esta página tenemos diferentes opciones clasificadas en varios apartados. Vamos a ir viendo cada uno de los apartados:
Smarty
Smarty es el motor de plantillas utilizado por los temas de Prestashop. Es importante tener la caché smarty activada para aumentar la velocidad de carga de las páginas de Prestashop.
- i.- compilación de plantillas: “Recompilar las plantillas cuando los archivos sean modificados”
- ii.- Caché: Sí
- iii.- Sincronizador multiservidor: no
- iv.- Tipo de caché: Sistema de archivos
- v.- Borrar la caché: Borrar la caché siempre que algo se haya modificado.
En este post te explico todos los destalles sobre cómo configurar la caché en Prestashop y en este otro cómo se borra la caché en Prestashop
Modo depuración
Este apartado sirve para poder establecer algunos filtros para intentar averiguar porque razón se produce un error en Prestashop. Por lo que no tiene nada ver con el rendimiento de la aplicación.
Dejaremos las dos opciones en “NO”.
- Desactivar los módulos no nativos de PrestaShop: NO
- Desactivar todos los overrides: NO
- Modo depuración: NO
Características opcionales
Ahora vamos a ver una serie de funcionalidades de Prestashop que podemos desactivar para mejorar su velocidad de carga y rendimiento. Pero ten en cuenta que desactivar estas opciones supone desactivar algunas funcionalidades de la tienda online.
- Combinaciones: si no vas a utilizar los atributos o combinaciones en los productos, puedes desactivar esta opción poniéndola en NO. En caso contrario debes dejarla en SI. Para poder desactivar esta opción es necesario que antes elimines los atributos presentes en la tienda.
- Características: Si no vas a utilizar las características de los productos (Ficha técnica). Puedes desactivar esta opción. En caso contrario debes dejarla en SI.
- Grupos de clientes: Si no vas a hacer uso de los grupos en Prestashop puedes desactivar esta opción. En caso contrario debes dejarla en SI.
CCC (Combinación, compresión y caché)
Pon todas las opciones en “SI” para mejorar el rendimiento de la aplicación. Todas las opciones son relativas a la compresión de código, combinación de archivos en uno y tiempos de duración de caché en local. Todo ello con la finalidad de aumentar la velocidad de carga.
- * «Smart cache» para las hojas de estilo (CSS): SÍ
- * «Smart cache» para el código de JavaScript: SÍ
- * Optimización de Apache: SÍ
Pulsa el botón de guardar
Caché
Esta opción sirve para poner en funcionamiento algún tipo de cache a nivel de servidor (a parte de la caché Smarty). Existen diferentes tipos de caché: Sistemas de archivos, Memcached, APC y Xcache.
Si tu hosting tiene implementado alguno de estos sistemas de caché podrías implementarlo en tu web. Por lo que debes consultar a tu empresa de hosting.
Si utilizas algún sistema de caché de página con algún módulo de los que hemos visto anteriormente, no tendrías que utilizar ya una caché de este tipo.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
