Existem várias maneiras de melhorar o desempenho da web . Um deles é o pré-carregamento de conteúdo que será necessário posteriormente. Pré-busca CSS, renderização de visualização de página inteira ou resolução de nome de domínio. Fazemos tudo com antecedência e exibimos instantaneamente o resultado! Isso parece legal.

Ainda mais legal é que é muito fácil de implementar. Cinco tags <link rel> fornecem ao navegador um comando para ações preliminares:

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" /> 

Descreva brevemente o que eles fazem e quando usá-los.

Ir para: pré - carregamento, pré -busca, pré- conexão , pré-busca de DNS

pré-carga

<link rel= "preload"> diz ao navegador para carregar e armazenar em cache o recurso (por exemplo, um script ou folha de estilos) o mais rápido possível. Isso é útil quando você precisa de um recurso alguns segundos após o carregamento da página - e deseja acelerar o processo.

O navegador não faz nada com o recurso após o carregamento. Os scripts não são executados, as folhas de estilo não são aplicadas. O recurso é simplesmente armazenado em cache e imediatamente disponível mediante solicitação.

Sintaxe

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

href aponta para o recurso que você deseja baixar.

as pode ser qualquer coisa que você possa baixar em um navegador:

• style para folhas de estilo,
  
• script para scripts,
  
• font para fontes,
  
• fetch recursos carregados usando fetch() ou XMLHttpRequest ,
  
• veja a lista completa no MDN .

É importante especificar o atributo as - isso ajuda o navegador a priorizar e planejar corretamente os downloads.

Quando usar

Use a pré-carga quando o recurso for necessário em um futuro próximo. Por exemplo:

• Fontes personalizadas de um arquivo externo:
  
  

   <!-- index.html --> <link rel="stylesheet" href="index.css" /> /* index.css */ @font-face { src: url('comic-sans.woff2') format('woff2'); } 

  
  Por padrão, o comic-sans.woff2 só começará a carregar após carregar e analisar o index.css . Para não esperar muito, você pode baixar a fonte anteriormente usando <link rel= "preload"> :
  
  

   <link rel="preload" href="comic-sans.woff2" as="font" /> 

• Se você dividir seus estilos de acordo com a abordagem Critical CSS em duas partes, crítico (para renderização imediata) e não crítico:
  
  

   <style> /* Inlined critical styles */ </style> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

  
  Com essa abordagem, os estilos não críticos só serão carregados quando o JavaScript for iniciado, o que pode acontecer alguns segundos após a renderização. Em vez de esperar pelo JS, use <link rel= "preload"> para iniciar o download anteriormente:
  
  

   <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

Não abuse da pré-carga . Se você baixar tudo em uma fileira, o site não irá acelerar magicamente, mas, pelo contrário, isso impedirá que o navegador planeje adequadamente o trabalho.

Não confunda com pré-busca . Não use <link rel= "preload"> menos que precise de um recurso imediatamente após carregar a página. Se você precisar mais tarde, por exemplo, para a próxima página, use <link rel= "prefetch"> .

Detalhes

Essa é uma marca obrigatória para execução pelo navegador (se for compatível), ao contrário de todas as outras marcas <link> associadas ao pré-carregamento. O navegador deve fazer o download do recurso especificado em <link rel="preload"> . Em outros casos, ele pode ignorar o pré-carregamento, por exemplo, se estiver executando em uma conexão lenta.

Prioridades Para diferentes recursos (estilos, scripts, fontes etc.), os navegadores geralmente atribuem prioridades diferentes para carregar primeiro os recursos mais importantes. Nesse caso, o navegador prioriza o atributo as. Para o navegador Chrome, você pode ver a tabela completa de prioridades .

pré-busca

<link rel= "prefetch"> solicita ao navegador que baixe e armazene em cache o recurso (por exemplo, um script ou folha de estilos) em segundo plano. O download ocorre com baixa prioridade, portanto, não interfere nos recursos mais importantes. Isso é útil se você precisar do recurso na próxima página e desejar armazená-lo em cache com antecedência.

Também aqui o navegador não faz nada com o recurso após o carregamento. Os scripts não são executados, as folhas de estilo não são aplicadas. O recurso é simplesmente armazenado em cache e imediatamente disponível mediante solicitação.

Sintaxe

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

href aponta para o recurso que você deseja baixar.

as pode ser qualquer coisa que você possa baixar em um navegador:

• style para folhas de estilo,
  
• script para scripts,
  
• font para fontes,
  
• fetch recursos carregados usando fetch() ou XMLHttpRequest ,
  
• veja a lista completa no MDN .

É importante especificar o atributo as - isso ajuda o navegador a priorizar e planejar corretamente os downloads.

Quando usar

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

• Você tem uma loja online e 40% dos usuários vão da página principal para a página do produto. Use <link rel= "prefetch"> ao carregar arquivos CSS e JS para renderizar páginas do produto.
  
• Você tem um aplicativo de uma página e páginas diferentes carregam pacotes diferentes. Quando um usuário visita uma página, você pode pré-carregar pacotes para todas as páginas às quais se refere.

Provavelmente, essa tag pode ser usada com segurança em qualquer volume . Os navegadores geralmente planejam a pré-busca com a prioridade mais baixa, para não incomodar ninguém. Lembre-se de que ele consome tráfego do usuário, o que pode custar dinheiro.

Não para pedidos urgentes . Não use <link rel= "prefetch"> quando o recurso for necessário em alguns segundos. Nesse caso, use <link rel= "preload"> .

Detalhes

Etiqueta opcional . O navegador não precisa seguir estas instruções, pode ignorá-lo, por exemplo, em uma conexão lenta.

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

pré-conectar

<link rel= "preconnect"> solicita que o navegador se conecte previamente ao domínio quando desejar acelerar a conexão no futuro.

O navegador deve estabelecer uma conexão se recuperar alguns recursos de um novo domínio de terceiros. Por exemplo, se você baixar fontes do Google, reagir fontes de uma CDN ou solicitar uma resposta JSON de um servidor de API.

Estabelecer uma nova conexão geralmente leva várias centenas de milissegundos. É feito uma vez, mas ainda leva tempo. Se você estabeleceu uma conexão antecipadamente, economize tempo e faça o download dos recursos desse domínio mais rapidamente.

Sintaxe

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

href indica o nome do domínio para o qual você deseja determinar o endereço IP. Você pode especificar com um prefixo ( https://domain.com ) ou sem ele ( //domain.com ).

Quando usar

Use para domínios nos quais você precisará baixar em breve um estilo, script ou imagem importante, mas ainda não sabe o URL do recurso. Por exemplo:

• Seu aplicativo está hospedado em my-app.com e faz solicitações AJAX para api.my-app.com : você não conhece solicitações específicas antecipadamente, porque elas são feitas dinamicamente a partir de JS. Aqui é bastante apropriado usar uma tag para conexão preliminar a um domínio.
  
• Seu aplicativo está hospedado em my-app.com e usa o Google Fonts. Eles são baixados em dois estágios: primeiro, o arquivo CSS é baixado do domínio fonts.googleapis.com , em seguida, esse arquivo solicita fontes de fonts.gstatic.com . Você não pode saber quais arquivos de fonte específicos de fonts.gstatic.com serão necessários até fazer o download do arquivo CSS, para que possamos estabelecer apenas uma conexão preliminar antecipadamente.

Use essa tag para acelerar um pouco o estilo ou script de terceiros, pré-configurando a conexão.

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

Detalhes

Etiqueta opcional . O navegador não precisa seguir estas instruções e pode ignorá-lo, por exemplo, se muitas conexões já estiverem estabelecidas ou em algum outro caso.

O que inclui o processo de conexão . Para se conectar a cada site, o navegador deve executar as seguintes etapas:

• Resolução de DNS . Encontre o endereço IP do servidor ( 216.58.215.78 ) para o nome de domínio especificado ( google.com ).
• Aperto de mão TCP . Troca de pacotes (cliente → servidor → cliente) para iniciar uma conexão TCP com o servidor.
• TLS Handshake (somente sites HTTPS) . Duas rodadas de troca de pacotes (cliente → servidor → cliente → servidor → cliente) para iniciar uma sessão TLS segura.

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

dns-prefetch

<link rel= "dns-prefetch"> solicita ao navegador que pré-resolva o DNS do domínio com antecedência, caso você esteja conectado a ele em breve e deseje acelerar a conexão inicial.

O navegador deve determinar o endereço IP do domínio para recuperar alguns recursos do novo domínio de terceiros. Por exemplo, faça o download das Fontes do Google, Reaja às fontes de uma CDN ou solicite uma resposta JSON de um servidor de API.

Para cada novo domínio, a resolução do DNS normalmente leva de 20 a 120 ms. Isso afeta apenas o carregamento do primeiro recurso de um determinado domínio, mas ainda representa um atraso. Se você implementar a resolução DNS antecipadamente, economizaremos tempo e carregaremos o recurso mais rapidamente.

Sintaxe

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

href indica o nome do domínio para o qual definir um endereço IP. Você pode especificar com um prefixo ( https://domain.com ) ou sem ele ( //domain.com ).

Quando usar

Use para domínios que serão necessários em breve para fazer o download de recursos de onde o navegador não tenha conhecimento prévio. Por exemplo:

• Seu aplicativo está hospedado em my-app.com e faz solicitações AJAX para api.my-app.com : você não conhece solicitações específicas antecipadamente, porque elas são feitas dinamicamente a partir de JS. Aqui é bastante apropriado usar uma tag para conexão preliminar a um domínio.
  
• Seu aplicativo está hospedado em my-app.com e usa o Google Fonts. Eles são baixados em dois estágios: primeiro, o arquivo CSS é baixado do domínio fonts.googleapis.com , em seguida, esse arquivo solicita fontes de fonts.gstatic.com . Você não pode saber quais arquivos de fonte específicos de fonts.gstatic.com serão necessários até fazer o download do arquivo CSS, para que possamos estabelecer apenas uma conexão preliminar antecipadamente.

Use essa tag para acelerar um pouco o estilo ou script de terceiros, pré-configurando a conexão.

Observe as especificações semelhantes em <link rel= "dns-prefetch"/> e <link rel= "preconnect"> . Usá-los juntos para o mesmo 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 mais antigos . <link rel= "dns-prefetch" /> é suportado desde o IE10 e Safari 5 . <link rel= "preconnect"> foi suportado por algum tempo no Chrome e Firefox, mas foi adicionado ao Safari apenas na 11.1 e ainda não é suportado no IE / Edge . Se você precisar oferecer suporte a esses navegadores, use <link rel= "dns-prefetch" /> como um <link rel= "preconnect"> para <link rel= "preconnect"> .
• Você deseja acelerar sua conexão com mais de 4-6 domínios . A <link rel= "preconnect"> não <link rel= "preconnect"> 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, use-o se necessário.

Detalhes

Etiqueta opcional . O navegador não precisa seguir estas instruções; portanto, ele pode não executar a resolução de DNS, por exemplo, se houver muitas dessas tags na página ou em outro caso.

O que é DNS Cada servidor na Internet tem um endereço IP exclusivo que se parece com 216.58.215.78 . O nome do site (por exemplo, google.com ) geralmente é inserido na barra de endereços do navegador e os servidores DNS (Sistema de Nomes de Domínio) o mapeiam para o endereço IP do servidor ( 216.58.215.78 ).

Para determinar o endereço IP, o navegador deve consultar o servidor DNS. Leva 20-120 ms ao conectar-se a um novo domínio de terceiros.

O DNS é armazenado em cache, embora não seja muito confiável . Alguns sistemas operacionais e navegadores armazenam em cache as consultas DNS: isso economiza tempo em consultas repetidas, mas você não pode confiar no cache. No Linux, geralmente não funciona. O Chrome tem um cache DNS, mas dura apenas um minuto. O Windows armazena em cache as respostas DNS por cinco dias.

pré-render

<link rel= "prerender"> pede ao navegador para baixar o URL e exibi-lo em uma guia 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 deseja acelerar sua exibição.

Apesar da eficácia excepcional dessa tag (ou por causa dela), em 2019 <link rel= "prerender"> pouco suportado pelos principais navegadores. Veja abaixo para mais detalhes.

Sintaxe

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

href aponta para o URL para o qual você deseja executar 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ê possui um “túnel” pelo qual 70% dos visitantes da página A vão para a página B, <link rel= "prerender"> na página A ajudará a exibir a página B muito rapidamente.

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

Detalhes

Etiqueta opcional . O navegador não precisa seguir estas instruções e pode ignorá-lo, por exemplo, em uma conexão lenta ou quando não há memória livre suficiente.

Por uma questão de economia de memória, o Chrome não executa a renderização completa , mas apenas pré-carrega o NoState . Isso significa que o Chrome carrega a página e todos os seus recursos, mas não renderiza e não executa JavaScript.

Firefox e Safari não suportam essa tag. Isso não viola a especificação, pois os navegadores não precisam seguir esta instrução; mas triste de qualquer maneira. O bug de implementação no Firefox está aberto há sete anos. Há relatos de que o Safari também não suporta essa tag .

Sumário

Use:

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