ProHoster > Blog > administração > Pré-carregar, pré-busca e outras tags

Pré-carregar, pré-busca e outras tags

Tem muitas maneiras de melhorar o desempenho da web. Uma delas é pré-carregar conteúdo que será necessário posteriormente. Pré-processamento CSS, pré-renderização de página inteira ou resolução de nome de domínio. Fazemos tudo com antecedência e depois exibimos o resultado instantaneamente! Parece legal.

O que é ainda mais legal é que ele é implementado de forma muito simples. Cinco tags dê ao navegador um comando para executar ações preliminares:

<link rel="prefetch" href="/pt/style.css" as="style" />
<link rel="preload" href="/pt/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" />


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

Pule para: pré-carga · prefetch · pré-conectar · pré-busca de dns · pré-render

pré-carga

<link rel= "preload"> informa ao navegador para carregar e armazenar em cache um recurso (como um script ou folha de estilo) o mais rápido possível. Isso é útil quando um recurso é necessário 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. Os scripts não são executados, as folhas de estilo não são aplicadas. O recurso é simplesmente armazenado em cache e disponibilizado imediatamente mediante solicitação.

sintaxe

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

href aponta para o recurso que você deseja baixar.

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

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

É importante especificar o atributo as – isso ajuda o navegador a priorizar e agendar downloads adequadamente.

Quando usar

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

  • Fontes não padrão 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 comic-sans.woff2 começará a carregar somente após o download e análise index.css. Para evitar esperar tanto tempo, você pode baixar a fonte mais cedo usando <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Se você separar seus estilos de acordo com a abordagem CSS Crítico em duas partes, crítica (para renderização imediata) e não crítica: 
    <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ó começarão a carregar quando o JavaScript for executado, o que pode acontecer alguns segundos após a renderização. Em vez de esperar usar JS <link rel= "preload">para iniciar o download mais cedo:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/pt/app/non-critical.css" as="style" />

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

Não abuse do pré-carregamento. Se você carregar tudo em sequência, o site não irá acelerar magicamente, pelo contrário, impedirá que o navegador planeje seu funcionamento corretamente.

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

detalhes

Esta é uma tag obrigatória a ser executado pelo navegador (se ele suportar), ao contrário de todas as outras tags relacionado ao pré-carregamento. O navegador deve baixar o recurso especificado em <link rel="preload">. Noutros casos, pode ignorar o pré-carregamento, por exemplo, se estiver a funcionar numa ligação lenta.

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

Pré-carregar, pré-busca e outras tags

prefetch

<link rel= "prefetch"> pede ao navegador para baixar e armazenar em cache um recurso (como um script ou folha de estilo) em segundo plano. O carregamento ocorre em baixa prioridade para não interferir nos recursos mais importantes. Isto é útil se o recurso for necessário na próxima página e você quiser armazená-lo em cache com antecedência.

Aqui também 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 disponibilizado imediatamente mediante solicitação.

sintaxe

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

href aponta para o recurso que você deseja baixar.

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

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

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

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. Por exemplo:

  • Você tem uma loja online e 40% dos usuários saem da página inicial para ver a página do produto. Usar <link rel= "prefetch">, carregando arquivos CSS e JS para renderizar páginas de produtos.
  • Você tem um aplicativo de página única e páginas diferentes carregam pacotes diferentes. Quando um usuário visita uma página, os pacotes para todas as páginas vinculadas podem ser pré-carregados.

É provável que esta tag possa ser usada com segurança em qualquer medida.. Os navegadores geralmente agendam a pré-busca com a prioridade mais baixa, para que isso não incomode ninguém. Lembre-se de que isso consome tráfego de usuários, 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. Neste caso, use <link rel= "preload">.

detalhes

Etiqueta 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"> geralmente executado com prioridade mínima (veja tabela de prioridade completa), isto é, depois de carregar todo o resto.

pré-conectar

<link rel= "preconnect"> pede ao navegador para se conectar ao domínio com antecedência quando você quiser acelerar a configuração da conexão no futuro.

O navegador deverá estabelecer uma conexão se recuperar recursos de um novo domínio de terceiros. Por exemplo, se ele carrega fontes do Google, fontes React de um CDN ou solicita uma resposta JSON de um servidor API.

O estabelecimento de uma nova conexão geralmente leva algumas centenas de milissegundos. Isso é feito uma vez, mas ainda leva tempo. Se você estabeleceu uma conexão com antecedência, economizará tempo e baixará recursos deste domínio com mais rapidez.

sintaxe

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

href indica o nome de domínio para o qual você deseja determinar o endereço IP. Pode ser especificado 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 baixar um estilo, script ou imagem importante de lá, mas você 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 as consultas específicas com antecedência porque elas são feitas dinamicamente a partir de JS. Aqui é bastante apropriado usar uma tag para pré-conectar-se ao domínio.
  • Seu aplicativo está hospedado em my-app.com e usa fontes do Google. Eles são baixados em duas etapas: primeiro, o arquivo CSS é baixado do domínio fonts.googleapis.com, então este arquivo solicita fontes com fonts.gstatic.com. Você não pode saber de quais arquivos de fontes específicos são fonts.gstatic.com você precisará até carregar o arquivo CSS, portanto, só podemos fazer uma conexão preliminar de antemão.

Use esta tag para acelerar um pouco algum script ou estilo de terceiros devido à 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 para no máximo 4 a 6 domínios.

detalhes

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

O que inclui o processo de conexão?. Para se conectar a cada site, o navegador deve fazer o seguinte:

  • Resolução 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. Troque pacotes (cliente → servidor → cliente) para iniciar uma conexão TCP com o servidor.
  • Handshake TLS (somente sites HTTPS). Duas rodadas de troca de pacotes (cliente → servidor → cliente → servidor → cliente) para iniciar uma sessão TLS segura.

Observação: o HTTP/3 melhorará e acelerará o mecanismo de handshake, mas ainda está muito longe.

pré-busca de dns

<link rel= "dns-prefetch"> pede ao navegador para realizar a resolução DNS do domínio com antecedência se você se conectar a ele em breve e quiser acelerar a conexão inicial.

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

Para cada novo domínio, a resolução do registro DNS normalmente leva cerca de 20 a 120 ms. Isto afeta apenas o carregamento do primeiro recurso de um determinado domínio, mas ainda introduz um atraso. Se realizarmos a resolução do DNS com antecedência, economizaremos tempo e carregaremos o recurso com mais rapidez.

sintaxe

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

href indica o nome de domínio para o qual você deseja definir o endereço IP. Pode ser especificado 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 baixar recursos de lá que o navegador não conhece antecipadamente. Por exemplo:

  • Seu aplicativo está hospedado em my-app.com e faz solicitações AJAX para api.my-app.com: você não conhece as consultas específicas com antecedência porque elas são feitas dinamicamente a partir de JS. Aqui é bastante apropriado usar uma tag para pré-conectar-se ao domínio.
  • Seu aplicativo está hospedado em my-app.come usa fontes do Google. Eles são baixados em duas etapas: primeiro, o arquivo CSS é baixado do domínio fonts.googleapis.com, então este arquivo solicita fontes com fonts.gstatic.com. Você não pode saber de quais arquivos de fontes específicos são fonts.gstatic.com você precisará dele até carregar o arquivo CSS, portanto, só podemos fazer uma conexão preliminar com antecedência.

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

Observe características semelhantes a <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Geralmente não faz sentido usá-los juntos para um domínio: <link rel= "preconnect"> já inclui <link rel= "dns-prefetch"/> e muito mais. Isto pode ser justificado em dois casos:

  • Você deseja oferecer suporte a navegadores mais antigos?. <link rel= "dns-prefetch" /> apoiado por desde IE10 e Safari 5. <link rel= "preconnect"> foi suportado por um tempo no Chrome e Firefox, mas só foi adicionado ao Safari em 11.1 e ainda não é compatível com IE/Edge. Se você precisar oferecer suporte a esses navegadores, use <link rel= "dns-prefetch" /> como opção de backup para <link rel= "preconnect">.
  • Você deseja acelerar conexões para mais de 4 a 6 domínios. Marcação <link rel= "preconnect"> Não é recomendado usar com mais de 4 a 6 domínios, pois estabelecer e manter uma conexão é uma operação cara. <link rel= "dns-prefetch" /> consome menos recursos, então use-o se necessário.

detalhes

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

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

Para determinar um endereço IP, o navegador deve consultar o servidor DNS. Demora de 20 a 120 ms ao se conectar 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 consultas DNS: isso economizará tempo em consultas repetidas, mas não se 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 determinada página e deseja agilizar sua exibição.

Apesar (ou por causa) da eficácia excepcional desta etiqueta, em 2019 <link rel= "prerender"> mal suportado nos principais navegadores. Veja mais detalhes. abaixo.

sintaxe

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

href aponta para o URL que você deseja iniciar a renderização em segundo plano.

Quando usar

Quando você tem certeza de que o usuário irá para uma determinada página. Se você tiver um “túnel” através do qual 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 a página B muito rapidamente.

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

detalhes

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

Para economizar memória Chrome não faz renderização completaE apenas pré-carregar NoState. Isso significa que o Chrome carrega a página e todos os seus recursos, mas não renderiza nem executa JavaScript.

Firefox e Safari não suportam esta tag. Isto não viola a especificação, uma vez que os navegadores não são obrigados a seguir esta instrução; mas ainda assim triste. Bug de implementação O Firefox está aberto há sete anos. Há relatos de que o Safari também não suporta esta tag.

Resumo

Usar:

  • <link rel= "preload"> - quando você precisar de um recurso em poucos segundos
  • <link rel= "prefetch"> - quando você precisar do recurso na próxima página
  • <link rel= "preconnect"> - quando você sabe que precisará de um recurso em breve, mas ainda não sabe seu URL completo
  • <link rel= "dns-prefetch"> - da mesma forma, quando você sabe que precisará de um recurso em breve, mas ainda não sabe seu URL completo (para navegadores mais antigos)
  • <link rel= "prerender"> — quando você tem certeza de que os usuários irão para uma determinada página e deseja agilizar sua exibição

Fonte: habr.com

Adicionar um comentário