Core/Dash Dimension: LCP Priority

Dimensão: Recurso: LCP Priority

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

Esta é sua principal ferramenta de auditoria para o Load Delay. Ela expõe se o seu recurso LCP está lutando por largura de banda ou sendo 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 usuário retorna à sua página usando o botão "Voltar" ou "Recarregar", a maioria dos navegadores o retorna à posição vertical anterior. Se essa posição estiver abaixo da dobra, sua Hero Image otimizada não será mais o LCP. Em vez disso, o navegador mede o maior elemento na viewport atual. Isso cria um conjunto inevitável de eventos "Not Preloaded" em seu conjunto de dados. E isso é perfeitamente normal!

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 analisador lento do DOM e não pelo scanner rápido de pré-carregamento). O atributo loading="lazy" instrui o navegador a esperar com o download até que o layout seja calculado e o elemento esteja perto da 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="Hero Image" />

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

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 (pagespeed) depende da complexidade da sua página da web. A imagem LCP entra em uma fila de contenção de recursos. Se sua página tiver muitos scripts, fontes, outras imagens sem lazy loading ou estilos para baixar, o navegador pode atrasar o download desta imagem, aumentando o Load Delay.

3. Preloaded

Isso indica que o recurso foi descoberto através de uma tag <link rel="preload"> no cabeçalho do documento (head). Esses links de preload basicamente significam uma descoberta precoce, mesmo que a referência da imagem esteja enterrada profundamente no DOM ou escondida em um arquivo CSS (background image).

O preloading é a maneira mais eficaz de forçar um download antecipado, preloading 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 alvo para o LCP baseado em imagem. Ele sinaliza a importância diretamente no elemento, impulsionando-o acima de outros recursos na fila de download sem a sobrecarga de manutenção das 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 bruto. 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 o Render Delay. Você deve otimizar o seu Caminho Crítico de Renderização (Critical Rendering Path - bloqueio de CSS/JS) ou sua estratégia de carregamento de fontes (font-display: swap), pois não há arquivo de imagem para baixar.

Fluxo de Trabalho: Otimizando o Load Delay

Use esta dimensão para validar a estratégia de recursos do seu frontend.

1. Elimine o Lazy Loading: Filtre por Lazy Loaded. Se esse valor for superior a 0%, encontre o componente adicionando loading="lazy" à hero image 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 as Imagens de Fundo: Se você tiver um alto volume em Not Preloaded e o seu LCP for uma imagem de fundo (background image), o navegador está descobrindo-a tarde demais (apenas após o CSS ser analisado). Você deve refatorar isso para uma tag HTML <img> com fetchpriority="high" ou forçar um cabeçalho de Preload.

Regra Prática de Engenharia

Sua meta de distribuição para esta dimensão é estrita:

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

Qualquer tráfego caindo em "Not Preloaded" representa um estado não otimizado onde você está entregando o controle da prioridade de recursos às heurísticas padrão do navegador.