Qué es Google PageSpeed Insights
Google ya confirmó en 2010 que la velocidad de carga es uno de los factores de posicionamiento SEO. Hay también muchos estudios que confirman la relación entre la velocidad de carga y la tasa de conversión. Por este motivo crearon una herramienta que nos facilitara la medición de la velocidad y nos diese recomendaciones sobre los puntos que debemos trabajar: Google PageSpeed Insights.
Obtener una buena nota en PageSpeed nos asegurará que no perderemos usuarios por culpa de largas esperas y como mínimo, que Google no nos penalizará o incluso nos premiará por la alta velocidad de carga.
Y en el mundo real, ¿cuales son las notas normales de PageSpeed?
Veamos las notas de las webs más visitadas del mundo según Alexa:
Alexa top sites PageSpeed
| www.google.com | 100/95 |
| www.youtube.com | 62/69 |
| www.facebook.com | 65/88 |
| www.baidu.com | 86/99 |
| www.wikipedia.org | 86/95 |
| www.yahoo.com | 69/74 |
| www.reddit.com | 64/76 |
| www.amazon.com | 70/88 |
La primera nota corresponde a móvil y la segunda a escritorio, vemos que para ser las primeras webs del mundo no son unas notas impresionantes, incluso algunas bastante pobres como el caso del 62/69 de youtube.
Aunque también vemos que no hay ninguna nota muy mala, ninguna baja del 60, incluso en escritorio excepto youtube todas están por encima de 70.
PageSpeed y Prestashop
Vamos ahora a ver de cerca las velocidades de tiendas que usen Prestashop.
Midiendo la demo oficial de Prestashop
La demo oficial de Prestashop, http://demo.prestashop.com, debería darnos una idea de la nota a la que podemos aspirar en nuestra tienda. Tengamos en cuenta
que es la tienda demo oficial creada por la propia Prestashop, además sin ningún módulo adicional que pueda perjudicar el rendimiento.
PageSpeed nos da un 80 en móvil y un 78 en escritorio, que no está mal, pero teniendo en cuenta que es un Prestashop en unas condiciones óptimas y por lo tanto
es la nota más alta que podemos conseguir, deja de parecer una nota tan alta y empieza a parecer una nota muy pobre.
Pero si analizamos en detalle los consejos que da PageSpeed para la demo, vemos que igual las condiciones no son tan óptimas como podríamos pensar, la primera optimización que pide es especificar la caché del navegador, este es un problema que no tiene nada que ver con Prestashop en sí, es una configuración que se ha de hacer a nivel de servidor.
La tercera pide que se optimice las imágenes, es también otra condición que no depende de la arquitectura de Prestashop sino de que simplemente se deben comprimir algunas imágenes que ocupan demasiado.
Estos dos simples cambios conseguirían mejorar unos puntos las notas.
Lo que sí depende directamente de Prestashop en sí son las otras 3 optimizaciones que pide PageSpeed, minificar javascript, CSS y HTML, que como veremos más adelante son opciones ya integradas en Prestashop.
Algunos ejemplos con tiendas de alto tráfico funcionando con Prestashop
Veamos algunos casos más, ya no de demos si no de tiendas reales en funcionamiento y con bastante tráfico:
| www.privatesportshop.fr | 50/48 |
| www.lepetitvapoteur.com | 61/79 |
| addons.prestashop.com | 65/46 |
| www.mikroe.com | 3/6 |
| www.footshop.com | 56/75 |
| thenextdoor.fr | 58/66 |
| www.starcowparis.com | 67/76 |
| www.maptiteculotte.com | 31/36 |
Tampoco vemos notas buenas por ninguna parte (el verde es a partir de 85) y ya sí que empezamos a ver algún que otro desastre,
como el 3/6 de mikroe.com o el 31/36 de maptiteculotte. ¿Será que es imposible conseguir un sobresaliente en PageSpeed con Prestashop?
Veamos también ejemplos con Magento
Probemos entonces con algunas de las tiendas con mayor tráfico que usan Magento
| www.g2a.com | 55/71 |
| www.endclothing.com | 61/70 |
| www.kinguin.net | 69/75 |
| shop.doverstreetmarket.com | 34/36 |
| www.overkillshop.com | 17/43 |
| www.sivasdescalzo.com | 21/26 |
| marketplace.magento.com | 43/50 |
| amasty.com | 71/84 |
Pues parece que tampoco, de nuevo vemos varios desastres, como el 17/43 de overkillshop o el 21/26 de sivasdescalzo, aunque aquí
si vemos una tienda que roza el verde al menos en escritorio, amasty. Pero hasta ahora los únicos verdes que hemos visto han sido en los top sites de Alexa.
Optimizando Prestashop para PageSpeed, un caso real
Vamos a ver en detalle el caso de nuestro cliente, una tienda de pinturas: www.potsdeco.com que tras el diseño e instalación de los módulos
necesarios para su funcionamiento comenzó con una nota de 28/34.
Hay que tener en cuenta que cada caso tiene sus peculiaridades y sobre todo los diferentes módulos y temas pueden ralentizar a Prestashop de maneras muy distintas.
Activando las opciones de optimización de Prestashop
En el backend de Prestashop, en Parámetros Avanzados / Rendimiento tenemos las principales armas de Prestashop para mejorar la velocidad, por un lado debemos asegurarnos de que la caché esté activada:
Y por otro lado tenemos la sección «Combinación, Compresión y Cache». Estas opciones entre otras cosas juntarán en uno todos nuestros archivos CSS y javascript y pasarán al final de la página la ejecución del javascript lo que reducirá el retraso al mostrar la tienda a los usuarios.
Podemos activarlas todas y en caso de que provoquen algún problema podríamos activarlas de una en una para dejar desactivada sólo la problemática.
Optimización de imágenes
En este primer paso podemos aprovechar también para optimizar las imágenes, es un problema habitual que haya alguna imagen que debamos optmizar. Normalmente el problema va a ser debido a uno de estos dos motivos:
1. La imagen es demasiado grande
Podemos tener alguna imagen que se está mostrando en pantalla a un tamaño mucho más pequeño del que tiene realmente la imagen, por ejemplo podemos haber subido una imagen de 2500 x 1200 y que realmente la imagen se esté mostrando a un máximo de 800 píxeles de ancho, esto siempre será un problema y la solución es tan fácil como subir de nuevo la imagen a un tamaño más apropiado.
2. La imagen no se ha comprimido
Necesitaremos recomprimir las imágenes con alguna de las muchas herramientas disponibles, en nuestro caso lo hacemos de forma automática con todas las imágenes mediante pngquant y jpge-recompress.
También podremos usar las versiones de las imágenes que nos ofrece google ya optimizadas:
En el caso de nuestro cliente, tras la activación de las optimizaciones de Prestashop y la mejora de las imágenes hemos pasado de una puntuación de 28/34 a un 50/66, al menos ya sacamos un aprobado.
Módulo Stripe
Uno de los problemas más complicados en el caso de Prestashop es el de los módulos, añaden cargas de ficheros e imágenes que no siempre son fáciles de controlar. Es el caso del módulo de cobro con Stripe de nuestro cliente que incluía una llamada a la API de Stripe en cada una de las páginas de la tienda, lo que añadía un retardo en toda la tienda.
Tras añadir un override que corrigiese el problema, conseguimos otro buen empujón en nuestro camino hacia la zona verde, pasamos de 50/66 a 61/72.
Optimizaciones manuales de CSS
Para apretar un poco más la optimización del CSS y mejorar la carga del contenido de la parte superior extrajimos el CSS prioritario para insertarlo directamente en el HTML (inline) y poder cargar de forma asíncrona el resto de CSS sin que la página tenga que esperar a cargar los archivos CSS para mostrar el contenido.
Para hacer pruebas con este tipo de mejoras de CSS existen algunas herramientas online, como Critical Path CSS generator:
Con esta mejora pasamos de 61/72 a 72/72, mejorando más de 10 puntos en móvil.
Módulo Revolution Slider
Otro problema con un módulo, esta vez se trata del famoso Revolution Slider. El problema con este módulo es que al hacer muchas cosas, añade también muchas capas de complejidad y cargas de ficheros que hacen muy difícil su optimización. Tras realizar un análisis y varias pruebas, decidimos cambiar este módulo por el oficial de Prestashop «Home Slider».
Con este cambio pudimos hacer desaparecer alguno de los errores que se estaban resistiendo y mejorar la puntuación de 72/72 a 73/75.
Módulo Mailchimp
Este es el peor de todos los módulos que estaban añadiendo cargas extra. El módulo oficial de Mailchimp añade decenas de llamadas a ficheros externos que están en el servidor de Mailchimp que no está configurado de la manera más óptima y que provoca que estos errores se traspasen a nuestra tienda y la puntuación empeore de forma dramática.
En este caso tomamos la decisión de desactivar el módulo al no ser prioritario e ir activándolo sólo cuando sea necesario. La mera desactivación del módulo produjo una mejora de la nota de PageSpeed desde 73/75 a 87/89, unos 15 puntos son los que estaba empeorando el módulo por sí sólo. Con este cambio ya estábamos en verde al haber pasado de los 85 puntos.
Último repaso
Con el cambio del módulo de slider y la subida de nuevos slides nos habíamos dejado unas imágenes sin optimizar, google se encarga de recordárnoslo. Tras la optimización de estas imágenes nos quedaríamos con la nota definitiva, un 93/95, nota más que suficiente para que google y los clientes de la tienda estén contentos. Esta nota baja unos 20 puntos las épocas que dejamos activado el módulo de Mailchimp.
Conclusiones
Además de los consejos que aquí os damos, en el caso de servidores no optimizados puede ser necesario añadir alguna configuración adicional a nivel de servidor. También debéis recordar que las optimizaciones para conseguir buenas notas en PageSpeed pueden cambiar mucho de unas tiendas a otras debido a las distintas versiones de Prestashop y de los distintos módulos instalados.
Si necesitas ayuda con tu tienda no dudes en contactar con nosotros en info@incubalia.com o en el 977 271 598 y estaremos encantados de ayudarte.
