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.
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
asyncoudefersã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.
type = "font" na página de detalhes de notícias da BBC
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.
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
preloadpara fazer o download dos recursos necessários com antecedência, principalmente os que não são descobertos facilmente pelo navegador. - Use
asyncoudeferpara 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 prioridadeHighe comece a carregar muito mais cedo. Em uma tentativa de automatizar isso, as primeiras cinco imagens maiores são definidas com a prioridadeMediumpelo 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
asyncoudeferinstrui 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 prioridadeLowe 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.
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 buscahighnão melhore a LCP significativamente. No entanto, se o pré-carregamento ocorrer após o carregamento de outros recursos, uma prioridade de buscahighpoderá 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
Mediumou 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
LowouMediumpor 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.