Dimensão Core/Dash: Prioridade do LCP

Dimensão: Recurso: Prioridade do LCP

A dimensão Prioridade do LCP segmenta os dados de desempenho com base em como o navegador descobriu e priorizou o recurso do LCP. Enquanto a dimensão "Tipo de Elemento" informa o que o elemento é (Texto vs. Imagem), esta dimensão informa por que o navegador atrasou o seu carregamento.

Esta é a sua principal ferramenta de auditoria para o atraso de carregamento. Ela expõe se o seu recurso de LCP está disputando largura de banda ou se está sendo artificialmente atrasado por atributos HTML incorretos.

A hierarquia de prioridades

O navegador atribui uma prioridade de download a cada recurso. Esta dimensão mapeia o elemento do LCP a um de cinco estados de carregamento específicos, classificados do mais prejudicial (Lazy Loaded) ao mais otimizado (Texto/Prioridade alta).

Contexto: Quando um usuário retorna à sua página por meio do botão "Voltar" ou "Recarregar", a maioria dos navegadores o redefine para a posição vertical anterior. Se essa posição estiver abaixo da dobra, sua imagem hero otimizada não será mais o LCP. Em vez disso, o navegador mede o maior elemento no viewport atual. Isso cria um conjunto inevitável de eventos "Not Preloaded" no seu conjunto de dados. E tudo bem!

1. Lazy Loaded

Se mais de 10% dos seus elementos LCP aparecerem neste grupo, você identificou um problema. Imagens com lazy loading são enfileiradas muito mais tarde (pelo lento analisador DOM e não pelo rápido preload scanner). O atributo loading="lazy" instrui o navegador a aguardar para iniciar o download até que o layout seja calculado e o elemento esteja próximo ao viewport.

A correção: Você deve remover este atributo de carregamento. O elemento LCP nunca deve ser carregado com lazy loading.

<!-- INCORRETO -->
<img src="hero.jpg" loading="lazy" alt="Imagem Hero" />

<!-- CORRETO -->
<img src="hero.jpg" fetchpriority="high" alt="Imagem Hero" />

2. Not Preloaded

Isso representa o comportamento padrão do navegador. O navegador descobriu a imagem no HTML durante a análise inicial, mas não recebeu nenhum sinal para priorizá-la em relação a outras imagens.

O impacto na velocidade da página depende da complexidade da sua página web. A imagem do LCP entra em uma fila de disputa de recursos. Se a sua página tiver muitos scripts, fontes, outras imagens sem lazy loading ou estilos para baixar, o navegador poderá atrasar o download dessa imagem, aumentando o atraso de carregamento.

3. Preloaded

Isso indica que o recurso foi descoberto por meio de uma tag <link rel="preload"> no head do documento. Esse link de pré-carregamento basicamente significa uma descoberta antecipada, mesmo que a referência da imagem esteja profundamente aninhada no DOM ou oculta em um arquivo CSS (imagem de fundo).

O pré-carregamento é a maneira mais eficaz de forçar um download antecipado. No entanto, ele exige a manutenção de uma tag de link separada que deve corresponder exatamente à URL da imagem. Se elas divergirem, você fará o download duplo de um recurso.

4. High fetchpriority

Este é o padrão de engenharia moderno. O navegador foi instruído através do atributo fetchpriority="high" a tratar esta imagem específica como um recurso crítico.

A estratégia: Este é o estado desejado para LCP baseado em imagem. Ele sinaliza a importância diretamente no elemento, elevando-o acima de outros recursos na fila de download sem a sobrecarga de manutenção de tags de pré-carregamento manuais.

5. Not an Image

Status: Nó de texto / SVG

O elemento LCP é um bloco de texto (h1, p) ou um SVG puro. Este é o estado de arquitetura ideal porque o texto gera zero atraso de carregamento (ele já está presente no documento HTML).

A otimização: Se o seu LCP estiver nesta categoria, mas ainda assim lento, o gargalo é exclusivamente o atraso de renderização. Você deve otimizar seu Caminho de Renderização Crítico (bloqueio de CSS/JS) ou sua estratégia de carregamento de fontes (font-display: swap), pois não há arquivo de imagem para baixar.

Workflow: Otimizando o atraso de carregamento

Use esta dimensão para validar sua estratégia de recursos de frontend.

1. Elimine o lazy loading: Filtre por Lazy Loaded. Se este valor for maior que 0%, encontre o componente que adiciona loading="lazy" à imagem hero e remova-o. Isso é comum em templates de CMS que aplicam lazy loading globalmente a todas as mídias.
2. Migre para fetchpriority: Mova o tráfego de Not Preloaded e Preloaded para High fetchpriority. Substituir <link rel="preload"> por fetchpriority="high" limpa o seu <head> e acopla a lógica de prioridade diretamente ao componente.
3. Audite imagens de fundo: Se você tiver um volume alto em Not Preloaded e seu LCP for uma imagem de fundo, o navegador a estará descobrindo tarde demais (somente após a análise do CSS). Você deve refatorar isso para uma tag HTML <img> com fetchpriority="high" ou forçar um cabeçalho Preload.

Regra prática de engenharia

Sua meta de distribuição para esta dimensão é rígida:

• <10% Lazy Loaded
• > 90% High fetchpriority (para LCPs de imagem)
• 100% Not an image (para LCPs de texto)

Qualquer tráfego que caia em "Not Preloaded" representa um estado não otimizado no qual você está entregando o controle da prioridade do recurso para as heurísticas padrão do navegador.