No último módulo sobre como otimizar o carregamento de recursos, você aprendeu como vários recursos de páginas, como CSS e JavaScript, podem afetar a velocidade de carregamento e como otimizá-los e a entrega deles para acelerar a renderização. Esse é o momento perfeito para passar a um aspecto mais avançado do carregamento de recursos, 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 dicas
de recursos, como preconnect e dns-prefetch, foi o primeiro a ser apresentado.
No entanto, com o tempo, preload e a API Fetch Preview foram disponibilizadas para
fornecer outros recursos.
As dicas de recursos instruem o navegador a executar determinadas ações antecipadamente que podem melhorar o desempenho de carregamento. As dicas de recursos podem realizar ações como executar pesquisas DNS iniciais, conectar-se a servidores com antecedência e até buscar recursos antes que o navegador os detecte normalmente.
As dicas de recursos podem ser especificadas em HTML, geralmente no início do elemento
<head>, ou definidas como um cabeçalho HTTP. Para o escopo deste módulo,
preconnect, dns-prefetch e preload são abordados, bem como os
comportamentos de busca especulativa que o prefetch oferece.
preconnect
A dica preconnect é usada para estabelecer uma conexão com outra origem de
onde você está buscando recursos essenciais. Por exemplo, você pode hospedar imagens ou recursos em uma CDN ou em outra origem cruzada:
<link rel="preconnect" href="https://example.com">
Ao usar preconnect, você prevê que o navegador planeja se conectar a um
servidor de origem cruzada específico em um futuro muito próximo e que o navegador
vai abrir essa conexão o mais rápido possível, de preferência antes de esperar que o
analisador de HTML ou o scanner de pré-carregamento façam isso.
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 diminuir ao estabelecer conexões mais cedo, em vez de no momento da descoberta do recurso de origem cruzada.
Um caso de uso comum do preconnect é o Google Fonts. O Google Fonts recomenda
que você preconnect ao domínio https://fonts.googleapis.com que exibe
as 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
buscado usando o Compartilhamento de recursos entre origens (CORS). Ao usar a dica
preconnect, se o recurso que está sendo transferido por download da origem usar
CORS, como arquivos de fonte, será necessário adicionar o atributo crossorigin à
dica preconnect.
dns-prefetch
Embora a abertura precoce de conexões com servidores de origem cruzada possa melhorar significativamente o tempo de carregamento da página inicial, talvez não seja razoável ou possível estabelecer conexões com muitos servidores de origem cruzada de uma só vez. Uma dica de recurso muito mais barata é a dica dns-prefetch, caso você esteja preocupado
com o uso excessivo de preconnect.
Como o próprio nome, dns-prefetch não estabelece uma conexão com um servidor
de origem cruzada, apenas faz a busca DNS com antecedência. Uma busca DNS ocorre quando um nome de domínio é resolvido no endereço IP subjacente.
Embora as camadas de cache do DNS nos níveis do dispositivo e da rede ajudem a tornar esse
processo geralmente rápido, ele 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 custo relativamente pequeno,
podem ser uma ferramenta mais adequada em alguns casos do que um preconnect. Em
particular, ela pode ser uma dica de recurso desejável para usar em casos de links que
navegam para outros sites que você acha que o usuário provavelmente vai seguir.
O dnstradamus é uma dessas ferramentas que faz isso automaticamente usando JavaScript
e usa a API Intersection Observer para injetar dicas dns-prefetch no
HTML da página atual quando links para outros sites são rolados para a janela de
visualização do usuário.
preload
A diretiva preload é usada para iniciar uma solicitação antecipada de um recurso
necessário 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 declarações @import
ou recursos CSS background-image que provavelmente são maiores
candidatos à exibição de conteúdo (LCP, na sigla em inglês). Nesses casos, esses arquivos não são
descobertos pelo verificador de pré-carregamento, já que o recurso é referenciado em recursos
externos.
Da mesma forma que preconnect, a diretiva preload exige o atributo crossorigin
se você estiver pré-carregando um recurso do CORS, como fontes. Se você não adicionar
o atributo crossorigin ou adicioná-lo para solicitações que não sejam CORS, o recurso
vai ser transferido por download pelo navegador duas vezes, desperdiçando largura de banda que poderia ter sido
mais gasta 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 CORS, mesmo que /font.woff2 esteja no mesmo domínio.
prefetch
A diretiva prefetch é usada para iniciar uma solicitação de baixa prioridade de um
recurso que provavelmente será usado em navegações futuras:
<link rel="prefetch" href="/next-page.css" as="style">
Essa diretiva segue em grande parte o mesmo formato que a diretiva preload. Apenas
o atributo rel do elemento <link> usa o valor "prefetch".
No entanto, diferentemente da diretiva preload, prefetch é em grande parte especulativo,
porque você está iniciando uma busca de um recurso para uma navegação futura que pode
ou não acontecer.
Há momentos em que o prefetch pode ser útil. Por exemplo, se você
identificar um fluxo de usuários no site que a maioria dos usuários segue até a conclusão,
usar um prefetch para um recurso crítico de renderização para essas páginas futuras pode ajudar a
reduzir os tempos de carregamento das páginas.
API Fetch Preview
É possível usar o Fetch Priority API com o atributo fetchpriority para
aumentar a prioridade de um recurso. Você pode usar o atributo com elementos <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 a
imagem estiver dentro da janela de visualização inicial, a prioridade será aumentada para
Alta. No snippet HTML anterior, fetchpriority instrui imediatamente o navegador a fazer o download da imagem LCP maior com prioridade Alta, enquanto as imagens de miniatura menos importantes são transferidas com uma prioridade mais baixa.
Os navegadores mais recentes carregam recursos em duas fases. A primeira fase é reservada para
recursos críticos e termina quando todos os scripts de bloqueio são transferidos por download e
executados. Durante essa fase, o download de recursos de prioridade Baixa pode atrasar. Ao usar fetchpriority="high", você pode aumentar a prioridade de um
recurso, permitindo que o navegador faça o download dele 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 fazer?
<link>,
<img> e <script>.
Quando usar a dica prefetch?
A seguir: desempenho das imagens
Você provavelmente está começando a se sentir bastante confiante em relação ao seu conhecimento
sobre considerações gerais de desempenho quando se trata de HTML da página, do elemento
<head> e de dicas de recursos. No entanto, há outras otimizações específicas
para diferentes tipos de recursos que as páginas geralmente carregam. O próximo módulo aborda o desempenho de imagens, o que pode ajudar você a fazer com que as imagens do seu site sejam carregadas o mais rápido possível, independentemente do dispositivo do usuário.