Core Web Vitals PrestaShop: acompanhamento CrUX por tipo de página (dfcoreweb)

O DataFirefly Core Web Vitals consulta a API Chrome UX Report (CrUX) da Google e traz para o seu back-office as métricas de desempenho realmente medidas nos seus visitantes, separadamente para cada tipo de página: página inicial, categoria, ficha de produto, carrinho, página CMS e origem agregada. O módulo conserva o histórico completo, deteta as regressões e traduz cada métrica degradada em ações concretas do lado do PrestaShop.

Pré-requisito: a chave de API Chrome UX Report

O módulo precisa de uma chave de API da Google para consultar o CrUX. É gratuita e obtém-se em quatro passos:

1. Abra a Google Cloud Console e crie um projeto (ou selecione um projeto existente).
2. Em API e serviços > Biblioteca, procure Chrome UX Report API e clique em Ativar.
3. Em API e serviços > Credenciais, clique em Criar credenciais e depois em Chave de API.
4. Copie a chave gerada (começa por AIzaSy) e cole-a na configuração do módulo.

Instalação

1. No seu back-office, abra Módulos > Gestor de módulos.
2. Clique em Instalar um módulo e carregue o ficheiro dfcoreweb.zip.
3. Clique em Configurar assim que a instalação terminar.

A instalação cria três tabelas (URL monitorizados, capturas históricas, registo das recomendações ocultadas) e acrescenta um menu DataFirefly Core Web Vitals em Melhorar, com quatro separadores: Painel, Configuração, Histórico e Recomendações.

Configuração

Chave de API

Cole a sua chave do Chrome UX Report no campo previsto e grave. Enquanto este campo estiver vazio, o painel apresenta um aviso e não é possível qualquer sincronização.

Tipos de dispositivo monitorizados

O CrUX publica as suas métricas separadamente por tipo de dispositivo. Três caixas de seleção permitem escolher quais monitoriza:

• Telemóvel — ativado por predefinição; é o tipo de dispositivo usado pela Google para a avaliação da experiência na página.
• Computador — ativado por predefinição, útil se o seu tráfego em computador for significativo.
• Tablet — desativado por predefinição; o CrUX raramente dispõe de dados suficientes neste segmento.

Cada tipo de dispositivo adicional multiplica o número de chamadas diárias, sem risco de ultrapassar a quota, dados os volumes em causa.

URL monitorizados

Por predefinição, o módulo escolhe ele próprio um URL representativo por tipo de página: a página inicial, a categoria com mais produtos, o produto mais vendido, a página do carrinho e a primeira página CMS ativa. Consulta também a origem, ou seja, a agregação de todo o domínio.

Três campos permitem retomar o controlo, indicando identificadores separados por vírgulas:

• IDs de produtos — para monitorizar uma ficha específica em vez do best-seller do momento.
• IDs de categorias — para monitorizar uma categoria estratégica.
• IDs de páginas CMS — para monitorizar uma landing page ou uma página de conteúdo com muito tráfego.

Retenção dos dados

O campo Duração da retenção (365 dias por predefinição) define a antiguidade a partir da qual as capturas são limpas. A limpeza é executada em cada sincronização e um botão do painel permite despoletá-la manualmente.

Alertas de regressão

• Notificar em caso de regressão — ativa o envio de e-mails.
• Endereço de e-mail — destinatário dos alertas; deixe vazio para usar o endereço da loja.
• Limiar de regressão — percentagem de degradação que despoleta o alerta, 15 % por predefinição.

Depois de cada sincronização, o novo valor de cada métrica é comparado com a média dos últimos sete dias. Se a diferença ultrapassar o limiar, é enviado um e-mail em HTML e texto com o detalhe da variação e uma ligação direta para o painel.

Sincronização automática

A página de configuração apresenta um URL de sincronização protegido por um token derivado da chave de segurança da sua loja. Chame-o uma vez por dia a partir do seu agendador de tarefas:

0 6 * * * curl -s "https://a-sua-loja.com/index.php?fc=module&module=dfcoreweb&controller=cron&token=O_SEU_TOKEN" > /dev/null

No Windows, use o Agendador de Tarefas; num alojamento partilhado, o módulo Crontab Manager do PrestaShop ou o agendador do seu painel de administração também servem.

O botão Lançar uma sincronização do painel permite despoletar de imediato uma recolha, útil para validar a configuração logo após a instalação.

Ler o painel

O painel apresenta um bloco por tipo de página, com o último valor conhecido de cada métrica e um código de cores que retoma os limiares oficiais da Google:

• LCP (Largest Contentful Paint) — bom até 2,5 s, a melhorar até 4 s, mau acima disso.
• INP (Interaction to Next Paint) — bom até 200 ms, a melhorar até 500 ms, mau acima disso.
• CLS (Cumulative Layout Shift) — bom até 0,1, a melhorar até 0,25, mau acima disso.
• FCP (First Contentful Paint) — bom até 1,8 s, a melhorar até 3 s.
• TTFB (Time To First Byte) — bom até 0,8 s, a melhorar até 1,8 s.

Todos os valores são expressos no percentil 75: representam a experiência dos 25 % de visitantes pior servidos, de acordo com a metodologia da Google. Considera-se que uma loja «passa» na avaliação quando o LCP, o INP e o CLS estão simultaneamente no verde.

Histórico

O separador Histórico sobrepõe a evolução de cada métrica a 30, 90, 180 ou 365 dias, para um dado tipo de página e tipo de dispositivo. Os gráficos apresentam a tracejado os limiares da Google, o que torna imediatamente legível a passagem de uma zona para outra. Uma curva adicional acompanha a percentagem de visitas classificadas como «boas» nas três métricas principais.

É a vista a consultar depois de uma entrada em produção, de uma migração de tema ou da adição de um script de terceiros: uma degradação do LCP aparece geralmente nos dias seguintes, desfasada pela janela móvel de 28 dias.

Recomendações

Cada métrica fora dos limiares gera uma ou várias recomendações associadas ao tipo de página em causa, ordenadas por gravidade:

• Crítica — métrica na zona vermelha, com impacto direto no posicionamento e na conversão.
• Aviso — métrica na zona laranja, com margem de progressão significativa.
• Informação — boa prática aplicável mesmo na zona verde.

Os conselhos são formulados em vocabulário PrestaShop: formato e pré-carregamento da imagem de capa numa ficha de produto, dimensões explícitas das miniaturas da grelha de categoria, número de módulos ligados aos hooks de cabeçalho, compressão e cache do servidor para o TTFB, adiamento dos scripts de terceiros para o INP. Cada recomendação traz uma estimativa de impacto no negócio calibrada pelo estudo da Deloitte «Milliseconds Make Millions».

O botão Ocultar retira uma recomendação da lista durante 30 dias, o tempo de tratar o assunto ou de assumir que não é prioritário.

O estado «dados insuficientes»

O CrUX só publica uma métrica quando visitantes suficientes do Chrome carregaram o URL no período. Abaixo desse limiar, a API responde que o registo não existe: o módulo guarda então um estado «dados insuficientes», sem erro nem interrupção da recolha.

Se for o caso da maioria das suas páginas, apoie-se na linha Origem: a agregação de todo o domínio atinge o limiar muito mais facilmente e continua representativa da experiência média da sua loja.

Privacidade e alojamento dos dados

Não é transmitido qualquer dado de cliente à Google. Só os URL públicos que escolheu monitorizar são enviados à API do CrUX, e as métricas devolvidas já vêm anonimizadas e agregadas pela Google. Todos os registos são guardados na sua própria base de dados PrestaShop. A biblioteca de gráficos está incorporada no módulo: sem chamadas a um CDN externo, sem telemetria e sem scripts de análise do lado do visitante.

Resolução de problemas

• Erro de autenticação na sincronização — a chave de API está ausente, mal copiada, ou a API Chrome UX Report não foi ativada no projeto do Google Cloud. Verifique também que não há restrições de endereço IP nem de referenciador HTTP aplicadas à chave.
• Todas as linhas em «dados insuficientes» — o tráfego do Chrome nesses URL é demasiado baixo. Monitorize a origem e escolha manualmente páginas com muito tráfego.
• A chamada do cron devolve um erro de autorização — o token do URL já não corresponde. Depende do nome da loja e da chave de segurança da instalação: volte a copiar o URL apresentado na configuração depois de qualquer mudança de nome da loja.
• O menu não aparece depois da instalação — limpe a cache em Parâmetros avançados > Desempenho e verifique depois as permissões do seu perfil de colaborador nos novos separadores.
• Os gráficos ficam vazios — são necessárias, no mínimo, duas sincronizações em datas diferentes para traçar uma curva. Aguarde 24 horas depois da primeira recolha.

Desinstalação

A desinstalação elimina as três tabelas do módulo, todas as chaves de configuração e os separadores do back-office. O histórico das medições perde-se definitivamente: exporte previamente os seus dados se os quiser conservar. É pedida uma confirmação explícita antes da operação.