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.
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 um priority
de busca para que possa fazer o download na ordem ideal. A prioridade de um recurso geralmente depende do conteúdo e de onde ele se encontra no documento. Por exemplo, as imagens na janela de visualização podem ter uma prioridade High
, e a prioridade para CSS bloqueador de renderização com carregamento antecipado usando <link>
s no <head>
pode ser Very High
. Os navegadores são muito eficientes em atribuir prioridades que funcionam bem, mas que podem não ser ideais em todos os casos.
Esta página aborda a API Fetch Preview 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
Confira algumas das principais vantagens em que a prioridade de busca pode ajudar:
- Otimização da prioridade da imagem da LCP especificando
fetchpriority="high"
no elemento de imagem, fazendo com que a LCP aconteça mais cedo. - Aumento da prioridade de scripts
async
, usando semântica melhor do que a invasão mais comum (inserindo um<link rel="preload">
para o scriptasync
) - Diminuir a prioridade dos scripts de corpo atrasado para permitir um melhor sequenciamento com imagens.
![Uma visualização em 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.](https://web.dev/static/articles/fetch-priority/image/a-filmstrip-view-comparin-298b8fe7eedbb.png?authuser=6&hl=pt)
Historicamente, os desenvolvedores têm tido pouca influência sobre a prioridade de recursos usando pré-carregamento e pré-conexão. O pré-carregamento permite que você informe ao navegador sobre os recursos críticos que deseja 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 conexões com servidores de origem cruzada e pode melhorar métricas como o Tempo até o primeiro byte. Ele é útil quando você conhece a origem, mas não necessariamente o URL exato de um recurso que será necessário.
A prioridade de busca complementa estas Dicas de recursos. Ele é 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 em JavaScript e a API Fetch com a propriedade priority
para influenciar a prioridade das buscas de recursos feitas para os dados. A prioridade de busca também pode complementar o pré-carregamento. Usar uma imagem de Maior exibição de conteúdo, que, quando pré-carregada, ainda terá uma prioridade baixa. Se ela for recusada por outros recursos iniciais de baixa prioridade, o uso da prioridade de busca pode ajudar a agilizar o carregamento da imagem.
Prioridade do recurso
A sequência de download de recursos depende da prioridade atribuída do navegador para cada recurso na página. Os fatores que podem afetar a lógica de computação de prioridade incluem os seguintes:
- O tipo de recurso, como CSS, fontes, scripts, imagens e recursos de terceiros.
- O local ou a ordem em que o documento referencia os recursos.
- Se os atributos
async
oudefer
são usados em scripts.
A tabela a seguir 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 | ||||
---|---|---|---|---|---|
Prioridade de Blink |
VeryHigh | Alta | Média | Baixo | VeryLow |
DevTools Prioridade |
Mais alta | Alta | Média | Baixo | Menor |
Recurso principal | |||||
CSS (adiantado**) | CSS (atrasado**) | CSS (incompatibilidade de mídia***) | |||
Script (anterior** ou não ao leitor de pré-carregamento) | Script (atrasado**) | Script (assíncrono) | |||
Fonte | Fonte (rel=preload) | ||||
Importar | |||||
Imagem (na janela de visualização) | Imagem (cinco primeiras imagens > 10.000px2) | Imagem | |||
Mídia (vídeo/áudio) | |||||
Pré-busca | |||||
XSL | |||||
XHR (sincronização) | XHR/busca* (assíncrono) |
O navegador faz o download de recursos com a mesma prioridade calculada na ordem em que são descobertos. Você pode verificar a prioridade atribuída a diferentes recursos ao carregar uma página na guia Rede das Ferramentas do Chrome Dev. Para incluir a coluna prioridade, 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. Todas elas têm a prioridade mais alta.](https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-fdcb380583bdd.png?authuser=6&hl=pt)
type = "font"
na página de detalhes de notícias da BBC![Guia "Network" do DevTools do Chrome listando vários recursos de fonte. Eles são uma combinação de prioridade baixa e alta.](https://web.dev/static/articles/fetch-priority/image/a-screenshot-assets-list-f556ffc3eb8e4.png?authuser=6&hl=pt)
type = "script"
na página de detalhes de notícias da BBC.Quando as prioridades mudam, é possível ver a prioridade inicial e final na configuração Linhas com grande solicitação ou em uma dica.
![Guia "Rede" do DevTools do Chrome. A configuração "Linhas de solicitação grande" é marcada, e a coluna "Prioridade" mostra a primeira imagem com a prioridade "Alta" e outra com a prioridade inicial "Média" abaixo. O mesmo aparece na dica.](https://web.dev/static/articles/fetch-priority/image/initial-final-priority.png?authuser=6&hl=pt)
Quando você pode precisar da prioridade de busca?
Agora que você conhece a lógica de priorização do navegador, ajuste a ordem de download da sua página para otimizar o desempenho e as Core Web Vitals. Veja alguns exemplos do que você pode mudar para influenciar a prioridade dos downloads de recursos:
- Coloque as 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 com antecedência, principalmente os que não são descobertos facilmente pelo navegador. - Use
async
oudefer
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 mais importantes acima da dobra.
Essas técnicas ajudam a controlar o cálculo prioritário 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 bem antes, melhorando a Maior exibição de conteúdo (LCP).
Às vezes, esses identificadores podem não ser suficientes para priorizar os recursos da maneira ideal para seu aplicativo. Veja alguns cenários em que a prioridade de busca pode ser útil:
- Você tem várias imagens acima da dobra, mas nem todas devem ter a mesma prioridade. Por exemplo, em um carrossel de imagens, apenas a primeira imagem visível precisa de uma prioridade maior, e as outras, normalmente, fora da tela, inicialmente podem ser definidas como tendo prioridade mais baixa.
- 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 a prioridade deles. Isso geralmente adiciona um atraso significativo ao carregamento de imagens críticas, como imagens principais. Fornecer a prioridade de busca na marcação permite que a imagem comece com uma prioridadeHigh
e comece a carregar muito mais cedo. Em uma tentativa de automatizar isso, as primeiras cinco imagens maiores são definidas com a prioridadeMedium
pelo Chrome, o que ajuda, mas umfetchpriority="high"
explícito é ainda melhor.
O pré-carregamento ainda é necessário para a descoberta antecipada de imagens de LCP incluídas como planos de fundo em CSS. Para aumentar a prioridade das imagens de plano de fundo, incluafetchpriority='high'
no pré-carregamento. - Declarar scripts como
async
oudefer
instrui o navegador a carregá-los de forma assíncrona. No entanto, como mostrado na tabela de prioridade, esses scripts também recebem uma prioridade "Baixa". Talvez você queira aumentar a prioridade deles 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 maneira assíncrona, o navegador atribuirá a prioridadeHigh
. Talvez você queira que algumas de suas buscas sejam executadas com menor prioridade, especialmente se você 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 prioridadeLow
e as chamadas de API interativas como prioridadeHigh
. - O navegador atribui às fontes e ao CSS uma prioridade
High
, 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. Observe que o CSS inicial bloqueia a renderização, portanto, ele geralmente é uma prioridadeHigh
.
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
. Pode ter os seguintes valores:
high
: o recurso tem uma prioridade mais alta, e você quer que o navegador o priorize mais do que o normal, desde que a própria heurística do navegador não impeça isso.low
: o recurso tem uma prioridade mais baixa, e você quer que o navegador diminua a prioridade dele, 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, bem como 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 da fetchpriority
É possível aplicar o atributo fetchpriority
a diferentes recursos, conforme mostrado na tabela a seguir, para aumentar ou reduzir a prioridade calculada. O 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 | ||||
---|---|---|---|---|---|
Prioridade de Blink |
VeryHigh | Alta | Média | Baixo | VeryLow |
DevTools Prioridade |
Mais alta | Alta | Média | Baixo | Menor |
Recurso principal | ◉ | ||||
CSS (adiantado**) | ⬆◉ | ⬇ | |||
CSS (atrasado**) | ⬆ | ◉ | ⬇ | ||
CSS (incompatibilidade de mídia***) | ⬆*** | ◉⬇ | |||
Script (anterior** ou não ao leitor de pré-carregamento) | ⬆◉ | ⬇ | |||
Script (atrasado**) | ⬆ | ◉ | ⬇ | ||
Script (assíncrono/adiar) | ⬆ | ◉⬇ | |||
Fonte | ◉ | ||||
Fonte (rel=preload) | ⬆◉ | ⬇ | |||
Importar | ◉ | ||||
Imagem (na janela de visualização - após o layout) | ⬆◉ | ⬇ | |||
Imagem (cinco primeiras imagens > 10.000px2) | ⬆ | ◉ | ⬇ | ||
Imagem | ⬆ | ◉⬇ | |||
Mídia (vídeo/áudio) | ◉ | ||||
XHR (sincronização) - descontinuado | ◉ | ||||
XHR/busca* (assíncrono) | ⬆◉ | ⬇ | |||
Pré-busca | ◉ | ||||
XSL | ◉ |
O fetchpriority
define a prioridade relativa, o que significa que ele 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 em prioridades High
ou Low
, mas nem sempre. Por exemplo, CSS crítico com fetchpriority="high"
mantém a prioridade "Muito alta"/"Mais alta", e o uso de fetchpriority="low"
nesses elementos mantém a prioridade "Alta". 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 qual prioridade buscar um recurso.
Aumente a prioridade da imagem LCP
Você pode 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,6 s para 1,9 s.
Diminuir 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.
<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 levá-las a high
e também carregar mesmo se um atributo load=lazy
for 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 usada no carrossel de imagens do app Oodle. À esquerda, o navegador define prioridades padrão para imagens de carrossel, mas faz o download e pinta essas imagens cerca de dois segundos mais devagar que o exemplo à direita, que define uma prioridade mais alta apenas na primeira imagem do carrossel.](https://web.dev/static/articles/fetch-priority/image/a-side-side-comparison-54fe14438a5c2.png?authuser=6&hl=pt)
Diminuir a prioridade de recursos pré-carregados
Para impedir que recursos pré-carregados concorram 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'">
Redefinir a prioridade de scripts
Os scripts que sua página precisa ser interativa devem ser carregados rapidamente, mas não podem 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 depender de estados específicos do DOM. No entanto, se elas forem executadas mais tarde na página, você poderá carregá-las com menor prioridade:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Isso ainda vai bloquear o analisador quando 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é mesmo async
na parte inferior da página.
Diminuir a prioridade para buscas de dados não críticos
O navegador executa fetch
com prioridade alta. Se você tiver várias buscas que podem ser disparadas simultaneamente, use a prioridade padrão alta para as buscas de dados mais importantes e diminua 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ê precisa considerar ao usar a prioridade:
- O atributo
fetchpriority
é uma dica, não uma diretiva. O navegador tenta respeitar a preferência do desenvolvedor, mas também pode aplicar suas preferências de prioridade de recursos para resolver conflitos. Não confunda a prioridade de busca com 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 o busca com a prioridade padrão. Por outro lado, a prioridade de busca não ajuda na detecção do problema, mas permite aumentar ou diminuir a prioridade da busca.
- Muitas vezes, é mais fácil observar e medir os efeitos de um pré-carregamento do que os de uma mudança 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 na
<head>
para uma imagem LCP, é possível que uma prioridade de buscahigh
não melhore a LCP significativamente. No entanto, se o pré-carregamento ocorrer após o carregamento de outros recursos, uma prioridade de buscahigh
poderá melhorar ainda mais a LCP. Se uma imagem importante for uma imagem de plano de fundo CSS, pré-carregue-a comfetchpriority = "high"
.As melhorias no tempo de carregamento resultantes da priorização são mais relevantes em ambientes onde mais recursos competem pela largura de banda da rede disponível. Isso é comum em conexões HTTP/1.x em que não é possível fazer downloads paralelos ou em conexões HTTP/2 ou HTTP/3 com 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 maneira uniforme e da mesma forma para HTTP/3. Mesmo que o navegador comunique a prioridade da prioridade de busca, a CDN pode não atribuir uma nova prioridade aos recursos na ordem especificada. Isso dificulta o teste da prioridade de busca. As prioridades são aplicadas internamente no navegador e com protocolos que oferecem suporte à priorização (HTTP/2 e HTTP/3). Ainda vale a pena usar Buscar prioridade apenas para a priorização interna do navegador, independentemente do suporte a CDN ou de origem, porque as prioridades geralmente mudam quando o navegador solicita recursos. Por exemplo, recursos de baixa prioridade, como imagens, geralmente são impedidos de serem 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. Mais adiante no ciclo de desenvolvimento, é possível atribuir as prioridades a diferentes recursos na página e, se elas não corresponderem às suas expectativas, introduzir prioridade de busca para otimização adicional.
Os desenvolvedores precisam usar o pré-carregamento com a finalidade pretendida: para pré-carregar recursos não detectados pelo analisador (fontes, importações, imagens LCP em segundo plano). O posicionamento da dica preload
vai ser afetado quando o recurso for pré-carregado.
A prioridade da busca diz respeito a como o recurso deve ser buscado quando é buscado.
Dicas para usar pré-carregamentos
Lembre-se do seguinte ao usar pré-carregamentos:
- A inclusão de um pré-carregamento em cabeçalhos HTTP o coloca antes de todo o restante na ordem de carregamento.
- Geralmente, os pré-carregamentos são carregados na ordem em que o analisador os chega para qualquer item com prioridade
Medium
ou superior. Tenha cuidado ao incluir pré-carregamentos no início do seu 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 (dinâmico
import()
oumodulepreload
) precisam ser executados depois da tag do script que precisa da importação. Portanto, verifique se o script é carregado ou analisado primeiro para que ele possa ser avaliado enquanto as dependências são carregadas. - Os pré-carregamentos de imagens têm prioridade
Low
ouMedium
por padrão. Ordene-as em relação a scripts assíncronos e outras tags de prioridade baixa ou mais baixa.
Histórico
A prioridade de busca foi testada pela primeira vez no Chrome como um teste de origem em 2018 e novamente em 2021 com o atributo importance
. Na época, ele era chamado de 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 da 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, eles têm outros botões disponíveis para alcançar a sequência de carregamento que preferirem.