Melhorar as Core Web Vitals de um site (LCP, INP e CLS)

Prompt

Atua como especialista em desempenho web que otimiza as Core Web Vitals com dados de campo e de laboratório.

Contexto:
- Página e tipo: {{pagina}}
- Dados do relatório: {{relatorio}}
- Stack técnico: {{stack}}
- Dados disponíveis: {{tipo_dados}}

Se o relatório não indicar o elemento LCP, que interações são lentas ou que elementos se deslocam, explica-me como obter essa informação e pergunta-ma antes de recomendares alterações.

Entregáveis:
1. Leitura do relatório: estado de cada métrica face aos limiares de «bom» (LCP até 2,5 s, INP até 200 ms, CLS até 0,1, no percentil 75) e diferença entre dados de campo e de laboratório.
2. LCP: identificação do elemento e decomposição em tempo até ao primeiro byte, atraso de carregamento do recurso, duração do carregamento e atraso de renderização, com a causa mais provável de cada parte.
3. INP: tarefas longas e scripts envolvidos, e técnicas para o reduzir (dividir tarefas e ceder a thread principal, adiar scripts de terceiros, reduzir o trabalho nos handlers de eventos, evitar re-renders caros).
4. CLS: elementos que se deslocam e como reservar espaço (dimensões de imagens e iframes, aspect-ratio, tipos de letra alternativos com métricas ajustadas, conteúdo injetado).
5. Tabela de correções priorizadas por impacto estimado e esforço, com excertos de código adaptados a {{stack}} (fetchpriority, preload, formatos de imagem, font-display, carregamento diferido, etc.).
6. Plano de medição: como recolher as métricas reais com a biblioteca web-vitals ou com monitorização de utilizadores reais, e quanto esperar para ver o efeito nos dados de campo.
7. O que não fazer, como adiar o carregamento da imagem LCP ou esconder conteúdo para inflacionar a pontuação.

Restrições:
- Não prometas uma pontuação concreta nem posições no Google; as melhorias estimam-se, não se garantem.
- Não inventes valores: se faltar um dado, marca-o com [PREENCHER].
- Quando os dados de campo e a pontuação do Lighthouse não coincidirem, dá prioridade aos dados de campo.

Formato: resumo de cinco linhas, uma secção por métrica, a tabela priorizada e o plano de medição.

Como utilizar

Exemplo de utilização

Exemplo de resultado

add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
    if (is_product() && $size === 'woocommerce_single') {
        $attr['fetchpriority'] = 'high';
        $attr['loading'] = 'eager'; // nunca lazy loading na imagem LCP
    }
    return $attr;
}, 10, 3);

add_filter('script_loader_tag', function ($tag, $handle) {
    $adiar = ['widget-chat', 'widget-avaliacoes']; // [PREENCHER: handles reais]
    return in_array($handle, $adiar, true) ? str_replace(' src=', ' defer src=', $tag) : $tag;
}, 10, 2);

Dados-chave

Categoria

Programação e desenvolvimento · Criar páginas web

Tipo de resultado

Código

Nível

Avançado

Pensado para

ChatGPT, Claude, Gemini e Microsoft Copilot

Verificado em

Pendente de verificação editorial

Variáveis

Página e tipo, Dados do relatório, Stack técnico e Dados disponíveis

Idioma

Português

Preço

Gratuito, sem registo

Atualizado

07/11/2026

Perguntas frequentes