Dimensão Core/Dash: LCP Priority

Dimensão: Recurso: LCP Priority

A dimensão LCP Priority segmenta dados de performance com base em como o navegador descobriu e priorizou o recurso de LCP. Enquanto a dimensão "Element Type" lhe diz o que é o elemento (Texto vs. Imagem), esta dimensão diz-lhe por que o navegador atrasou o seu carregamento.

Esta é a sua principal ferramenta de auditoria para Load Delay. Ela expõe se o seu asset de LCP está a lutar por largura de banda ou se está a ser artificialmente atrasado por atributos HTML incorretos.

A Hierarquia de Prioridade

O navegador atribui uma prioridade de download a cada recurso. Esta dimensão mapeia o elemento LCP para um de cinco estados de carregamento específicos, classificados do mais destrutivo (Lazy Loaded) ao mais ideal (Text/High Priority).

Contexto: Quando um utilizador regressa à sua página através do botão "Voltar" ou "Recarregar", a maioria dos navegadores devolve-o à sua posição vertical anterior. Se esta posição for abaixo da dobra (below the fold), a sua Hero Image otimizada deixa de ser o LCP. Em vez disso, o navegador mede o maior elemento na viewport atual. Isto cria um conjunto inevitável de eventos "Not Preloaded" no seu dataset. E isso é perfeitamente aceitável!

1. Lazy Loaded 

Se mais de 10% dos seus elementos LCP aparecerem neste bucket, identificou um problema. Imagens com lazy loading são colocadas na fila muito mais tarde (pelo parser DOM lento e não pelo preload scanner rápido). O atributo loading="lazy" instrui o navegador a esperar com o  download até que o layout seja calculado e o elemento esteja próximo da viewport.

A Correção: Deve remover este atributo de carregamento. O elemento LCP nunca deve ser lazy-loaded.

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

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

2. Not Preloaded

Isto representa o comportamento padrão do navegador. O navegador descobriu a imagem no HTML durante o parse inicial, mas não recebeu qualquer sinal para a priorizar em relação a outras imagens.

O impacto na velocidade da página depende da complexidade da sua página web. A imagem LCP entra numa fila de contenção de recursos. Se a sua página tiver muitos scripts, fontes, outras imagens não-lazy ou estilos para descarregar, o navegador pode atrasar o download desta imagem, aumentando o Load Delay.

3. Preloaded

Isto indica que o recurso foi descoberto através de uma tag <link rel="preload"> no head do documento. Estes links de preload significam basicamente uma descoberta antecipada, mesmo que a referência da imagem esteja enterrada profundamente no DOM ou escondida num ficheiro CSS (imagem de fundo).

O preloading é a forma mais eficaz de forçar um download antecipado; o preloading requer a manutenção de uma tag de link separada que deve corresponder exatamente ao URL da imagem. Se divergirem, fará o download duplo de um asset.

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 alvo para LCP baseado em imagem. Sinaliza a importância diretamente no elemento, impulsionando-o acima de outros assets na fila de download sem a sobrecarga de manutenção de tags de preload manuais.

5. Not an Image

Status: Nó de Texto / SVG

O elemento LCP é um bloco de texto (h1, p) ou um SVG raw. Este é o estado arquitetónico ideal porque o texto incorre em zero Load Delay (já está presente no documento HTML).

A Otimização: Se o seu LCP está nesta categoria mas ainda é lento, o gargalo é exclusivamente Render Delay. Deve otimizar o seu Critical Rendering Path (bloqueio de CSS/JS) ou a sua estratégia de carregamento de fontes (font-display: swap), uma vez que não existe ficheiro de imagem para descarregar.

Workflow: Otimizar o Load Delay

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

1. Elimine o Lazy Loading: Filtre por Lazy Loaded. Se este valor for superior a 0%, encontre o componente que adiciona loading="lazy" à imagem hero e remova-o. Isto é comum em templates de CMS que aplicam lazy loading globalmente a toda a media.
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 tiver um volume elevado em Not Preloaded e o seu LCP for uma imagem de fundo, o navegador está a descobri-la demasiado tarde (apenas após o CSS ser analisado). Deve refatorizar isto para uma tag HTML <img> com fetchpriority="high" ou forçar um cabeçalho Preload.

Regra Prática de Engenharia

O seu objetivo de distribuição para esta dimensão é estrito:

• <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 onde está a ceder o controlo da prioridade dos recursos à heurística padrão do navegador.