¿Cómo optimizar las Core Web Vitals en PrestaShop?

Parece que con poco margen de error las Core Web Vitals van a ser el elemento SEO más importante de 2021. Durante buena parte  del pasado año, en la comunidad SEO, se ha estado hablando de estas nuevas métricas con las que Google valora la salud de un site y que ya ha anunciado que a partir de mayo de este año serán un factor de posicionamiento, por lo que hay casi una obsesión por llegar a los baremos de calidad impuestos por el gigante de Mountain View y así no quedarse atrás en esta “carrera armamentística” que es el SEO. 

En este post nos centraremos en cómo optimizar las Core Web Vitals para el CMS Prestashop, ya que aunque queramos llegar al mismo punto independientemente de la plataforma que utilicemos, los medios para llegar a tal fin son distintos. 

¿Qué son las Core Web Vitals?

Son tres métricas que miden el buen funcionamiento de una web en cuanto a aspectos relacionados con el WPO, por lo que velocidad, accesibilidad y usabilidad son los elementos que tendremos que optimizar para mantener estas métricas en los baremos que Google ha decidido.  

Estas métricas pueden consultarse en varias herramientas de análisis: Google Page Speed Insight, Lighthouse, GTMetrix, Screaming Frog, Search Console… Google establece tres rangos de calidad de las métricas representadas por los típicos colores de un semáforo: 
 

• rojo hará referencia a los baremos que estén por debajo del mínimo que se exige para un buen funcionamiento; 
   
• amarillo se utiliza para las puntuaciones que lleguen a una optimización suficiente pero que puede mejorar; 
   
• y verde para aquellas puntuaciones que cumplan las expectativas de funcionamiento óptimo. 

Estás métricas son: 

Largest Contentful Paint 

El Largest Contentful Paint  es la métrica que utiliza Google para medir el tiempo que tarda un sitio web en mostrar al usuario el contenido listo para su interacción. Este contenido es el que Google sitúa arriba de la web y que no hace falta realizar desplazamiento para visualizarlo. No todo lo que aparece ante el usuario es importante. Google tiene en cuenta los siguientes aspectos:
 

• Miniaturas de video
   
• Etiquetas de imagen
   
• Imágenes de background con CSS
   
• Elementos de texto (párrafos, headings, etc)
   
• Imágenes

First Input Delay

El First Input Delay es una métrica que usa Google para medir el tiempo desde que un usuario interactúa con la web, hasta el instante en que el navegador puede responder a esa acción. Cuanto menor tiempo requiera esa respuesta, mejor puntuación conseguiremos en la métrica en cuestión.

Cumulative Layout Shift

La métrica Cumulative Layout Shift la utiliza Google para medir la suma total de todas las puntuaciones de cambio de diseño que tiene que realizar un sitio web para cada cambio inesperado que se produce. Esta métrica afecta directamente al diseño y a cómo estos elementos son capaces de modificarse para resultar visibles y prácticos para el usuario.

¿Cómo mejoro u optimizo las Core Web Vitals en PrestaShop?

Prestashop es flexible y dispone de cientos de módulos, muchos de ellos bien conocidos por los SEO y desarrolladores web para optimizar aspectos clásicos del WPO: compresión y escalado de imágenes, optimizaciones de caché, minificación de códigos (javascript, css, html…), cargas diferidas, etc.  Estos módulos seguirán siendo válidos para mejorar estas métricas, ya que todos los aspectos clásicos están involucrados. 

Además, la versión 1.7. tiene de base una amplia gama de posibilidades para mejorar la velocidad y rendimiento del site:
 

• Activación de la caché (Parámetros Avanzados > Rendimiento > SMARTY)
   
• Limpiar base de datos
   
• Compatible con http/2
   
• Desactiva o borra los módulos que no usas
   
• Imágenes (Diseño > Ajustes de imágenes > Opciones de generación de imágenes)

¿Cómo mejoro u optimizo la métrica LCP?

Para mejorar esta métrica hay que recurrir a las optimizaciones WPO clásicas:
 

• Optimizaciones de caché del sitio, del navegador y del servidor
   
• Tener un buen servicio de hosting (dedicado, CDN o Http/2)
   
• Compresión, carga diferida y escalado de imágenes
   
• Minimificación y carga asíncrona de Javascript
   
• Minificación de CSS y HTML

¿Cómo mejoro u optimizo la métrica FID?

El principal motivo de un FID deficiente es la ejecución intensa de JavaScript . Optimizar la forma en que JavaScript analiza, compila y ejecuta en tu página web reducirá directamente la FID.

Esta métrica básicamente se basa en el tratamiento que hace Google de JavaScript, así que no cargues de elementos java tu web, intenta la carga asíncrona del mismo, si esto no daña la navegación o funcionamiento del site. Minifica en lo posible el código Java. Por otro lado, intenta reducir las llamadas a scripts de terceros o trata de cargarlos desde un CDN para que no interfiera en la carga del hilo principal. Por supuesto, tener activo el protocolo http/2 puede ayudar en gran medida a que la puntuación del First Input Delay mejore.

¿Cómo mejoro u optimizo la métrica CLS?

Esta es la métrica que más tiene que ver con la experiencia del usuario por lo que las optimizaciones se basaran en marcar con etiquetado y código que permita que todos los elementos de una web (imágen, texto, vídeo, publicidad, botones, efectos, etc) se comporten y adapten a los distintos dispositivos, pantallas y resoluciones.

Aquí el marcado de CSS toma una importancia brutal. Utiliza las mejores expresiones de CSS para que el contenido web se adapte y comporte como se desea y también cómo lo desea Google. 

Ya estás listo para un primer acercamiento a las mejoras de tus Core Web Vitals si te manejas con un Prestashop. Tenlas muy en mente este año y prepara tu web ¡Aún tienes hasta mayo! para no perder comba  con tus competencia o quién sabe, pasarles por la derecha y ganar más visibilidad.