O navegador mostra o conteúdo da página primeiro e depois. Com a API Fetch Priority, é possível sinalizar a prioridade de busca inicial de recursos importantes para o navegador para otimizar o carregamento de recursos.
Assista ao vídeo para saber como:
- Encontre a métrica de carregamento, Maior exibição de conteúdo (LCP, na sigla em inglês), no painel Desempenho.
- Confira as prioridades iniciais e finais no painel Rede e o rastreamento Rede do trace Desempenho.
- Use substituições locais para testar atributos
fetchpriority
em elementos<img>
,<link>
e<script>
. - Saiba a diferença entre os atributos
loading
efetchpriority
. - Saiba quando diminuir a prioridade dos recursos.
As imagens da LCP podem se beneficiar claramente do fetchpriority="high"
. Outra dica é se o navegador automaticamente aumenta a prioridade de uma imagem, então faz sentido defini-la inicialmente.
Confira mais informações em: