Tof Paris

Acciones específicas para reducir el tiempo de construcción

En primer lugar, el objetivo es reducir el tiempo de construcción, ya que esto afecta especialmente a uno de los indicadores clave entre las señales web esenciales definidas por Google: el LCP (Largest Contentful Paint).

De hecho, cuanto más corto sea el tiempo de construcción, mejor será la puntuación de LCP.

Después de un análisis preliminar, pudimos identificar varios puntos a implementar con el fin de reducir el tiempo de construcción y, por extensión, el LCP.

1/ El primer paso consistió en realizar una comparación de los tiempos de construcción de las páginas, identificando tres cuellos de botella principales.

2/ El segundo paso fue colocar cachés en los siguientes módulos :

• stfeaturedslider
• stlovedproduct
• stspecialslider
• productsasvariants

Tras implementar estos cachés, se realizó una nueva comparación que identificó otros módulos que requerían caché :

• ganalyticspro
• stthemeeditor
• spmreviewsadv

3/ El último paso de estas acciones consiste en reconfigurar los ajustes de caché en el panel de administración para optimizar aún más el rendimiento.

Aquí tienes la lista de acciones adicionales al tiempo de construcción llevadas a cabo para optimizar el LCP en tof-paris.com : 

• Eliminación del lazy loading en la imagen más grande de la página de productos.

El lazy loading es generalmente muy útil para optimizar los tiempos de carga de las páginas. (Puedes obtener más información sobre el lazy loading aquí : https://www.profileo.com/blog/optimiser-site-prestashop-avec-le-lazy-loading/)
Sin embargo, en el caso de imágenes por encima del pliegue, no se recomienda en absoluto. En nuestro caso, incluso fue un obstáculo para lograr una buena optimización del LCP.

• Regeneración de las imágenes de las páginas de categorías y de productos para que tengan el mismo tamaño de archivo que se muestra en pantalla, evitando cálculos de redimensionamiento por parte del navegador.

Puedes encontrar todas nuestras recomendaciones sobre los formatos ideales de imágenes de productos en el siguiente artículo de blog : https://www.profileo.com/blog/optimisation-prestashop-travailler-ses-images-de-fiche-produit/

• Compresión de las imágenes del carrusel sin pérdida de calidad utilizando https://tinypng.com/

 
Acciones adicionales tomadas durante el seguimiento de la Search Console.

• Optimización de la imagen más grande (LCP) de la página de productos convirtiéndola en base64.
• Reducción del tamaño del banner de cookies para que ya no se considere el elemento más grande de la página.
• Eliminación del lazy loading en las primeras 4 imágenes de la página de categoría y conversión de estas cuatro imágenes en base64. Las imágenes siguientes se cargan utilizando el lazy loading nativo.
• Para la página de categoría, se convirtieron en base64 8 imágenes, siendo la segunda fila visible en algunos dispositivos por encima del pliegue

La conversión de una imagen en base64 implica que se transforma en una cadena de caracteres. En lugar de ser un archivo independiente, la imagen se incorpora directamente en la página en forma de código, evitando así la descarga de archivos por parte del navegador. Es importante señalar que esta técnica es adecuada principalmente para imágenes ligeras, ya que su uso excesivo en imágenes más grandes puede sobrecargar la página.