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.
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?
O que a API Fetch Priority permite que você faça?
<link>.
<img> e <script>.
Quando usar a dica prefetch?
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.