Aumentando a prioridade do LCP • SEO Salvador

Aumentando a prioridade do LCP. Um guia para fetchpriority=”high”

No mundo do desempenho web, cada milissegundo conta. Todos nós já passamos por isso: você abre um site, o texto carrega, mas a imagem principal — aquela que você realmente quer ver — permanece em branco por um segundo a mais. Esse atraso geralmente prejudica sua pontuação de Largest Contentful Paint (LCP) .

Insira fetchpriority. Este atributo HTML é revolucionário para indicar aos navegadores exatamente quais recursos merecem “tratamento VIP”.

O que é `fetchpriority`?

O atributo fetchpriority é uma dica do navegador que sinaliza a importância relativa de um recurso.

Embora os navegadores geralmente sejam inteligentes em adivinhar o que carregar primeiro, eles não são videntes. Eles podem priorizar um script descoberto posteriormente em vez da imagem principal enorme que é, na verdade, o elemento mais importante na tela.

Ao adicionar fetchpriority="high", você está movendo esse recurso para o início da fila.

Como funciona

Quando um navegador analisa uma página, ele atribui um nível de prioridade (Baixo, Médio, Alto ou Muito Alto) a cada recurso.

As imagens geralmente são exibidas em “Baixa” ou “Média” por padrão.
Scripts e CSS geralmente são definidos como “Alta prioridade”.

Ao definir manualmente a prioridade, você substitui esses valores padrão para garantir que seus elementos “principais” não fiquem presos atrás de tarefas de segundo plano menos críticas.

Por que usá-lo? (Aumentando a prioridade do LCP)

O Largest Contentful Paint (LCP) mede o momento em que a maior imagem ou bloco de texto se torna visível. Se a sua imagem principal for o elemento LCP, fetchpriority="high"você pode:

Reduzir o tempo de espera na fila: o navegador inicia o download da imagem mais rapidamente.
Otimizar largura de banda: aloca mais “canais” para esse recurso específico.
Melhore a experiência do usuário: os usuários visualizam o conteúdo principal da sua página mais rapidamente, reduzindo as taxas de rejeição.

Nota: Testes em situações reais demonstraram que a implementação correta fetchprioritypode melhorar o LCP em 20 a 30% em muitos casos.

Como implementar

Você pode aplicar esse atributo a tags como <img>, <link>, <script>, e até mesmo <iframe>tags .

1. Para imagens

Este é o caso de uso mais comum. Se você tiver uma imagem acima da dobra, atribua a ela a tag de alta prioridade.

O HTML:

2. Para recursos pré-carregados

Se você estiver pré-carregando um recurso crítico no arquivo <head>, também poderá especificar a prioridade lá.

O HTML

3. Despriorizar ativos não críticos

Por outro lado, você pode usar fetchpriority="low"para coisas que não importam imediatamente, como imagens mais abaixo na página (abaixo da dobra) ou um script de rastreamento não essencial.

Boas práticas a ter em mente

Não exagere: se tudo é prioridade “alta”, nada é. Use apenas para os 1 ou 2 elementos mais críticos na tela.
Combine com loading="lazy" : Use fetchpriority="high"para o topo da página e loading="lazy"para todo o resto. Nunca use ambos na mesma imagem.
Teste com as Ferramentas de Desenvolvedor: Você pode ver a coluna “Prioridade” na guia Rede das Ferramentas de Desenvolvedor do Chrome para verificar se sua dica está funcionando.

Conclusão

fetchpriority="high"é uma das ferramentas mais simples, porém mais eficazes, no conjunto de ferramentas de desempenho de um desenvolvedor.

Não é uma varinha mágica, mas é um megafone muito potente que ajuda o navegador a se concentrar no que realmente importa para seus usuários.

Agora que você já conhece tudo sobre Aumentando a prioridade do LCP, leia mais postagens em nosso Blog de SEOs

O que é fetchpriority?