Dicas do DevTools: como depurar a prioridade de busca

Sofia Emelianova

O navegador mostra o conteúdo de algumas páginas da Web primeiro e de outras depois. Com a API Fetch Priority, é possível sinalizar a prioridade de busca inicial de recursos importantes para o navegador e otimizar o carregamento deles.

Assista ao vídeo para saber como:

• Encontre a métrica de carregamento, Largest Contentful Paint (LCP), no painel Performance.
• Confira as prioridades iniciais e finais no painel Rede e na faixa Rede do rastro Performance.
• Use substituições locais para testar os atributos fetchpriority nos elementos <img>, <link> e <script>.
• Saiba a diferença entre os atributos loading e fetchpriority.
• Saiba quando diminuir a prioridade dos recursos.

As imagens de LCP podem se beneficiar claramente de fetchpriority="high". Outra dica é se o navegador aumenta automaticamente a prioridade de uma imagem. Nesse caso, faz sentido defini-la inicialmente.

Confira mais informações em:

• Como otimizar o carregamento de recursos com a API Fetch Priority
• Conferir solicitações de rede
• Conferir marcações de tempo
• Usar linhas de solicitação grandes