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
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Compatibilidade com navegadores

  • Chrome: 102
  • Borda: 102.
  • Firefox: 132.
  • Safari: 17.2.

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 Fetch Priority pode ajudar:

  • Para otimizar a prioridade da imagem da LCP, especifique fetchpriority="high" no elemento de imagem, fazendo com que a LCP ocorra mais cedo.
  • Aumento da prioridade dos scripts async, usando uma semântica melhor do que o hack mais comum atual (inserindo um <link rel="preload"> para o script async).
  • Diminuição da prioridade dos scripts do corpo tardio para permitir uma melhor sequência 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 sobre os recursos essenciais que você quer carregar antes que o navegador 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. Ele é ú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. Também é possível usar essas dicas com JavaScript e a API Fetch com a propriedade priority para influenciar a prioridade das buscas de recursos feitas para dados. A prioridade de busca 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 do recurso

A sequência de download de recursos depende da prioridade atribuída pelo navegador a cada recurso na página. Os fatores que podem afetar a lógica de computação de prioridade incluem:

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

A tabela a seguir mostra como o Chrome prioriza e organiza a maioria dos recursos:

  Carregamento na fase de bloqueio do layout Carregar um por vez na fase de bloqueio de layout
Piscar
Prioridade		 VeryHigh Alta Média Baixa VeryLow
DevTools
Prioridade		 Mais alta Alta Média Baixa Menor
Recurso principal
CSS (adiantado**) CSS (atraso**) CSS (incompatibilidade de mídia***)
Script (pré-** 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/fetch* (assíncrono)

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. Inclua a coluna prioridade clicando com o botão direito do mouse nos cabeçalhos da tabela e marcando a caixa de seleção.

Guia &quot;Network&quot; do Chrome DevTools com vários recursos de fonte. Todos têm a prioridade mais alta.
Prioridade do recurso type = "font" na página de detalhes das notícias da BBC
Guia &quot;Network&quot; do Chrome DevTools com 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 &quot;Rede&quot; do DevTools do Chrome. A configuração &quot;Linhas de solicitações grandes&quot; está marcada e a coluna &quot;Prioridade&quot; mostra a primeira imagem com uma prioridade de &quot;Alta&quot; e uma prioridade inicial diferente de &quot;Médio&quot; abaixo. 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 página para otimizar a performance e as Core Web Vitals. Confira alguns exemplos de coisas que você pode mudar 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 preload para fazer o download dos recursos necessários mais cedo, principalmente para aqueles que não são descobertos com facilidade 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 a computação de prioridade do navegador, melhorando a performance 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. Confira alguns cenários em que a prioridade de busca 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 dentro da janela de visualização geralmente 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 importantes, como as imagens principais. Ao fornecer a prioridade de busca na marcação, a imagem começa com uma prioridade High e começa a carregar muito antes. Para automatizar um pouco esse processo, as cinco primeiras imagens maiores são definidas como prioridade Medium pelo Chrome, o que ajuda, mas um fetchpriority="high" explícito é ainda melhor.

    O pré-carregamento ainda é necessário para a descoberta antecipada de imagens LCP incluídas como planos de fundo CSS. Para aumentar a prioridade das imagens de plano de fundo, 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, conforme mostrado na tabela de prioridades, esses scripts também recebem uma prioridade "Baixa". 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ê usar a API JavaScript fetch() para buscar recursos ou dados de forma assíncrona, o navegador vai atribuir a prioridade High a ela. Talvez você queira que algumas das suas buscas sejam executadas com prioridade menor, especialmente se estiver misturando chamadas de API em segundo plano com chamadas de API que respondem à 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 uma prioridade High a CSS e fontes, mas alguns desses recursos podem ser mais importantes que outros. É possível usar a prioridade de busca para diminuir a prioridade de recursos não críticos. O CSS inicial bloqueia a renderização, então geralmente precisa ter 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 do Google).

  Carregamento na fase de bloqueio do layout Carregar um de cada vez na fase de bloqueio de layout
Blink
Priority		 VeryHigh Alta Média Baixa VeryLow
DevTools
Prioridade		 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/adiar) ⬆ ◉⬇
Fonte ◉
Fonte (rel=preload) ⬆◉ ⬇
Importar ◉
Imagem (na janela de visualização, depois do layout) ⬆◉ ⬇
Imagem (primeiras 5 imagens com mais de 10.000 px2) ⬆ ◉ ⬇
Imagem ⬆ ◉⬇
Mídia (vídeo/áudio) ◉
XHR (sincronização): descontinuado ◉
XHR/busca* (assíncrono) ⬆◉ ⬇
Pré-busca ◉
XSL ◉

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, o CSS crítico com fetchpriority="high" mantém a prioridade "Muito alta"/"Alta", e o uso de fetchpriority="low" nesses elementos mantém a prioridade "Alta". Nenhum desses casos envolve definir explicitamente a 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 LCP

É possível especificar fetchpriority="high" para aumentar a prioridade do LCP ou de outras imagens importantes.

<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 de LCP carregada com e sem a prioridade de busca. Com a prioridade definida como alta, o LCP melhorou de 2,6 para 1,9 segundos.

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

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 2 a 4 estejam fora da viewport, elas podem ser consideradas "perto o suficiente" para serem impulsionadas para high e carregadas, 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 de carrossel permite que a página carregue mais rápido.

Diminuir a prioridade dos recursos pré-carregados

Para evitar que os recursos carregados anteriormente entrem em conflito com outros recursos críticos, reduza 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 marcá-los como async com alta prioridade.

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

Não é possível marcar um script como async se ele depender de estados DOM específicos. 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 completo for necessário, é usar o atributo defer, que é executado em ordem após DOMContentLoaded, ou até mesmo async na parte de baixo da página.

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

O navegador executa fetch com alta prioridade. Se você tiver várias transferências que podem ser acionadas simultaneamente, use a prioridade alta padrão para as transferências de dados mais importantes e reduza a prioridade dos dados menos importantes.

// 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 a performance em casos de uso específicos, mas há algumas coisas que você precisa saber ao usar essa prioridade:

  • 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 a 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 mais cedo, 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 carregamentos prévios 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, uma prioridade de busca high pode melhorar ainda mais o 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 os downloads paralelos não são possíveis ou em conexões HTTP/2 ou HTTP/3 de baixa largura de banda. Nesses casos, a priorização pode ajudar a resolver os gargalos.

  • As CDNs não implementam a priorização do HTTP/2 de forma uniforme, assim como para o HTTP/3. Mesmo que o navegador comunique a prioridade de Fetch Priority, 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 vale a pena usar a prioridade de busca apenas para a priorização interna do navegador, independente do suporte ao 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 seu design inicial. Mais adiante no ciclo de desenvolvimento, você pode verificar as prioridades atribuídas a diferentes recursos na página. Se elas não corresponderem às suas expectativas, é possível usar a prioridade de busca para otimizar ainda mais.

Os desenvolvedores precisam usar o pré-carregamento para a finalidade de pré-carregar recursos não detectados pelo analisador (fontes, importações, imagens de LCP em segundo plano). A posição da dica preload vai afetar o momento em que o recurso é pré-carregado.

A prioridade de busca é sobre como o recurso precisa ser buscado.

Dicas para usar os carregamentos antecipados

Informações importantes ao usar pré-carregamentos:

  • A inclusão de um pré-carregamento nos cabeçalhos HTTP coloca esse recurso antes de tudo o que está 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 carregamentos de importação (import() dinâmico ou modulepreload) precisam ser executados depois da tag de script que precisa da importação. Portanto, verifique se o script é carregado ou analisado primeiro para que possa ser avaliado enquanto as dependências são carregadas.
  • O carregamento prévio de imagens tem 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. Na época, o recurso era chamado de Priority Hints. Desde então, a interface mudou para fetchpriority no HTML e priority na 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 provavelmente vão se interessar pela prioridade de busca com as correções no comportamento de pré-carregamento e o foco recente nas Core Web Vitals e na LCP. Agora, eles têm mais controles disponíveis para alcançar a sequência de carregamento preferida.