Core Web Vitals PrestaShop — Seguimiento CrUX por plantilla (dfcoreweb)

DataFirefly Core Web Vitals consulta la API Chrome UX Report (CrUX) de Google y trae a su back-office las métricas de rendimiento realmente medidas en los dispositivos de sus visitantes, por separado para cada tipo de página: inicio, categoría, ficha de producto, carrito, página CMS y origen agregado. El módulo conserva el historial completo, detecta regresiones y traduce cada métrica degradada en acciones concretas del lado de PrestaShop.

Requisito previo: la clave API de Chrome UX Report

El módulo necesita una clave API de Google para consultar CrUX. Es gratuita y se obtiene en cuatro pasos:

1. Abra la Google Cloud Console y cree un proyecto (o seleccione uno existente).
2. En APIs y servicios > Biblioteca, busque Chrome UX Report API y haga clic en Habilitar.
3. En APIs y servicios > Credenciales, haga clic en Crear credenciales y luego en Clave de API.
4. Copie la clave generada (empieza por AIzaSy) y péguela en la configuración del módulo.

Instalación

1. En su back-office, abra Módulos > Gestor de módulos.
2. Haga clic en Subir un módulo y suelte el archivo dfcoreweb.zip.
3. Haga clic en Configurar una vez completada la instalación.

La instalación crea tres tablas (URLs seguidas, snapshots históricos, registro de recomendaciones ocultadas) y añade un menú DataFirefly Core Web Vitals en Mejorar, con cuatro pestañas: Panel, Configuración, Historial y Recomendaciones.

Configuración

Clave API

Pegue su clave de Chrome UX Report en el campo previsto y guarde. Mientras este campo esté vacío, el panel muestra una advertencia y no es posible ninguna sincronización.

Form factors seguidos

CrUX publica sus métricas por separado según el tipo de dispositivo. Tres casillas permiten elegir los que sigue:

• Móvil — activado por defecto, es el form factor que Google usa para la evaluación de la experiencia de página.
• Escritorio — activado por defecto, útil si su tráfico de escritorio es significativo.
• Tableta — desactivado por defecto, CrUX rara vez dispone de datos suficientes en este segmento.

Cada form factor adicional multiplica el número de llamadas diarias, sin riesgo de superar la cuota dados los volúmenes en juego.

URLs seguidas

Por defecto, el módulo elige por sí mismo una URL representativa por tipo de página: la página de inicio, la categoría con más productos, el producto más vendido, la página del carrito y la primera página CMS activa. También consulta el origen, es decir, la agregación de todo el dominio.

Tres campos permiten tomar el control introduciendo identificadores separados por comas:

• IDs de productos — para seguir una ficha concreta en lugar del best-seller actual.
• IDs de categorías — para seguir una categoría estratégica.
• IDs de páginas CMS — para seguir una landing page o una página de contenido con mucho tráfico.

Retención de datos

El campo Periodo de retención (365 días por defecto) define la antigüedad a partir de la cual se purgan los snapshots. La purga se ejecuta en cada sincronización, y un botón del panel permite lanzarla manualmente.

Alertas de regresión

• Notificar en caso de regresión — activa el envío de correos.
• Dirección de correo — destinatario de las alertas; déjelo vacío para usar la dirección de la tienda.
• Umbral de regresión — porcentaje de degradación que dispara la alerta, 15 % por defecto.

Tras cada sincronización, el nuevo valor de cada métrica se compara con la media de los últimos siete días. Si la diferencia supera el umbral, se envía un correo HTML y texto con el detalle del delta y un enlace directo al panel.

Sincronización automática

La página de configuración muestra una URL de sincronización protegida por un token derivado de la clave de seguridad de su tienda. Llámela una vez al día desde su planificador de tareas:

0 6 * * * curl -s "https://su-tienda.com/index.php?fc=module&module=dfcoreweb&controller=cron&token=SU_TOKEN" > /dev/null

En Windows, use el Programador de tareas; en alojamiento compartido, el módulo Crontab Manager de PrestaShop o el planificador de su panel de hosting también sirven.

El botón Lanzar una sincronización del panel permite disparar una recogida inmediata, útil para validar la configuración justo después de la instalación.

Leer el panel

El panel muestra un mosaico por tipo de página, con el último valor conocido de cada métrica y un código de color que sigue los umbrales oficiales de Google:

• LCP (Largest Contentful Paint) — bueno hasta 2,5 s, mejorable hasta 4 s, malo por encima.
• INP (Interaction to Next Paint) — bueno hasta 200 ms, mejorable hasta 500 ms, malo por encima.
• CLS (Cumulative Layout Shift) — bueno hasta 0,1, mejorable hasta 0,25, malo por encima.
• FCP (First Contentful Paint) — bueno hasta 1,8 s, mejorable hasta 3 s.
• TTFB (Time To First Byte) — bueno hasta 0,8 s, mejorable hasta 1,8 s.

Todos los valores se expresan en el percentil 75: representan la experiencia del 25 % de visitantes peor servidos, conforme a la metodología de Google. Se considera que una tienda «aprueba» la evaluación cuando LCP, INP y CLS están simultáneamente en verde.

Historial

La pestaña Historial superpone la evolución de cada métrica en 30, 90, 180 o 365 días, para un tipo de página y un form factor dados. Los gráficos muestran en línea discontinua los umbrales de Google, lo que hace inmediatamente legible el paso de una zona a otra. Una curva adicional sigue el porcentaje de visitas clasificadas como «buenas» en las tres métricas principales.

Es la vista que hay que consultar tras una puesta en producción, una migración de tema o la incorporación de un script de terceros: una degradación del LCP suele aparecer en los días siguientes, desplazada por la ventana móvil de 28 días.

Recomendaciones

Cada métrica fuera de umbral genera una o varias recomendaciones vinculadas al tipo de página afectado, ordenadas por gravedad:

• Crítica — métrica en zona roja, impacto directo en el posicionamiento y la conversión.
• Advertencia — métrica en zona ámbar, margen de mejora significativo.
• Información — buena práctica aplicable incluso en zona verde.

Los consejos se formulan en vocabulario PrestaShop: formato y precarga de la imagen de portada en una ficha de producto, dimensiones explícitas de las miniaturas de la parrilla de categoría, número de módulos enganchados a los hooks de cabecera, compresión y caché de servidor para el TTFB, aplazamiento de los scripts de terceros para el INP. Cada recomendación lleva una estimación de impacto comercial calibrada sobre el estudio «Milliseconds Make Millions» de Deloitte.

El botón Ocultar retira una recomendación de la lista durante 30 días, el tiempo de tratar el asunto o de decidir que no es prioritario.

El estado «datos insuficientes»

CrUX solo publica una métrica cuando suficientes visitantes de Chrome han cargado la URL durante el periodo. Por debajo de ese umbral, la API responde que el registro no existe: el módulo guarda entonces un estado «datos insuficientes», sin error ni interrupción de la recogida.

Si es el caso de la mayoría de sus páginas, apóyese en la línea Origen: la agregación de todo el dominio alcanza el umbral mucho más fácilmente y sigue siendo representativa de la experiencia media de su tienda.

Privacidad y alojamiento de los datos

No se envía ningún dato de clientes a Google. Solo las URLs públicas que ha elegido seguir se envían a la API CrUX, y las métricas devueltas ya están anonimizadas y agregadas por Google. Todas las mediciones se almacenan en su propia base de datos PrestaShop. La biblioteca de gráficos está empaquetada dentro del módulo: ninguna llamada a un CDN externo, ninguna telemetría, ningún script de analítica del lado del visitante.

Resolución de problemas

• Error de autenticación en la sincronización — la clave API falta, está mal copiada, o la API Chrome UX Report no se ha habilitado en el proyecto de Google Cloud. Compruebe también que no haya restricciones de dirección IP o de referente HTTP aplicadas a la clave.
• Todas las filas en «datos insuficientes» — el tráfico Chrome en esas URLs es demasiado bajo. Siga el origen y elija manualmente páginas con mucho tráfico.
• La llamada cron devuelve un error de autorización — el token de la URL ya no coincide. Depende del nombre de la tienda y de la clave de seguridad de la instalación: vuelva a copiar la URL mostrada en la configuración tras cualquier cambio de nombre de tienda.
• El menú no aparece tras la instalación — vacíe la caché en Parámetros avanzados > Rendimiento, y compruebe los permisos de su perfil de empleado sobre las nuevas pestañas.
• Los gráficos siguen vacíos — hacen falta al menos dos sincronizaciones en fechas distintas para trazar una curva. Espere 24 horas tras la primera recogida.

Desinstalación

La desinstalación elimina las tres tablas del módulo, todas las claves de configuración y las pestañas del back-office. El historial de mediciones se pierde definitivamente: exporte sus datos antes si desea conservarlos. Se solicita una confirmación explícita antes de la operación.