Neste codelab, você implementará a pré-busca de duas maneiras: com <link rel="prefetch">
e com o cabeçalho HTTP Link
.
O app de exemplo é um site que tem 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 alta porcentagem de usuários navegará até a página de detalhes do produto. Isso faz com que a página do produto seja uma ótima candidata para pré-busca na página de destino.
Avaliar o desempenho
Primeiro, defina o desempenho de referência:
- Clique em Remixar para editar para tornar o projeto editável.
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
Clique na guia Rede.
Na lista suspensa Limitação, selecione 3G rápido para simular um tipo de conexão lenta.
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:
Fazer uma pré-busca da página do produto com <link rel="prefetch">
Para melhorar a navegação, insira uma tag prefetch
na página de destino para fazer a pré-busca da página product-details.html
:
- Adicione o seguinte elemento
<link>
ao cabeçalho do arquivoviews/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 a determinar se o recurso já está no cache. Exemplos de valores para esse atributo: document
, script
, style
, font
, image
e outros.
Para verificar se a pré-busca está funcionando:
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
Clique na guia Rede.
Na lista suspensa Limitação, selecione 3G rápido para simular um tipo de conexão lenta.
Desmarque a caixa de seleção Desativar cache.
Atualize o app.
Agora, quando a página de destino for carregada, a página product-details.html
também será carregada, mas com a prioridade mais baixa:
A página é mantida no cache HTTP por cinco minutos, após os quais as regras Cache-Control
normais para o documento são aplicadas. Nesse caso, product-details.html
tem um cabeçalho cache-control
com o valor public, max-age=0
, o que significa que a página é mantida por um total de cinco minutos.
Reavalie a performance
- Atualize o app.
- Para carregar a página do produto, clique em Comprar agora no app de exemplo.
Confira o painel Rede. Há duas diferenças em comparação com o rastreamento de rede inicial:
- A coluna Tamanho mostra "cache de pré-busca", o que significa que esse recurso foi recuperado do cache do navegador e não da rede.
- A coluna Time mostra que o tempo necessário para o documento carregar agora é de cerca de 10 ms.
Isso representa uma redução de aproximadamente 98% em comparação com a versão anterior, que levou cerca de 600 ms.
Crédito extra: use prefetch
como um aprimoramento progressivo
A pré-busca é mais bem implementada como uma melhoria progressiva para usuários que estão navegando em conexões rápidas. Você pode usar a API Network Information para verificar as condições de rede e, com base nelas, injetar dinamicamente tags de pré-busca. Dessa forma, você pode minimizar o consumo de dados e economizar custos para os usuários com planos de dados lentos ou caros.
Para implementar a pré-busca adaptável, 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 código abaixo ao método public/script.js
para declarar uma função que injeta 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, ela vai gerar uma tag
<link>
comprefetch
como o tipo de dica, transmitir o URL que será pré-buscado no atributohref
e indicar que o recurso é um HTMLdocument
no atributoas
. - Por fim, ele injeta o script dinamicamente no
head
da página.
Em seguida, adicione script.js
a views/index.html
, logo antes da tag de fechamento </body>
:
<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 a pré-busca não interfira em recursos essenciais da página atual, adicione o seguinte snippet de código 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 a pré-busca de product-details.html
apenas em conexões rápidas. Para verificar se:
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Na lista suspensa Limitação, selecione On-line.
- Atualize o app.
Você verá product-details.html
no painel "Rede":
Para verificar se a página do produto não está sendo pré-buscada em conexões lentas:
- Na lista suspensa "Limitação", selecione 3G lento.
- Atualize o app.
O painel Network precisa incluir apenas os recursos da página de destino sem product-details.html
:
Fazer uma pré-busca da folha de estilo da página do produto com o cabeçalho HTTP Link
O cabeçalho HTTP Link
pode ser usado para fazer a pré-busca do mesmo tipo de recurso que a tag link
. A decisão sobre quando usar um ou outro depende principalmente da sua preferência, já que a diferença de desempenho é insignificante. Nesse caso, ela é usada para fazer a pré-busca do CSS principal da página do produto e melhorar 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:
- Abra o arquivo
server.js
e procure o gerenciadorget()
para o URL raiz:/
. - Adicione a seguinte linha ao início do gerenciador:
app.get('/', function(request, response) {
response.set('Link', '</style-product.css>; rel=prefetch');
response.sendFile(__dirname + '/views/index.html');
});
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Atualize o app.
O style-product.css
agora é pré-buscado com a prioridade mais baixa depois que a página de destino é carregada:
Para acessar a página do produto, clique em Comprar agora. Confira o painel Network:
O arquivo style-product.css
é recuperado do "cache de pré-busca" e o carregamento levou apenas 12 ms.