Ajudar o navegador com dicas de recursos

No último módulo sobre como otimizar o carregamento de recursos, você aprendeu como várias os recursos da página, como CSS e JavaScript, podem afetar a velocidade de carregamento é possível otimizá-los e a exibição deles para acelerar a renderização da página. Este é o momento perfeito para falar sobre um aspecto mais avançado da gestão de recursos carregando, e isso envolve ajudar o navegador a carregá-los mais rapidamente usando dicas de recursos.

As dicas de recursos podem ajudar os desenvolvedores a otimizar ainda mais o tempo de carregamento da página informando ao navegador como carregar e priorizar recursos. Um conjunto inicial de recursos dicas como preconnect e dns-prefetch foram as primeiras a serem apresentadas. Com o tempo, no entanto, preload e a API Fetch Priority API seguiram para mais recursos.

As dicas de recursos instruem o navegador a executar determinadas ações com antecedência que podem melhorar o desempenho de carregamento. As dicas de recursos podem realizar ações como como realizar pesquisas DNS iniciais, conectar-se a servidores com antecedência e até buscar recursos antes que o navegador os descubra normalmente.

Dicas de recursos podem ser especificadas em HTML, na maioria das vezes no início da <head> ou definido como um cabeçalho HTTP. No escopo deste módulo, preconnect, dns-prefetch e preload são abordados, bem como os comportamentos de busca especulativa que o prefetch fornece.

preconnect

A dica preconnect é usada para estabelecer uma conexão com outra origem do em que você busca recursos críticos. Por exemplo, talvez você esteja hospedando seu imagens ou recursos em uma CDN ou outra origem cruzada:

<link rel="preconnect" href="https://example.com">

Ao usar preconnect, você prevê que o navegador planeja se conectar a uma um servidor específico de origem cruzada muito próximo deve abrir essa conexão o mais rápido possível, de preferência antes de esperar como o analisador HTML ou o scanner de pré-carregamento.

Se você tiver uma grande quantidade de recursos de origem cruzada em uma página, use preconnect. nos recursos mais importantes para a página atual.

Uma captura de tela dos tempos de conexão de um recurso no painel de rede do Chrome DevTools. A configuração da conexão inclui tempo de espera, negociação de proxy, busca DNS, configuração da conexão e negociação de TLS.
Uma visualização dos tempos de conexão conforme visto no painel de rede do Chrome do DevTools. Os horários na caixa vermelha são aqueles envolvidos na configuração de uma conexão com um servidor de origem cruzada, que preconnect pode reduzir estabelecendo conexões mais cedo, em vez de no momento de e descoberta do recurso de origem cruzada.

Um caso de uso comum para preconnect é o Google Fonts. Recomendações do Google Fonts que você preconnect para o domínio https://fonts.googleapis.com que veicula declarações @font-face e ao domínio https://fonts.gstatic.com que exibe os arquivos de fonte.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

O atributo crossorigin é usado para indicar se um recurso precisa ser buscados com o Compartilhamento de recursos entre origens (CORS, na sigla em inglês). Ao usar o botão Dica preconnect, se o recurso que está sendo transferido por download a partir da origem usar CORS, como arquivos de fonte, é preciso adicionar o atributo crossorigin ao Dica preconnect.

dns-prefetch

Embora abrir conexões com servidores de origem cruzada precocemente pode melhorar o tempo de carregamento inicial da página, talvez não seja razoável ou possível estabelecem conexões com diversos servidores de diferentes origens de uma só vez. Se você estiver preocupado que você esteja usando preconnect em excesso, uma dica de recurso muito mais barata é a Dica dns-prefetch.

Segundo o nome, dns-prefetch não estabelece uma conexão com uma origem em vez de executar a busca DNS com antecedência. Uma configuração DNS lookup ocorre quando um nome de domínio é resolvido para o endereço IP subjacente. Embora as camadas de caches DNS no dispositivo e na rede ajudem a tornar isso uma processo geralmente rápido, ainda leva algum tempo.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

As buscas DNS são bastante baratas e, devido ao seu custo relativamente baixo, em alguns casos, elas podem ser uma ferramenta mais adequada do que um preconnect. Em especialmente, ele pode ser uma dica de recurso desejável para usar em casos de links que navegar para outros sites que você acha que o usuário provavelmente seguirá. O dnstradamus é uma ferramenta que faz isso automaticamente usando JavaScript. e usa a API Intersection Observer para injetar dicas dns-prefetch no ao HTML da página atual quando os links para outros sites são rolados até a interface do usuário janela de visualização.

preload

A diretiva preload é usada para iniciar uma solicitação antecipada de um recurso. necessária para renderizar a página:

<link rel="preload" href="/lcp-image.jpg" as="image">

As diretivas preload precisam ser limitadas a recursos críticos descobertos tardiamente. Os casos de uso mais comuns são arquivos de fonte, arquivos CSS buscados por meio de @import declarações ou recursos background-image de CSS que provavelmente são Maiores Candidatos ao Contentful Paint (LCP). Nesses casos, esses arquivos não são descobertos pelo verificador de pré-carregamento porque o recurso é referenciado no do Google Cloud.

Da mesma forma que preconnect, a diretiva preload requer a crossorigin se estiver pré-carregando um recurso CORS, como fontes. Se você não adicionar o atributo crossorigin (ou adicioná-lo para solicitações não CORS), então o recurso é baixado pelo navegador duas vezes, desperdiçando largura de banda que poderia melhor gasto em outros recursos.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

No snippet HTML anterior, o navegador é instruído a pré-carregar /font.woff2 usando uma solicitação de CORS, mesmo que /font.woff2 esteja no mesmo domínio.

prefetch

A diretiva prefetch é usada para iniciar uma solicitação de baixa prioridade para um recurso que provavelmente será usado em futuras navegações:

<link rel="prefetch" href="/next-page.css" as="style">

Essa diretiva segue em grande parte o mesmo formato da diretiva preload, mas o atributo rel do elemento <link> usa um valor "prefetch". No entanto, ao contrário da diretiva preload, prefetch é amplamente especulativa em que está iniciando a busca de um recurso para uma navegação futura que possa pode ocorrer ou não.

prefetch pode ser útil em algumas situações, por exemplo, identificou um fluxo de usuário no seu site que a maioria dos usuários segue até a conclusão; um prefetch para um recurso de renderização crítico para essas páginas futuras pode ajudar a reduzir o tempo de carregamento deles.

API Fetch Preferred

Você pode usar o Fetch Priority API pelo atributo fetchpriority dele para aumentar a prioridade de um recurso. É possível usar o atributo com <link>, <img> e <script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

Por padrão, as imagens são buscadas com uma prioridade mais baixa. Após o layout, se o estiver dentro da janela de visualização inicial, a prioridade é aumentada para Prioridade alta. No snippet HTML anterior, fetchpriority imediatamente diz ao navegador para fazer o download da imagem LCP maior com uma prioridade Alta, enquanto as menos importantes são baixadas com uma prioridade mais baixa.

Os navegadores modernos carregam recursos em duas fases. A primeira fase é reservada recursos críticos e termina quando todos os scripts de bloqueio forem baixados e executada. Durante essa fase, recursos de Baixa prioridade podem sofrer atraso o download. Ao usar fetchpriority="high", você pode aumentar a prioridade de um recurso, permitindo que o navegador faça o download durante a primeira fase.

Demonstrações de dicas de recursos

Teste seus conhecimentos

O que a dica de recurso preconnect faz?

Executa somente uma busca DNS para o servidor de origem cruzada.
Abre uma conexão com um servidor de origem cruzada, incluindo a busca DNS, e a negociação de conexão e TLS antes de o navegador os encontrariam de outra forma.

O que a API Fetch Priority permite que você faça?

Especifique a prioridade relativa para <link>. <img> e <script>.
Especifique a prioridade em que o HTML da página atual é baixado.

Quando usar a dica prefetch?

Quando você tiver alta confiança de que os recursos ou as páginas que você pretende fazer a pré-busca se forem necessários para o usuário.
Se o usuário não declarou uma preferência explícita pela redução dos dados uso.
Para todo e qualquer recurso ou página de que o usuário possa precisar, tendo ou não se realmente precisar deles no futuro.

A seguir: desempenho das imagens

A esta altura, você provavelmente está começando a se sentir muito confiante sobre seu conhecimento de considerações gerais de desempenho em relação ao HTML da página, o <head> e dicas de recursos. No entanto, há outras otimizações que são específicos aos diferentes tipos de recurso que as páginas costumam carregar. A seguir, o desempenho da imagem será abordado no próximo módulo, que pode ajudar você que as imagens do seu site carreguem o mais rápido possível, independentemente da dispositivo do usuário.