Core Web Vitals em ecommerce: LCP, INP e CLS numa ficha de produto

As Core Web Vitals são três métricas com que a Google mede a experiência de carregamento de uma página. Influenciam o posicionamento, mas sobretudo refletem algo que afeta diretamente as vendas: se a página aparece e responde depressa.

LCP: o elemento maior

O Largest Contentful Paint mede quanto demora a ser apresentado o maior elemento do ecrã inicial. Numa ficha de produto é quase sempre a imagem principal. Objetivo: menos de 2,5 s.

• Não use carregamento diferido na imagem principal.
• Acrescente fetchpriority="high" a essa imagem.
• Sirva-a em WebP ou AVIF e no tamanho em que é mostrada.
• Reduza o tempo de resposta do servidor (veja o nosso artigo sobre diagnóstico de lentidão).

INP: a resposta à interação

O Interaction to Next Paint substituiu o FID em 2024. Mede quanto demora a página a reagir quando o cliente clica ou toca em algo, por exemplo ao escolher um tamanho ou carregar em «Adicionar ao carrinho». Objetivo: menos de 200 ms.

• O inimigo é o JavaScript pesado: chats, píxeis, carrosséis.
• Adie os scripts de terceiros até à primeira interação ou até depois do consentimento.
• Evite módulos que recalculam preços com muitos pedidos ao mudar uma combinação.

CLS: os saltos da página

O Cumulative Layout Shift mede quanto se movem os elementos enquanto a página carrega. Aquele momento em que vai carregar num botão e ele desce porque apareceu um banner. Objetivo: menos de 0,1.

• Defina sempre width e height nas imagens.
• Reserve espaço para os avisos de cookies, banners e blocos que chegam por AJAX.
• Tipos de letra: use font-display: swap e tipos de letra alojados no seu servidor.

Onde medir

Na Google Search Console, relatório «Métricas web essenciais», com dados reais dos seus visitantes agrupados por tipo de página. É um guia melhor do que um único teste no PageSpeed, porque reflete telemóveis reais com ligações reais.