¿Cuál es la puntuación calculada por Google Pagespeed Insights o GTMetrix?

Herramientas como Google Pagespeed Insights o GTMetrix calculan un porcentaje que permite evaluar el rendimiento de los sitios web. Esta puntuación no está directamente relacionada con el tiempo de carga de la página web, sino principalmente con su calidad de diseño. En otras palabras, la puntuación de Pagespeed le indica si la página está diseñada para visualizarse muy rápidamente o no.

¿Por qué la puntuación de los móviles es diferente a la de los ordenadores? Simplemente porque la herramienta tendrá en cuenta la velocidad de conexión, que es más lenta en un móvil. Algunos elementos como el tamaño de las imágenes, el número de solicitudes, etc. tendrán más importancia. También se considera que los móviles son menos eficientes que un ordenador, por lo que la carga de la CPU (ejecución de javascript) tendrá una parte más importante en el cálculo de la puntuación.

¿Cómo alcanzar la puntuación de Pagespeed de 100/100?

Con el CMS Prestashop te puedo decir que es casi misión imposible en un sitio web real. ¿Por qué? Simplemente porque siempre tendrá reglas CSS y código Javascript no utilizados por la página web mostrada que son añadidos por los módulos o incluso el tema pero para otras páginas. Normalmente, las siguientes oportunidades no se pueden arreglar:

  • Reducir los recursos JS no utilizados
  • Reducir los recursos CSS no utilizados

Sin embargo, hay varios problemas reportados por Pagespeed Insights que pueden ser corregidos para acercarse lo más posible a la puntuación de 100/100.

Esta es la lista de los problemas más frecuentes y cómo resolverlos u optimizarlos

Optimización relacionada con el rendimiento del servidor

Optimización relacionada con las imágenes

  • Retrasar la carga de imágenes fuera dela pantalla: Google recomienda configurar la carga retardada de imágenes o vídeos, es decir, no mostrar inmediatamente el contenido que no es visible en la pantalla. Esto es especialmente relevante en los teléfonos móviles, que tienen pantallas pequeñas y el visitante no necesariamente se desplazará hasta abajo, por lo que no es necesario cargar fotos o vídeos que nunca verá. Los temas suelen ofrecer esta función de "carga perezosa", o bien puede utilizar un módulo como Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) .
  • Distribuir imágenes en formatos de nueva generación: Google ha creado el formato de imagen optimizado WEBP que reduce el tamaño de los archivos manteniendo una muy buena calidad de imagen. Para comprimir sus imágenes en formato WEBP, necesita un módulo como Compresión WEBP , que a diferencia de otros módulos, comprimirá todas las imágenes de su tienda, no sólo las de productos y categorías.
  • Codificar las imágenes de forma eficiente: indica que sus imágenes podrían estar más comprimidas. Si utilizas el formato WEBP este problema también se soluciona.
  • Los elementos de imagen no tienen una anchura y una altura explícitas: cuando el navegador comienza a mostrar la página web aún no ha descargado las imágenes, sino que reservará su ubicación utilizando los atributos de anchura y altura contenidos en el HTML (plantillas de temas o módulos). Si faltan estos atributos, el navegador no puede reservar el espacio necesario y cada vez que se descargue una imagen el contenido de la página se desplazará, lo que resulta muy desagradable para el visitante (provoca CLS). Por lo tanto, debe modificar sus plantillas para añadir estos atributos.

Optimización vinculada a la configuración del servidor

  • Activar la compresión de texto: en Apache debes activar mod_deflate que comprimirá todo el contenido textual como CSS, JS, HTML, etc. Por ejemplo, puede añadir el siguiente código al archivo .htaccess en la raíz de su tienda:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Distribuir los elementos estáticos gracias a reglas de caché eficientes: en Prestashop, en la página de Rendimiento, debe activar la opción "Optimizaciones de Apache". Tenga en cuenta que no podrá corregir este problema para los archivos que no están alojados en su servidor (Google Analytics, Facebook, etc.)

Optimización relacionada con el tema de Prestashop

  • Asegúresede que el texto permanece visible durante la carga de las fuentes web: usted utiliza una fuente en su tienda que el navegador debe descargar. Durante este tiempo debe decirle al navegador que utilice una fuente del sistema, como por ejemplo Arial, de lo contrario no podrá mostrar nada y esto se bloqueará. Para ello, añada la opción "font-display: swap;" a la regla CSS que define la fuente (@font-face).
  • Reducir los recursos JavaScript no utilizados: imposible de optimizar debido al diseño de Prestashop
  • Reducir los recursos CSS no utilizados: imposible de optimizar con el diseño de Prestashop
  • Eliminar los recursos que bloquean el renderizado: imposible de optimizar porque debe hacerse desde el principio en el tema
  • Reducir el tamaño de los recursos CSS: normalmente se corrige activando la opción "Smart Cache CSS" en la página de Rendimiento y activando el mod_deflate de Apache
  • Reducir el tamaño de los recursos de JavaScript: normalmente se soluciona activando la opción "Smart Cache CSS" en la página de Rendimiento y activando Apache mod_deflate
  • Evite el tamaño excesivo del DOM: indica que hay demasiada información en su página, concretamente el HTML es demasiado grande. Esto suele estar relacionado con demasiados productos en la página; puede reducir este número o activar una opción de desplazamiento infinito que permita descargar los productos cuando el visitante se desplace hasta el final de la lista.
  • La página no utiliza escuchadores de eventos pasivos para mejorar el rendimiento del desplazamiento: se trata de un problema de Javascript proporcionado por el tema o un módulo. Le resultará difícil identificarlo.
  • Evitar la creación de cadenas de solicitud críticas: esto significa que los archivos hacen referencia a otros archivos, por lo que el navegador sólo puede empezar a descargarlos después de haber descargado y leído esos archivos principales. Para reducir esta pérdida de tiempo, estos archivos deben ser referenciados directamente en el HTML utilizando el atributo "preload".

¿Influye la puntuación en el SEO?

Google no dice que utilice esta puntuación para clasificar los resultados de las búsquedas, pero creo que hay un efecto indirecto.

Google mide lo que se denomina "Tiempo de permanencia", que es el tiempo transcurrido entre dos clics en una lista de resultados. Esto le indica si el visitante permaneció allí durante mucho tiempo o no. Por ejemplo, si este tiempo de permanencia es inferior a 3 segundos, podemos pensar que no es interesante y se arriesga a ser degradado.

Para concluir

Evidentemente, es muy complicado aplicar todas estas optimizaciones Lo ideal es tenerlos en cuenta durante el desarrollo del tema y los módulos, por eso he creado el tema Prestashop JPresta Origin y los módulos que lo acompañan

Una buena velocidad de carga de las páginas de su tienda no le hará vender más, pero un sitio web lento le hará perder clientes con toda seguridad