Há muitos modos de aumentar o desempenho da web. Um deles é o pré-carregamento de conteúdo que será necessário mais tarde. Pré-busca de CSS, pré-renderização da página completa ou resolução de nome de domínio. Fazemos tudo com antecedência e depois exibimos o resultado instantaneamente! Soa incrível.

Ainda mais incrível é que isso é muito simples de implementar. Cinco tags dão ao navegador a instrução para as ações prévias:

Resumo do que elas fazem e quando utilizá-las.

Ir para: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> diz ao navegador para carregar e armazenar em cache o recurso (como um script ou uma folha de estilos) o quanto antes. Isso é útil quando o recurso será necessário em alguns segundos após o carregamento da página — e você deseja acelerar o processo.

O navegador não faz nada com o recurso após o carregamento. Scripts não são executados, folhas de estilos não são aplicadas. O recurso é simplesmente armazenado em cache e prontamente fornecido quando solicitado.

Sintaxe

<link rel="preload" href="/style.css" as="style" />

href indica o recurso que você deseja baixar.

as pode ser qualquer coisa que possa ser baixada pelo navegador:

style para folhas de estilos,
script para scripts,
font para fontes,
fetch para recursos carregados por meio do fetch() ou XMLHttpRequest,
lista completa veja no MDN.

É importante especificar o atributo as — isso ajuda o navegador a priorizar corretamente e planejar o carregamento.

Quando usar

Use o pré-carregamento quando o recurso for necessário em breve. Por exemplo:

Fontes personalizadas de um arquivo externo:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Por padrão comic-sans.woff2 começará a ser carregado apenas após o carregamento e análise index.css. Para não esperar tanto, você pode carregar a fonte antecipadamente usando <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Se você dividir seus estilos segundo a abordagem Critical CSS em duas partes, crítica (para renderização imediata) e não crítica:
```
/* Estilos críticos inlined */
```
Com essa abordagem, os estilos não críticos começarão a ser carregados apenas quando o JavaScript for acionado, o que pode acontecer alguns segundos após a renderização. Em vez de esperar pelo JS, use <link rel= "preload">, para começar o carregamento mais cedo:
```
/* Estilos críticos inlinados */
```

Não abuse do pré-carregamento. Se carregar tudo de uma vez, o site não será acelerado magicamente; pelo contrário, isso pode atrapalhar o navegador a planejar seu trabalho de forma eficiente.

Não confunda com o pré-busca. Não use <link rel= "preload">, se você não precisar do recurso imediatamente após o carregamento da página. Se for necessário mais tarde, por exemplo, na próxima página, use <link rel= "prefetch">.

Detalhes

Essa é uma tag obrigatória para execução pelo navegador (se ele o suportar), ao contrário de todas as outras tags relacionadas ao pré-carregamento. O navegador deve carregar o recurso especificado em <link rel="preload">. Caso contrário, ele pode ignorar o pré-carregamento, por exemplo, se estiver em uma conexão lenta.

Prioridades. Os navegadores geralmente atribuem diferentes prioridades a diferentes recursos (estilos, scripts, fontes etc.) para carregar primeiro os recursos mais importantes. Neste caso, o navegador determina a prioridade pelo atributo as. Para o navegador Chrome, você pode consultar a tabela completa de prioridades.

prefetch

<link rel= "prefetch"> pede ao navegador para carregar e armazenar em cache o recurso (por exemplo, um script ou uma folha de estilos) em segundo plano. O download ocorre com baixa prioridade, portanto, não atrapalha recursos mais importantes. Isso é útil se o recurso for necessário na próxima página e você quiser armazená-lo em cache antecipadamente.

Aqui, o navegador também não faz nada com o recurso após o download. Os scripts não são executados, as folhas de estilos não são aplicadas. O recurso é simplesmente armazenado em cache e imediatamente disponibilizado sob demanda.

Sintaxe

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

href indica o recurso que você deseja baixar.

as pode ser qualquer coisa que possa ser baixada pelo navegador:

style para folhas de estilos,
script para scripts,
font para fontes,
fetch para recursos carregados por meio do fetch() ou XMLHttpRequest,
lista completa veja no MDN.

É importante especificar o atributo as — isso ajuda o navegador a definir prioridades corretas e planejar o carregamento.

Quando usar

Para carregar recursos de outras páginas, se você precisar de um recurso de outra página e quiser pré-carregá-lo para acelerar a renderização dessa página depois. Por exemplo:

Você tem uma loja online, e 40% dos usuários saem da página inicial para a página do produto. Use <link rel= "prefetch">, carregando arquivos CSS e JS para renderizar páginas de produto.
Você tem um aplicativo de página única, e diferentes páginas carregam pacotes diferentes. Quando o usuário visita uma página, é possível pré-carregar os pacotes para todas as páginas às quais ela faz referência.

Provavelmente, esta tag pode ser usada com segurança em qualquer quantidade. Os navegadores geralmente planejarem o prefetch com a menor prioridade, então isso não atrapalha ninguém. Apenas tenha em mente que isso consome a largura de banda do usuário, que pode custar dinheiro.

Não para requisições urgentes. Não use <link rel= "prefetch">, quando o recurso será necessário em alguns segundos. Nesse caso, aplique <link rel= "preload">.

Detalhes

Tag opcional. O navegador não é obrigado a seguir esta instrução, ele pode ignorá-la, por exemplo, em uma conexão lenta.

Prioridade no Chrome. No Chrome <link rel= "prefetch"> normalmente é executado com a mínima prioridade (veja a tabela completa de prioridades), ou seja, após o carregamento de todo o resto.

preconnect

<link rel= "preconnect"> pede ao navegador para se conectar antecipadamente ao domínio, quando você deseja acelerar o estabelecimento da conexão no futuro.

O navegador deve estabelecer a conexão se ele estiver extraindo algum recurso de um novo domínio externo. Por exemplo, se estiver carregando fontes do Google Fonts, React de um CDN ou solicitando uma resposta JSON de um servidor API.

Estabelecer uma nova conexão normalmente leva algumas centenas de milissegundos. Isso é feito uma única vez, mas ainda assim leva tempo. Se você estabeleceu a conexão antecipadamente, economizará tempo e carregará os recursos desse domínio mais rapidamente.

Sintaxe

<link rel= "preconnect" href="https://api.my-app.com" />

href indica o nome de domínio para o qual deve ser determinado o endereço IP. Pode ser especificado com prefixo (https://domain.com) ou sem (//domain.com).

Quando usar

Use para domínios que serão necessários em breve para carregar um estilo, script ou imagem importante de lá, mas você ainda não sabe a URL do recurso. Por exemplo:

Seu aplicativo está hospedado em my-app.com e faz requisições AJAX para api.my-app.com: você não sabe antecipadamente quais solicitações específicas serão feitas, pois elas são feitas dinamicamente pelo JS. Aqui, o uso da tag para pré-conectar ao domínio é bastante apropriado.
Seu aplicativo está hospedado em my-app.com e usa fontes do Google Fonts. Elas são carregadas em duas etapas: primeiro, o arquivo CSS é carregado do domínio fonts.googleapis.com, então este arquivo solicita as fontes de fonts.gstatic.com.Você não pode saber quais arquivos de fontes específicos serão fonts.gstatic.com. você precisará até que o arquivo CSS seja carregado, portanto, antecipadamente, podemos apenas estabelecer uma conexão preliminar.

Use esta tag para acelerar um pouco algum script ou estilo de terceiros graças à conexão pré-estabelecida.

Não abuse. Estabelecer e manter uma conexão é uma operação cara tanto para o cliente quanto para o servidor. Use esta tag no máximo para 4-6 domínios.

Detalhes

Tag opcional. O navegador não é obrigado a seguir esta instrução e pode ignorá-la, por exemplo, se muitas conexões já foram estabelecidas ou em algum outro caso.

O que inclui o processo de conexão. Para se conectar a cada site, o navegador deve realizar as seguintes ações:

Resolução de DNS. Encontrar o endereço IP do servidor (216.58.215.78) para o nome de domínio especificado (google.com).
Handshake TCP. Troca de pacotes (cliente → servidor → cliente) para iniciar uma conexão TCP com o servidor.
Handshake TLS (apenas para sites HTTPS). Dois ciclos de troca de pacotes (cliente → servidor → cliente → servidor → cliente) para iniciar uma sessão TLS segura.

Nota: HTTP/3 melhorará e acelerará o mecanismo de handshake, mas ainda está longe.

dns-prefetch

<link rel= "dns-prefetch"> pede ao navegador para realizar a resolução de DNS para o domínio antecipadamente, se você vai se conectar a ele em breve e deseja acelerar a conexão inicial.

O navegador deve determinar o endereço IP do domínio, se for buscar recursos de um novo domínio de terceiros. Por exemplo, carregar fontes do Google Fonts, React de um CDN ou solicitar uma resposta JSON de um servidor API.

Para cada novo domínio, a resolução do registro DNS geralmente leva cerca de 20-120 ms. Isso afeta apenas o carregamento do primeiro recurso deste domínio, mas ainda representa uma latência. Se realizar a resolução de DNS antecipadamente, economizaremos tempo e carregaremos o recurso mais rápido.

Sintaxe

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indica o nome de domínio para o qual o endereço IP deve ser estabelecido. Pode ser indicado com um prefixo (https://domain.com) ou sem (//domain.com).

Quando usar

Use para domínios que serão necessários em breve para carregar recursos de lá, dos quais o navegador não tem conhecimento antecipado. Por exemplo:

Seu aplicativo está hospedado em my-app.com e faz requisições AJAX para api.my-app.com: você não sabe antecipadamente quais solicitações específicas serão feitas, pois elas são feitas dinamicamente pelo JS. Aqui, o uso da tag para pré-conectar ao domínio é bastante apropriado.
Seu aplicativo está hospedado em my-app.com, e usa fontes do Google Fonts. Elas são carregadas em duas etapas: primeiro, o arquivo CSS é carregado do domínio fonts.googleapis.com, então este arquivo solicita as fontes de fonts.gstatic.com.Você não pode saber quais arquivos de fontes específicos serão fonts.gstatic.com. você precisará até que o arquivo CSS seja carregado, portanto, antecipadamente, podemos apenas estabelecer uma conexão preliminar.

Use esta tag para acelerar um pouco algum script ou estilo de terceiros graças à conexão pré-estabelecida.

Observe as características semelhantes em <link rel= "dns-prefetch"/> e <link rel= "preconnect">. Usá-los juntos para um único domínio geralmente não faz sentido: <link rel= "preconnect"> já inclui <link rel= "dns-prefetch"/> e muito mais. Isso pode ser justificado em dois casos:

Você deseja oferecer suporte a navegadores antigos. <link rel= "dns-prefetch" /> suportado começando com IE10 e Safari 5. <link rel= "preconnect"> foi suportado por algum tempo no Chrome e Firefox, mas foi adicionado ao Safari somente na versão 11.1 e não é suportado no IE/Edge. Se precisar oferecer suporte a esses navegadores, use <link rel= "dns-prefetch" /> como uma alternativa para <link rel= "preconnect">.

Você deseja acelerar a conexão com mais de 4-6 domínios. A tag <link rel= "preconnect"> não é recomendada para uso com mais de 4-6 domínios, pois estabelecer e manter uma conexão é uma operação cara. <link rel= "dns-prefetch" /> consome menos recursos, portanto, se necessário, use-a.

Detalhes

Tag opcional. O navegador não é obrigado a seguir essa instrução, portanto, pode não resolver o DNS, por exemplo, se houver muitas dessas tags na página ou em algum outro caso.

O que é DNS. Cada servidor na internet tem um endereço IP exclusivo que se parece com 216.58.215.78. Na barra de endereços do navegador, geralmente se insere o nome do site (por exemplo, google.com), e os servidores DNS (Domain Name System) o vinculam ao endereço IP do servidor (216.58.215.78).

Para determinar o endereço IP, o navegador deve enviar uma solicitação ao servidor DNS. Isso leva de 20 a 120 ms ao conectar-se a um novo domínio externo.

O DNS é armazenado em cache, embora não de forma muito confiável. Alguns sistemas operacionais e navegadores armazenam em cache as consultas DNS: isso economiza tempo em solicitações repetidas, mas não se pode contar com o cache. No Linux, geralmente não funciona de forma alguma. O Chrome possui um cache DNS, mas ele dura apenas um minuto. O Windows armazena em cache as respostas DNS por cinco dias.

prerender

<link rel= "prerender"> solicita que o navegador carregue a URL e a exiba em uma aba invisível. Quando o usuário clica no link, a página deve ser exibida imediatamente. Isso é útil se você tiver certeza de que o usuário visitará uma página específica e quiser acelerar a sua exibição.

Apesar da eficácia excepcional dessa tag (ou por causa dela), em 2019 <link rel= "prerender"> é mal suportada pelos principais navegadores. Saiba mais em mais abaixo.

Sintaxe

<link rel="prerender" href="https://my-app.com/pricing" />

href indica a URL para a qual você deseja iniciar a Renderização em segundo plano.

Quando usar

Quando você tiver certeza de que o usuário irá para uma página específica. Se você tem um "túnel" onde 70% dos visitantes da página A vão para a página B, então <link rel= "prerender"> na página A ajudará a exibir rapidamente a página B.

Não abuse. O pré-renderização é extremamente caro em termos de tráfego e memória. Não use <link rel= "prerender"> para mais de uma página.

Detalhes

Tag opcional. O navegador não é obrigado a seguir essa instrução e pode ignorá-la, por exemplo, em uma conexão lenta ou se não houver memória livre suficiente.

Para economizar memória o Chrome não realiza um render completo, e apenas pré-carregamento NoState. Isso significa que o Chrome carrega a página e todos os seus recursos, mas não faz o render nem executa JavaScript.

Firefox e Safari não suportam esse tag. Isso não viola a especificação, já que os navegadores não são obrigados a seguir essa instrução; mas ainda assim é triste. Um bug de implementação no Firefox foi aberto por sete anos. Há relatos de que o Safari também não suporta esse tag.

Resumo

Use:

<link rel= "preload"> — quando você precisar do recurso dentro de alguns segundos
<link rel= "prefetch"> — quando você precisar do recurso na próxima página
<link rel= "preconnect"> — quando você souber que precisará de um recurso em breve, mas ainda não souber seu URL completo
<link rel= "dns-prefetch"> — da mesma forma, quando você souber que precisará de um recurso em breve, mas ainda não souber seu URL completo (para navegadores antigos)
<link rel= "prerender"> — quando você tiver certeza de que os usuários irão para uma página específica e quiser acelerar sua exibição

Fonte: habr.com