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:
- Clique em Remixar para editar para tornar o projeto editável.
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- 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 lento.
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 a busca antecipada 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 o pré-carregamento 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 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:
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
Clique na guia Rede.
Na lista suspensa Limitação, selecione 3G rápido para simular um tipo de conexão lento.
Desmarque a caixa de seleção "Desativar cache".
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:
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
- Atualize o app.
- 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.
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 comprefetch
como o tipo de sugestão, o URL que será pré-buscado será transmitido no atributohref
e será indicado que o recurso é umdocument
HTML no atributoas
. - 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:
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Na lista suspensa Limitação, selecione Online.
- Atualize o app.
Você vai encontrar 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 Rede deve incluir apenas os recursos da página de destino sem product-details.html
:
Faça a 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 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:
- Abra o arquivo
server.js
e procure o gerenciadorget()
do URL raiz:/
. - 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');
});
- Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
- Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Atualize o app.
O style-product.css
agora é pré-buscado na prioridade mais baixa após o carregamento da página de destino:
Para acessar a página do produto, clique em Comprar agora. Confira o painel Rede:
O arquivo style-product.css
é recuperado do "cache de pré-busca" e demorou apenas 12 ms para carregar.