Optimización Prestashop para Pagespeed Insights de Google

Manual de optimización de Prestashop para Pagespeed Insight

Configuración del rendimiento de Prestashop

He probado a hacer las configuraciones de mil maneras, he visto cual es el rendimiento de todas las maneras posibles, y esta es la configuración optima de Prestashop.

Aparatado de Smarty

Os explico detalladamente la opción que tal vez os resulte mas extraña:

«No borrar nunca los archivos de caché»

Cuestiones técnicas
Bueno, pues haciendo tests de rendimiento, y viendo las consultas que se ejecutan al cargar una página, si tenemos la opción de «Borrar la caché siempre que algo se haya modificado» hay una tabla en Prestashop llamada «smarty lazy cache» que hace «truncate» mientras la página se está cargando.
No nos interesa que Prestashop esté borrando la caché continuamente, esta opción acelerará las peticiones, y aumentará la velocidad de navegación. Pero será suficiente borrar cache cada vez que hagamos ciertas modificaciones.
Dejas esta opción en borrado automático, si tenéis mucho tráfico y a muchos empleados tocando el backoffice os puede dar problemas y en alguna ocasión puede que la tabla de lazy cache quede corrupta.

Apartado de CCC

En muchos blogs he leido que este apartado no es recomendable activarlo. Pues bien, yo he hecho varias pruebas.
Si tenéis un modulo que haga esta operativa tendréis que comprobar con que opción os da mejor nota. Yo he obtenido siempre las mejores notas con todas las opciones activas.

Optimización del servidor de prestashop para PageSpeed

Una de las herramientas que han lanzado al Pagespeed Insights por encima de 80 puntos ha sido el mod_pagespeed de Apache.

Para instalarlo uso el manual de este post que ha hecho José Bernalte

Y esta es la optimización que yo añado al .htaccess para el mod_pagespeed, después de muchas combinaciones, documentación del propio modulo etc, esta es la mejor:

ModPageSpeed on

ModPagespeedDisallow *js_tinyMCE*
ModPagespeedDisallow *tiny_mce*
ModPagespeedDisallow *tinymce*

ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters extend_cache
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters rewrite_css
ModPagespeedEnableFilters combine_javascript
ModPagespeedEnableFilters rewrite_javascript
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters recompress_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments
ModPagespeedDisallow "/js/*"

Además en la configuración de pagespeed.conf del servidor añado lo siguiente, que os servirá para que este mod_pagespeed no se ejecute en el backoffice de prestashop:

<Location "/adminXXXXXXXXXX">
  	ModPagespeed off
</Location>

Esto es debido a que hay problemas con el tinymce, el editor de textos, descripciones cortas…

Solo realizando estas configuraciones, la nota del Pagespeed subirá por lo menos hasta 80 en móvil y 90-95 en PC.

Especificaciones de caché y compresión por deflate o gzip en htaccess

Tenemos que añadir las siguientes lineas al htaccess:

<FilesMatch ".(eot|ttf|otf|woff|svg)">
 Header add Access-Control-Allow-Origin "*" 
 </FilesMatch>

<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"
#DavidEscudero-- Edito - Elimino la siguiente linea por problemas de acceso al backoffice
#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>

# Deflate Compression by FileType
<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>

# Deflate Compression by MimeType</span>
<IfModule mod_deflate.c>
<FilesMatch ".(js|jpg|jpeg|gif|png|css|txt|html)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

# gzip Compression if availiable
<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>

Lo cual aumentará nuestra nota de PageSpeed hasta los 90-95.

Por ultimo ya nos quedará realizar los retoques manuales que Google PageSpeed Insights nos indique.