Neste codelab, o desempenho da página da Web abaixo foi melhorado com o pré-carregamento e a pré-busca de alguns recursos:
Medida
Avalie o desempenho do site antes de adicionar otimizações.
- Para visualizar o site, pressione Ver app. Em seguida, pressione
Tela cheia
.
Execute a auditoria de desempenho do Lighthouse (Lighthouse > Options > Performance) na versão ativa do Glitch. Confira também Descubra oportunidades de desempenho com o Lighthouse.
O Lighthouse mostra a seguinte auditoria com falha para um recurso buscado com atraso:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
O arquivo main.css não é buscado por um elemento de link (<link>) colocado no documento HTML. No entanto, um arquivo JavaScript separado, fetch-css.js, anexa o elemento de link ao DOM depois do evento window.onLoad. Isso significa que o arquivo só é buscado depois que o navegador termina de analisar e executar o arquivo JS. Da mesma forma, uma fonte da Web (K2D.woff2) especificada em main.css só é
buscada depois que o download do arquivo CSS é concluído.
A cadeia de solicitações crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. Atualmente, essa página da Web tem a seguinte aparência:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
Como o arquivo CSS está no terceiro nível da cadeia de solicitações, o Lighthouse o identificou como um recurso descoberto tardiamente.
Pré-carregar recursos críticos
O arquivo main.css é um recurso essencial que é necessário imediatamente que a
página é carregada. Para arquivos importantes como esse recurso que são buscados tardiamente no
seu aplicativo, use uma tag de pré-carregamento de link para informar ao navegador que faça o download
mais cedo, adicionando um elemento Link ao cabeçalho do documento.
Adicione uma tag de pré-carregamento para este aplicativo:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
O atributo as é usado para identificar o tipo de recurso que está sendo buscado, e as="style" é usado para pré-carregar arquivos de folha de estilo.
Atualize o aplicativo e confira o painel Network no DevTools.
O navegador busca o arquivo CSS antes que o JavaScript responsável por buscá-lo termine a análise. Com o pré-carregamento, o navegador sabe que é preciso fazer uma busca preventiva para o recurso, supondo que ele seja essencial para a página da Web.
Se não for usado corretamente, o pré-carregamento poderá prejudicar o desempenho ao fazer solicitações
desnecessárias para recursos que não são usados. Neste aplicativo, details.css é
outro arquivo CSS localizado na raiz do projeto, mas é usado para um /details route
separado. Para mostrar um exemplo de como o pré-carregamento pode ser usado incorretamente, adicione uma
dica de pré-carregamento para esse recurso também.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Atualize o aplicativo e confira o painel Network.
Uma solicitação é feita para recuperar details.css, mesmo que ele não esteja sendo usado pela página da Web.
O Chrome exibe um aviso no painel Console quando um recurso pré-carregado não é usado pela página alguns segundos após o carregamento.
Use esse aviso como um indicador para identificar se você tem recursos pré-carregados que não estão sendo usados imediatamente pela página da Web. Agora é possível remover o link de pré-carregamento desnecessário para esta página.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
Para conferir uma lista de todos os tipos de recursos que podem ser buscados com os
valores corretos que precisam ser usados para o atributo as, consulte o
artigo da MDN sobre pré-carregamento.
Fazer uma pré-busca de recursos futuros
A pré-busca é outra dica do navegador que pode ser usada para fazer uma solicitação de um recurso usado para uma rota de navegação diferente, mas com uma prioridade menor do que outros recursos importantes necessários para a página atual.
Neste site, clicar na imagem leva a uma rota details/
diferente.
Um arquivo CSS separado, details.css, contém todos os estilos necessários para esta página simples. Adicione um elemento de link a index.html para fazer a pré-busca desse recurso.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Para entender como isso aciona uma solicitação para o arquivo, abra o painel Network no DevTools e desmarque a opção Desativar cache.
Atualize o aplicativo e observe como uma solicitação de prioridade muito baixa é feita para
details.css depois que todos os outros arquivos foram buscados.
Com o DevTools aberto, clique na imagem no site para navegar até a página do details.
Como um elemento do link é usado em details.html para buscar details.css, uma solicitação para o
recurso é feita conforme o esperado.
Clique na solicitação de rede details.css no DevTools para conferir os detalhes. Você vai notar
que o arquivo foi recuperado do cache de disco do navegador.
Ao aproveitar o tempo de inatividade do navegador, a pré-busca faz uma solicitação antecipada de um recurso necessário para uma página diferente. Isso acelera as futuras solicitações de navegação permitindo que o navegador armazene o recurso em cache mais cedo e o veicule a partir do cache quando necessário.
Pré-carregamento e pré-busca com o webpack
A postagem Reduzir payloads de JavaScript com divisão de código explica o uso de importações dinâmicas para dividir um pacote em vários blocos. Isso é demonstrado com um aplicativo simples que importa dinamicamente um módulo de Lodash quando um formulário é enviado.
Você pode acessar o Glitch para este aplicativo aqui.
O bloco de código abaixo, que fica em src/index.js,, é responsável por
importar o método dinamicamente quando o botão é clicado.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Dividir um pacote melhora o tempo de carregamento da página
reduzindo o tamanho inicial dele. A versão 4.6.0 do webpack oferece suporte ao pré-carregamento ou
a pré-busca de partes que são importadas dinamicamente. Usando esse aplicativo como
exemplo, o método lodash pode ser pré-buscado durante o tempo de inatividade do navegador. Quando um usuário
pressiona o botão, não há atraso para o recurso ser buscado.
Use o parâmetro de comentário webpackPrefetch específico em uma importação dinâmica para fazer a pré-busca de um bloco específico.
Veja como ficaria com esse aplicativo específico.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Depois que o aplicativo é recarregado, o webpack injeta uma tag de pré-busca para o recurso no cabeçalho do documento. Isso pode ser visto no painel Elementos do DevTools.
Observar as solicitações no painel Network também mostra que esse bloco é buscado com baixa prioridade depois que todos os outros recursos foram solicitados.
Embora a pré-busca faça mais sentido para esse caso de uso, o webpack também oferece suporte ao pré-carregamento de blocos que são importados dinamicamente.
import(/* webpackPreload: true */ 'module')
Conclusão
Com este codelab, você vai entender bem como o pré-carregamento ou a pré-busca de determinados recursos pode melhorar a experiência do usuário no seu site. É importante mencionar que essas técnicas não devem ser utilizadas para todos os recursos, e seu uso incorreto pode prejudicar o desempenho. Os melhores resultados são percebidos apenas pelo pré-carregamento ou pela pré-busca seletivamente.
Para resumir:
- Use o pré-carregamento para recursos descobertos tardiamente, mas que são essenciais para a página atual.
- Use a pré-busca para recursos necessários para uma rota de navegação ou ação futura do usuário.
No momento, nem todos os navegadores são compatíveis com pré-carregamento e pré-busca. Isso significa que nem todos os usuários do aplicativo podem notar melhorias no desempenho.
Se você quiser mais informações sobre aspectos específicos de como o pré-carregamento e a pré-busca podem afetar sua página da Web, consulte estes artigos: