Otimizar a prioridade de pré-carregamento

Recursos da Web: Prioridade de busca <link rel="preload">

O pré-carregamento de recursos com <link rel="preload"> sinaliza ao navegador que um recurso será necessário em breve. No entanto, os pré-carregamentos herdam a prioridade padrão do tipo de recurso, que é baixa, principalmente para imagens. O uso de fetchpriority permite refinar essa prioridade relativa, garantindo que as pré-carregamentos de imagens sejam pré-carregados com uma prioridade alta, permitindo que eles comecem mais cedo e usem mais recursos de largura de banda.

Como fazer a implementação

  1. Identifique candidatos ao pré-carregamento: encontre recursos que não são descobertos logo no início pelo navegador (por exemplo, imagens de pôster de vídeo ou imagens de plano de fundo em CSS), mas que são essenciais para a aparência da página.
  2. Priorize pré-carregamentos de imagens essenciais: para a imagem LCP ou outras imagens essenciais que não são priorizadas por padrão, use <link rel="preload" fetchpriority="high"> para garantir que elas sejam priorizadas em relação a outros pré-carregamentos. As fontes já têm alta prioridade por padrão.
  3. Remova a prioridade de pré-carregamentos não críticos: para recursos que não são críticos para a renderização inicial (por exemplo, um vídeo de plano de fundo ou fontes secundárias), use <link rel="preload" fetchpriority="low">.
  4. Coordene com os tipos de recursos: observe que diferentes tipos de as têm prioridades padrão diferentes. Use fetchpriority para substituir esses padrões quando necessário.

Exemplo de código

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Práticas recomendadas

  • OBRIGATÓRIO: use fetchpriority="high" em no máximo 1 ou 2 pré-carregamentos de imagens críticas para evitar a contenção de rede e a diluição do aumento de prioridade.
  • OBRIGATÓRIO: use fetchpriority="high" em imagens de Largest Contentful Paint (LCP).
  • RECOMENDAÇÃO: limite o número total de pré-carregamentos em uma página a no máximo duas imagens e duas ou três fontes essenciais para evitar a contenção de largura de banda.
  • USE fetchpriority="low" para pré-carregamentos que você quer que o navegador inicie com antecedência, mas não às custas de recursos essenciais (especialmente fontes não essenciais).
  • É RECOMENDÁVEL especificar o atributo as corretamente para garantir que o pré-carregamento seja usado.
  • RECOMENDAMOS tornar os recursos essenciais (como imagens LCP) detectáveis de forma estática em HTML usando tags <img>, em vez de depender de pré-carregamentos para imagens de plano de fundo.
  • É RECOMENDÁVEL garantir que os pré-carregamentos de fontes sempre tenham o atributo crossorigin (mesmo que sejam da mesma origem).
  • NÃO use o atributo importance descontinuado. Ele foi substituído por fetchpriority.

Estratégia de fallback

O atributo fetchpriority em <link rel="preload"> é um aprimoramento progressivo. Os navegadores que não oferecem suporte a ele ainda vão pré-carregar o recurso usando a prioridade padrão para esse tipo de recurso. Para garantir a compatibilidade, sempre forneça os atributos as e type corretos.