En Internet existen infinidad artículos de cuál es la mejor manera de optimizar una página para tener una buena puntuación en Google PageSpeed Insights. Lo primero que tenemos que hacer es escoger una buena plantilla, y después la optimizamos. De hecho, muchos ecommerce utilizan plantillas de Prestashop que no pasan del 40% en móvil y 40% en web en nuestro querido test de Google.

Al escanear una web, PageSpeed insights nos da una serie de recomendaciones que quizás no logres entender. En este artículo hablaré de los puntos clave para subir esta puntuación con Prestashop. Aunque la mayoría de estas recomendaciones también se puede aplicar a otros gestores de contenidos por el estilo.

Optimizando nuestro Prestashop

La elección de la plantilla

Es importante seleccionar una plantilla que esté bien optimizada, para hacernos una idea si una plantilla está o no optimizada es simplemente pasar la demo de la plantilla por PageSpeed y este nos dará la nota y la serie de recomendaciones, evidentemente no hace falta elegir que entre nuestras elecciones siempre nos quedaremos con la que mejor puntuación nos dé.

Optimización de imágenes

En muchas ocasiones la bajada o subida drástica de puntuación de pende muchísimo de la optimización de las imágenes. Una imagen de gran tamaño y de gran peso puede ocasionar bajadas de puntuación de entre 1 a 4 puntos. Mi recomendación es que antes de subir una imagen a Prestashop pasarla por algún compresor online como https://tinypng.com/ o https://tinyjpg.com/.

Ajustes de rendimiento de Prestashop

Tanto en la versión 1.6 como en la 1.7 encontramos un apartado en la zona de administración en donde podemos aplicar una mínima configuración para mejorar levemente el rendimiento de la página web.

 

Con esto rascaremos algún punto extra en PageSpeed Insights.

Optimización del servidor

Este es sin duda el punto en el que debemos ser mas cuidadosos, aunque si tenemos acceso al .htacess de nuestro proyecto, podemos aplicar las configuraciones allí mismo.

Caché y compresión deflate y gzip

Para solucionar estos problemas tenemos que añadir lo siguiente al archivo

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/webp "access plus 1 month"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
<IfModule mod_deflate.c>
  <FilesMatch ".(js|jpg|jpeg|gif|png|css|txt|html)$">
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>
<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

 

Instalación de mod_pagespeed

El mod_pagespeed es una de las herramientas que ha lanzado PageSpeed insights para optimizar tu página web y poder alcanzar una alta puntuación en su herramienta. Para instalarlo, podemos hacerlo por nuestra cuenta si tenemos acceso SSH a nuestro servidor o bien pidiéndole a la empresa que tengamos contratado el hosting la instalación del mismo.

Si tenemos acceso por SSH tan solo tendremos que hacer lo siguiente:

yum install mod-pagespeed

Si leemos un poco la documentación oficial de mod_pagespeed, vemos que podemos configurar las características de esta herramienta desde:

/etc/httpd/conf.d/pagespeed.conf

¿Prefieres que te echemos un cable?

A veces, ciertas cosas pueden sonar a chino. Estaremos encantados de conocer tu proyecto para darte una solución personalizada.

¡Contáctanos!

¿Te has quedado con ganas de más?

Echa un vistazo a otros posts del blog.
¡Nos esforzamos por crear contenido útil para ti!

¡Ver posts!

    Deja un comentario

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