Otimizar a prioridade do script

Os navegadores atribuem prioridades padrão aos scripts com base em onde eles aparecem no documento e se têm atributos como async ou defer. O uso de fetchpriority dá aos desenvolvedores controle explícito para garantir que os scripts essenciais sejam carregados primeiro, enquanto os não essenciais ficam de fora.

Como fazer a implementação

1. Identifique scripts críticos: determine quais scripts são essenciais para a funcionalidade principal da página ou para a interação inicial do usuário.
2. Priorize scripts assíncronos críticos: para scripts críticos carregados com async ou defer, adicione o atributo fetchpriority="high" para garantir que eles sejam priorizados durante a fase de descoberta.
3. Remova a prioridade de scripts não essenciais: para scripts que não são necessários imediatamente (por exemplo, análises, anúncios ou widgets abaixo da dobra), adicione fetchpriority="low" e verifique se eles têm um atributo async, defer ou module para evitar o bloqueio.
4. Sequenciar scripts que bloqueiam o analisador: use fetchpriority="low" em scripts que bloqueiam o analisador no final do corpo para evitar que eles disputem largura de banda com recursos mais críticos.

Exemplo de código

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

Práticas recomendadas

• OBRIGATÓRIO: use fetchpriority="high" em no máximo um ou dois scripts críticos para evitar a contenção de rede e a diluição do aumento de prioridade.
• USE fetchpriority="high" especificamente para scripts async que são conhecidos por serem essenciais para a Interaction to Next Paint (INP).
• RECOMENDADO: use fetchpriority="low" para reduzir a prioridade de scripts que não são necessários para a experiência inicial do usuário.
• NÃO use fetchpriority em todas as tags script. Ele só deve ser usado para mudar a heurística padrão do navegador quando ela não for ideal.
• NÃO use o atributo importance descontinuado. Ele foi substituído por fetchpriority.

Estratégia de fallback

O atributo fetchpriority é um aprimoramento progressivo. Os navegadores que não oferecem suporte a ele vão ignorar o atributo e usar a lógica de programação interna sem erros. Nenhuma detecção de recursos explícita ou lógica de substituição é necessária para o uso básico.