Esta página foi traduzida pela API Cloud Translation.

Otimizar o carregamento de recursos com a API Fetch Preview

A API Fetch Priority indica a prioridade relativa dos recursos para o navegador. Ela pode permitir o carregamento ideal e melhorar as Core Web Vitals.

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

Compatibilidade com navegadores

Origem

Quando um navegador analisa uma página da Web e começa a descobrir e fazer o download de recursos, como imagens, scripts ou CSS, ele atribui a ela uma busca priority para que seja possível fazer o download na ordem ideal. A prioridade de um recurso geralmente depende do que ele é e onde está no documento. Por exemplo, imagens na janela de visualização podem ter uma prioridade High, e a prioridade para CSS de bloqueio de renderização carregado antecipadamente usando <link>s no <head> pode ser Very High. Os navegadores são muito bons em atribuir prioridades que funcionam bem, mas podem não ser ideais em todos os casos.

Esta página discute a API Fetch Priority e o atributo HTML fetchpriority, que permite indicar a prioridade relativa de um recurso (high ou low). A prioridade de busca pode ajudar a otimizar as Core Web Vitals.

Resumo

Algumas áreas importantes em que a prioridade da busca pode ajudar:

Para aumentar a prioridade da imagem da LCP, especifique fetchpriority="high" no elemento de imagem, fazendo com que a LCP ocorra mais cedo.
Aumentar a prioridade dos scripts async, usando uma semântica melhor do que a invasão mais comum atual, inserindo um <link rel="preload"> para o script async.
Diminuir a prioridade de scripts de corpo final para permitir um melhor sequenciamento com imagens.

Uma visualização de tira de filme comparando dois testes da página inicial do Google Voos. Na parte de baixo, a prioridade de busca é usada para aumentar a prioridade da imagem principal, resultando em uma redução de 0,7 segundo na LCP. — Buscar prioridade melhorando a Maior exibição de conteúdo de 2,6 s para 1,9 s em um teste do Google Voos.

Historicamente, os desenvolvedores têm pouca influência sobre a prioridade do recurso usando pré-carregamento e pré-conexão. O pré-carregamento permite que você informe ao navegador os recursos críticos que deseja carregar mais cedo, antes que ele os descubra naturalmente. Isso é especialmente útil para recursos mais difíceis de descobrir, como fontes incluídas em folhas de estilo, imagens de plano de fundo ou recursos carregados de um script. A pré-conexão ajuda a aquecer as conexões com servidores de origem cruzada e pode melhorar métricas como o tempo até o primeiro byte. Ela é útil quando você conhece uma origem, mas não necessariamente o URL exato do recurso que será necessário.

A prioridade de busca complementa estas Dicas de recursos. É um indicador baseado em marcação, disponível pelo atributo fetchpriority, que os desenvolvedores podem usar para indicar a prioridade relativa de um recurso específico. Você também pode usar essas dicas com JavaScript e a API Fetch com a propriedade priority para influenciar a prioridade das buscas de recursos feitas para dados. Buscar prioridade também pode complementar o pré-carregamento. Use uma imagem Largest Contentful Paint, que, quando pré-carregada, ainda terá uma prioridade baixa. Se ela for rejeitada por outros recursos iniciais de baixa prioridade, o uso da prioridade de busca poderá ajudar a determinar a velocidade de carregamento da imagem.

Prioridade de recursos

A sequência de download de recursos depende da prioridade atribuída ao navegador para todos os recursos da página. Os fatores que podem afetar a computação de prioridade lógica incluem o seguinte:

O tipo de recurso, como CSS, fontes, scripts, imagens e recursos de terceiros.
O local ou a ordem em que o documento faz referência aos recursos.
Se os atributos async ou defer são usados em scripts.

A tabela abaixo mostra como o Chrome prioriza e sequencia a maioria dos recursos:

	Carregar na fase de bloqueio de layout		Carregar um por vez na fase de bloqueio de layout
Piscar Prioridade	VeryHigh	Alta	Média	Baixa	VeryLow
DevTools Priority	Mais alta	Alta	Média	Baixa	Menor
	Recurso principal
	CSS (adiantado**)		CSS (atrasado**)		CSS (incompatibilidade de mídia***)
		Script (antecipado** ou não do scanner de pré-carregamento)	Script (atrasado**)	Script (assíncrono)
	Fonte	Fonte (rel=preload)
		Importar
		Imagem (na janela de visualização)	Imagem (primeiras imagens > 10.000px2)	Imagem
				Mídia (vídeo/áudio)
					Pré-busca
		XSL
	XHR (sincronização)	XHR/busca* (assíncrono)

Observações:
* Os pré-carregamentos que usam "as" ou busca com um "destination" específico usam a prioridade do destino solicitado. Por exemplo, o pré-carregamento as="style" usa a prioridade mais alta. Sem destino explícito, a busca é priorizada como um XHR assíncrono.
** "Antecipado" é definido como solicitado antes de qualquer imagem não pré-carregada ser solicitada e "atrasado" ocorre depois da solicitação de imagens não pré-carregadas.
*** O CSS em que o tipo de mídia não corresponde não é buscado pelo scanner de pré-carregamento e só é processado quando o analisador principal o alcança, o que geralmente significa que a busca foi feita com atraso.

As imagens começam em "Baixa" prioridade por padrão. No momento do layout, as imagens na janela de visualização são otimizadas para "Alta". A partir do Chrome 117, as primeiras cinco imagens grandes serão definidas como "Média". para acelerar isso, e dois deles podem ser buscados em paralelo durante o "modo apertado" inicial. Ao marcar imagens importantes na marcação usando fetchpriority="high", elas podem começar em "Alta". imediatamente e carregar com muito mais rapidez.

O navegador faz o download de recursos com a mesma prioridade computada na ordem em que são descobertos. É possível verificar a prioridade atribuída a diferentes recursos ao carregar uma página na guia Rede das Ferramentas para desenvolvedores do Chrome. Para incluir a coluna priority, clique com o botão direito do mouse nos títulos da tabela e marque-a.

Guia "Network" do DevTools do Chrome listando vários recursos de fonte. Elas têm a maior prioridade. — Prioridade do recurso `type = "font"` na página de detalhes das notícias da BBC

Guia "Network" do DevTools do Chrome listando vários recursos de fonte. Elas são uma mistura de prioridade baixa e alta. — Prioridade do recurso `type = "script"` na página de detalhes das notícias da BBC.

Quando as prioridades mudam, elas aparecem na configuração Linhas de solicitação grande ou em uma dica.

Guia "Rede" do DevTools do Chrome. A coluna "Linhas com solicitações grandes" está marcada e a coluna "Prioridade" mostra a primeira imagem com prioridade alta e, na parte inferior, uma prioridade inicial diferente de mídia. O mesmo é mostrado na dica. — Mudanças de prioridade no DevTools

Quando a prioridade pode ser necessária?

Agora que você entende a lógica de priorização do navegador, pode ajustar a ordem de download da sua página para otimizar o desempenho e as Core Web Vitals. Aqui estão alguns exemplos de itens que podem ser alterados para influenciar a prioridade dos downloads de recursos:

Coloque tags de recurso, como <script> e <link>, na ordem em que você quer que o navegador faça o download delas. Recursos com a mesma prioridade geralmente são carregados na ordem em que são descobertos.
Use a dica de recurso do preload para fazer o download antecipado de recursos necessários, especialmente para aqueles que não são facilmente descobertos pelo navegador.
Use async ou defer para fazer o download de scripts sem bloquear outros recursos.
Carregue lentamente o conteúdo abaixo da dobra para que o navegador possa usar a largura de banda disponível para recursos acima da dobra mais importantes.

Essas técnicas ajudam a controlar o cálculo de prioridade do navegador, melhorando o desempenho e as Core Web Vitals. Por exemplo, quando uma imagem de plano de fundo crítica é pré-carregada, ela pode ser descoberta muito mais cedo, melhorando a Maior exibição de conteúdo (LCP).

Às vezes, esses identificadores não são suficientes para priorizar os recursos de maneira otimizada para o aplicativo. Veja alguns cenários em que a busca de prioridade pode ser útil:

Você tem várias imagens acima da dobra, mas nem todas precisam ter a mesma prioridade. Por exemplo, em um carrossel de imagens, apenas a primeira imagem visível precisa de uma prioridade mais alta, e as outras, normalmente fora da tela inicialmente, podem ser definidas para ter uma prioridade mais baixa.
As imagens na janela de visualização normalmente começam com uma prioridade Low. Depois que o layout é concluído, o Chrome descobre que eles estão na janela de visualização e aumenta sua prioridade. Isso geralmente adiciona um atraso significativo ao carregamento das imagens críticas, como as imagens principais. Fornecer a prioridade de busca na marcação permite que a imagem comece com uma prioridade High e comece a carregar muito mais cedo. Para tentar automatizar um pouco, as primeiras cinco imagens maiores são definidas com a prioridade Medium pelo Chrome, o que ajuda, mas uma fetchpriority="high" explícita é ainda melhor.

O pré-carregamento ainda é necessário para a descoberta antecipada de imagens LCP incluídas como planos de fundo de CSS. Para otimizar suas imagens de plano de fundo prioridade, inclua fetchpriority='high' no pré-carregamento.
A declaração de scripts como async ou defer instrui o navegador a carregá-los de forma assíncrona. No entanto, como mostrado na tabela de prioridades, esses scripts também recebem o nível "Baixa" prioridade. Talvez você queira aumentar a prioridade e, ao mesmo tempo, garantir o download assíncrono, especialmente para scripts que são críticos para a experiência do usuário.
Se você usa a API JavaScript fetch() para buscar recursos ou dados de forma assíncrona, o navegador atribui a ela a prioridade High. Talvez você queira que algumas de suas buscas sejam executadas com menor prioridade, especialmente se estiver misturando chamadas de API em segundo plano com chamadas de API que respondam à entrada do usuário. Marque as chamadas de API em segundo plano como prioridade Low e as chamadas de API interativas como prioridade High.
O navegador atribui a CSS e fontes uma prioridade High, mas alguns desses recursos podem ser mais importantes que outros. Você pode usar a prioridade de busca para reduzir a prioridade de recursos não críticos. O CSS inicial é de bloqueio de renderização, portanto, geralmente tem uma prioridade High.

O atributo `fetchpriority`

Use o atributo HTML fetchpriority para especificar a prioridade de download de tipos de recursos, como CSS, fontes, scripts e imagens, quando o download for feito usando as tags link, img ou script. Ele pode assumir os seguintes valores:

high: o recurso tem uma prioridade mais alta, e você quer que o navegador o priorize o normal, desde que a heurística do próprio navegador não impeça que isso aconteça.
low: o recurso tem prioridade mais baixa, e você quer que o navegador o reduza novamente se a heurística permitir.
auto: o valor padrão, que permite que o navegador escolha a prioridade adequada.

Confira alguns exemplos de como usar o atributo fetchpriority na marcação e a propriedade priority equivalente ao script.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Efeitos da prioridade do navegador e do `fetchpriority`

É possível aplicar o atributo fetchpriority a recursos diferentes, conforme mostrado na tabela a seguir, para aumentar ou reduzir a prioridade calculada. fetchpriority="auto" (◉) em cada linha marca a prioridade padrão para esse tipo de recurso. (também disponível como um documento Google).

	Carregar na fase de bloqueio de layout		Carregar um de cada vez na fase de bloqueio de layout
Piscar Prioridade	VeryHigh	Alta	Média	Baixa	VeryLow
DevTools Priority	Mais alta	Alta	Média	Baixa	Menor
Principal recurso	◉
CSS (adiantado**)	⬆◉	⬇
CSS (atrasado**)		⬆	◉	⬇
CSS (incompatibilidade de mídia***)		⬆***			◉⬇
Script (antecipado** ou não do scanner de pré-carregamento)		⬆◉		⬇
Script (atrasado**)		⬆	◉	⬇
Script (assíncrono/adiado)		⬆		◉⬇
Fonte	◉
Fonte (rel=preload)		⬆◉		⬇
Importar		◉
Imagem (na janela de visualização, depois do layout)		⬆◉		⬇
Imagem (primeiras imagens > 10.000px2)		⬆	◉	⬇
Imagem		⬆		◉⬇
Mídia (vídeo/áudio)				◉
XHR (sincronização): descontinuado	◉
XHR/busca* (assíncrono)		⬆◉		⬇
Pré-busca					◉
XSL		◉

Observações:
* O pré-carregamento usando "as" ou busca usando um "destination" específico usa a prioridade do destino solicitado. Por exemplo, o as="style" de pré-carregamento vai usar a prioridade mais alta. Sem destino explícito, a busca será priorizada como um XHR assíncrono.
** "Antecipado" é definido como sendo solicitado antes de qualquer imagem não pré-carregada ser solicitada ("atrasado" vem depois).
*** O CSS em que o tipo de mídia não corresponde não é buscado pelo scanner de pré-carregamento e só é processado quando o analisador principal o alcança, o que geralmente significa que a busca será muito tarde, mesmo com fetchpriority="high".

Por padrão, as imagens começam em "Baixa" e, no momento do layout, são aumentados para "Alta" se estiver na janela de visualização. A partir do Chrome 117, as primeiras cinco imagens grandes serão definidas como "Média". para acelerar isso, e dois deles podem ser buscados em paralelo durante o "modo apertado" inicial. Ao marcar imagens importantes na marcação usando fetchpriority="high", elas podem começar em "Alta". imediatamente e carregar com muito mais rapidez.

fetchpriority define a prioridade relativa, o que significa que aumenta ou diminui a prioridade padrão por um valor adequado, em vez de definir explicitamente a prioridade como High ou Low. Isso geralmente resulta na prioridade High ou Low, mas nem sempre. Por exemplo, um CSS crítico com fetchpriority="high" mantém o nível "Muito alto"/"Mais alto" e o uso de fetchpriority="low" nesses elementos mantém a prioridade "Alta" prioridade. Nenhum desses casos envolve a definição explícita da prioridade como High ou Low.

Casos de uso

Use o atributo fetchpriority quando quiser dar ao navegador uma dica extra sobre a prioridade a ser usada na busca de um recurso.

Aumentar a prioridade da imagem da LCP

É possível especificar fetchpriority="high" para aumentar a prioridade da LCP ou de outras imagens críticas.

<img src="lcp-image.jpg" fetchpriority="high">

A comparação a seguir mostra a página do Google Voos com uma imagem de plano de fundo da LCP carregada com e sem prioridade de busca. Com a prioridade definida como alta, a LCP melhorou de 2,6s para 1,9s.

Um experimento realizado com workers da Cloudflare para reescrever a página do Google Voos usando a prioridade de busca.

Reduzir a prioridade de imagens acima da dobra

Use fetchpriority="low" para diminuir a prioridade de imagens acima da dobra que não são imediatamente importantes, por exemplo, imagens fora da tela em um carrossel de imagens.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

Embora as imagens de 2 a 4 estejam fora da janela de visualização, elas podem ser consideradas "próximas o suficiente" para otimizá-los para high e carregar mesmo que um atributo load=lazy seja adicionado. Portanto, fetchpriority="low" é a solução correta para isso.

Em um experimento anterior com o app Oodle, usamos esse recurso para diminuir a prioridade das imagens que não aparecem no carregamento. Diminuiu o tempo de carregamento da página em dois segundos.

Uma comparação lado a lado da prioridade de busca quando usada no carrossel de imagens do app Oodle. À esquerda, o navegador define prioridades padrão para imagens de carrossel, mas baixa e pinta essas imagens cerca de dois segundos mais lentamente do que o exemplo à direita, que define uma prioridade mais alta apenas para a primeira imagem do carrossel. — Usar a prioridade alta apenas para a primeira imagem do carrossel permite que a página carregue mais rápido.

Reduzir a prioridade dos recursos pré-carregados

Para impedir que recursos pré-carregados concorram com outros recursos críticos, você pode reduzir a prioridade deles. Use essa técnica com imagens, scripts e CSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Repriorizar scripts

Os scripts de que sua página precisa ser interativa devem carregar rapidamente, mas não devem bloquear outros recursos mais importantes que bloqueiam a renderização. Você pode marcar esses itens como async com prioridade alta.

<script src="async_but_important.js" async fetchpriority="high"></script>

Não é possível marcar um script como async se ele depende de estados específicos do DOM. No entanto, se eles forem executados mais tarde na página, você poderá carregá-los com prioridade mais baixa:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Isso ainda vai bloquear o analisador quando ele chegar ao script, mas vai permitir que o conteúdo anterior seja priorizado.

Uma alternativa, se o DOM concluído for necessário, é usar o atributo defer, que é executado, em ordem, após DOMContentLoaded, ou até async na parte inferior da página.

Diminuir a prioridade de buscas de dados não críticos

O navegador executa fetch com alta prioridade. Se você tem diversas buscas que podem ser disparadas simultaneamente, é possível usar a prioridade padrão alta para as buscas de dados mais importantes e diminuir a prioridade dos dados menos críticos.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Buscar notas de implementação de prioridade

A prioridade de busca pode melhorar o desempenho em casos de uso específicos, mas há algumas coisas que você deve saber ao usar a prioridade de busca:

O atributo fetchpriority é uma dica, não uma diretiva. O navegador tenta respeitar a preferência do desenvolvedor, mas também pode aplicar as preferências de prioridade do recurso para resolver conflitos.
Não confunda "Prioridade de busca" com o pré-carregamento:
- O pré-carregamento é uma busca obrigatória, não uma dica.
- O pré-carregamento permite que o navegador descubra um recurso antecipadamente, mas ainda busca o recurso com a prioridade padrão. Por outro lado, a prioridade de busca não ajuda na descoberta, mas permite que você aumente ou diminua a prioridade da busca.
- Muitas vezes, é mais fácil observar e medir os efeitos de um pré-carregamento do que os efeitos de uma alteração de prioridade.
A prioridade de busca pode complementar os pré-carregamentos, aumentando a granularidade da priorização. Se você já especificou um pré-carregamento como um dos primeiros itens no <head> para uma imagem da LCP, a prioridade de busca da high pode não melhorar significativamente a LCP. No entanto, se o pré-carregamento acontecer após o carregamento de outros recursos, a prioridade de busca high poderá melhorar ainda mais a LCP. Se uma imagem crítica for uma imagem de plano de fundo CSS, pré-carregue-a com fetchpriority = "high".
As melhorias no tempo de carregamento decorrentes da priorização são mais relevantes em ambientes em que mais recursos competem pela largura de banda da rede disponível. Isso é comum para conexões HTTP/1.x em que não é possível fazer downloads paralelos ou em conexões HTTP/2 ou HTTP/3 de baixa largura de banda. Nesses casos, a priorização pode ajudar a resolver gargalos.
As CDNs não implementam a priorização HTTP/2 de maneira uniforme e semelhante para HTTP/3. Mesmo que o navegador comunique a prioridade da prioridade de busca, o CDN pode não priorizar os recursos na ordem especificada. Isso dificulta o teste de prioridade de busca. As prioridades são aplicadas internamente no navegador e com protocolos compatíveis com priorização (HTTP/2 e HTTP/3). Ainda assim, vale a pena usar a prioridade de busca apenas para a priorização do navegador interno, independentemente do suporte à CDN ou à origem, porque as prioridades geralmente mudam quando o navegador solicita recursos. Por exemplo, recursos de baixa prioridade, como imagens, geralmente não são solicitados enquanto o navegador processa itens <head> críticos.
Talvez não seja possível introduzir a prioridade de busca como uma prática recomendada no design inicial. Posteriormente no ciclo de desenvolvimento, você poderá atribuir as prioridades a diferentes recursos na página e, se elas não corresponderem às suas expectativas, poderá introduzir a prioridade de busca para otimização adicional.

Os desenvolvedores precisam usar o pré-carregamento para a finalidade pretendida: pré-carregar recursos não detectados pelo analisador (fontes, importações, imagens LCP em segundo plano). O posicionamento da dica preload será afetado quando o recurso for pré-carregado.

A prioridade de busca está relacionada a como o recurso será buscado ao ser buscado.

Dicas para usar pré-carregamentos

Considere o seguinte ao usar pré-carregamentos:

Incluir um pré-carregamento em cabeçalhos HTTP o coloca antes de todo o resto na ordem de carregamento.
Geralmente, os pré-carregamentos são carregados na ordem em que o analisador os chega para qualquer coisa com prioridade Medium ou superior. Tenha cuidado caso inclua pré-carregamentos no início do HTML.
O pré-carregamento de fontes provavelmente funciona melhor no final da cabeça ou no início do corpo.
Os pré-carregamentos de importação (import() ou modulepreload dinâmicos) precisam ser executados após a tag de script que precisa da importação. Portanto, primeiro carregue ou analise o script para que ele possa ser avaliado durante o carregamento das dependências.
Os pré-carregamentos de imagem têm uma prioridade Low ou Medium por padrão. Ordene-as em relação a scripts assíncronos e outras tags de prioridade baixa ou mais baixa.

Histórico

Esse recurso foi testado pela primeira vez no Chrome como um teste de origem em 2018 e novamente em 2021 usando o atributo importance. Naquela época, ela se chamava Dicas de prioridade. Desde então, a interface mudou para fetchpriority para HTML e priority para a API Fetch do JavaScript, como parte do processo de padrões da Web. Para reduzir a confusão, agora chamamos essa prioridade de busca de API.

Conclusão

Os desenvolvedores podem estar interessados na prioridade de busca com as correções no comportamento de pré-carregamento e o foco recente nas Core Web Vitals e na LCP. Agora, elas têm botões adicionais disponíveis para atingir a sequência de carregamento preferida.