Duas formas de pré-busca: tags <link> e cabeçalhos HTTP

Demián Renzulli
Demián Renzulli

Neste codelab, você vai implementar o pré-carregamento de duas maneiras: com <link rel="prefetch"> e com o cabeçalho HTTP Link.

O app de exemplo é um site com uma página de destino promocional com um desconto especial para a camiseta mais vendida da loja. Como a página de destino está vinculada a um único produto, é seguro presumir que uma porcentagem alta de usuários vai acessar a página de detalhes do produto. Isso faz com que a página do produto seja uma ótima candidata para a pré-busca na página de destino.

Avaliar o desempenho

Primeiro, estabeleça o desempenho do valor de referência:

  1. Clique em Remixar para editar para tornar o projeto editável.
  2. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  3. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
  4. Clique na guia Rede.

  5. Na lista suspensa Limitação, selecione 3G rápido para simular um tipo de conexão lento.

  6. Para carregar a página do produto, clique em Comprar agora no app de exemplo.

A página product-details.html leva cerca de 600 ms para carregar:

Painel de rede mostrando os tempos de carregamento de product-details.html

Para melhorar a navegação, insira uma tag prefetch na página de destino para fazer o pré-carregamento da página product-details.html:

  • Adicione o seguinte elemento <link> ao cabeçalho do arquivo views/index.html:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

O atributo as é opcional, mas recomendado. Ele ajuda o navegador a definir os cabeçalhos corretos e determinar se o recurso já está no cache. Exemplos de valores para esse atributo: document, script, style, font, image e outros.

Para verificar se o pré-carregamento está funcionando:

  1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
  3. Clique na guia Rede.

  4. Na lista suspensa Limitação, selecione 3G rápido para simular um tipo de conexão lento.

  5. Desmarque a caixa de seleção "Desativar cache".

  6. Atualize o app.

Agora, quando a página de destino é carregada, a página product-details.html também é carregada, mas com a prioridade mais baixa:

Painel de rede mostrando o arquivo product-details.html pré-carregado.

A página é mantida no cache HTTP por cinco minutos. Depois disso, as regras normais Cache-Control do documento são aplicadas. Nesse caso, product-details.html tem um cabeçalho cache-control com um valor public, max-age=0, o que significa que a página é mantida por cinco minutos.

Reavaliar a performance

  1. Atualize o app.
  2. Para carregar a página do produto, clique em Comprar agora no app de exemplo.

Observe o painel Network. Há duas diferenças em comparação com o trace de rede inicial:

  • A coluna Tamanho mostra "cache de pré-busca", o que significa que esse recurso foi recuperado do cache do navegador em vez da rede.
  • A coluna Tempo mostra que o tempo necessário para o carregamento do documento é de cerca de 10 ms.

Isso é uma redução de aproximadamente 98% em comparação com a versão anterior, que levou cerca de 600 ms.

Painel de rede mostrando o arquivo product-details.html recuperado do cache de pré-busca.

Crédito extra: use prefetch como um aprimoramento progressivo

A pré-busca é melhor implementada como um aprimoramento progressivo para os usuários que navegam em conexões rápidas. Você pode usar a API Network Information para verificar as condições de rede e injetar tags de pré-carregamento dinamicamente com base nisso. Assim, você pode minimizar o consumo de dados e economizar custos para os usuários com planos de dados lentos ou caros.

Para implementar o pré-carregamento adaptativo, primeiro remova a tag <link rel="prefetch"> de views/index.html:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

Em seguida, adicione o seguinte código a public/script.js para declarar uma função que injete dinamicamente a tag prefetch quando o usuário estiver em uma conexão rápida:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

A função funciona da seguinte maneira:

  • Ele verifica a propriedade effectiveType da API Network Information para determinar se o usuário está em uma conexão 4G (ou mais rápida).
  • Se essa condição for atendida, uma tag <link> será gerada com prefetch como o tipo de sugestão, o URL que será pré-buscado será transmitido no atributo href e será indicado que o recurso é um document HTML no atributo as.
  • Por fim, ele injeta o script dinamicamente no head da página.

Em seguida, adicione script.js a views/index.html, antes da tag </body> de fechamento:

<body>
      ...
      <script src="/script.js"></script>
</body>

Solicitar script.js no final da página garante que ele será carregado e executado depois que a página for analisada e carregada.

Para garantir que o pré-carregamento não interfira nos recursos essenciais da página atual, adicione o snippet de código a seguir para chamar injectLinkPrefetchIn4g() no evento window.load:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

A página de destino agora faz precarregar product-details.html somente em conexões rápidas. Para verificar isso:

  1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
  3. Clique na guia Rede.
  4. Na lista suspensa Limitação, selecione Online.
  5. Atualize o app.

Você vai encontrar product-details.html no painel "Rede":

Painel de rede mostrando o arquivo product-details.html pré-carregado.

Para verificar se a página do produto não está sendo pré-buscada em conexões lentas:

  1. Na lista suspensa "Limitação, selecione 3G lento.
  2. Atualize o app.

O painel Rede deve incluir apenas os recursos da página de destino sem product-details.html:

O painel de rede mostra que o arquivo product-details.html não está sendo pré-carregado.

O cabeçalho HTTP Link pode ser usado para fazer precarregar o mesmo tipo de recursos da tag link. A decisão de quando usar um ou outro depende principalmente da sua preferência, já que a diferença no desempenho é insignificante. Nesse caso, você vai usá-lo para fazer o pré-carregamento do CSS principal da página de produto, melhorando ainda mais a renderização.

Adicione um cabeçalho HTTP Link para style-product.css na resposta do servidor para a página de destino:

  1. Abra o arquivo server.js e procure o gerenciador get() do URL raiz: /.
  2. Adicione a seguinte linha no início do gerenciador:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.
  2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
  3. Clique na guia Rede.
  4. Atualize o app.

O style-product.css agora é pré-buscado na prioridade mais baixa após o carregamento da página de destino:

Painel de rede mostrando o style-product.css pré-carregado.

Para acessar a página do produto, clique em Comprar agora. Confira o painel Rede:

Painel de rede mostrando o style-product.css recuperado do cache de pré-busca.

O arquivo style-product.css é recuperado do "cache de pré-busca" e demorou apenas 12 ms para carregar.