Neste codelab, o desempenho da seguinte página da Web é melhorado com o pré-carregamento e a pré-busca de alguns recursos:
Medir
Primeiro, meça a performance do site antes de adicionar qualquer otimização.
- Para visualizar o site, pressione Ver app e depois Tela cheia
.
Execute a auditoria de performance do Lighthouse (Lighthouse > Opções > Performance) na versão ativa do seu Glitch. Consulte também Descobrir oportunidades de performance com o Lighthouse.
O Lighthouse mostra a seguinte auditoria com falha para um recurso buscado tarde:
- 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, mas por um arquivo JavaScript separado, fetch-css.js, que anexa o elemento de link ao DOM após o 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ção crítica representa a ordem dos recursos que são priorizados e buscados pelo navegador. Para esta página da Web, ele aparece assim:
├─┬ / (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 essenciais
O arquivo main.css é um recurso essencial que precisa ser carregado imediatamente assim que a página é carregada. Para arquivos importantes, como este recurso, que são buscados tarde no
aplicativo, use uma tag de pré-carregamento de link para informar ao navegador que faça o download
antes, 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 Rede no DevTools.
Observe como o navegador busca o arquivo CSS antes mesmo de o JavaScript responsável por buscá-lo terminar de analisar. Com o pré-carregamento, o navegador sabe fazer uma busca preventiva do recurso, presumindo que ele é essencial para a página da Web.
Se não for usado corretamente, o pré-carregamento pode prejudicar o desempenho fazendo solicitações desnecessárias de 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 Rede.
Uma solicitação é feita para recuperar details.css, mesmo que ele não esteja sendo usado pela página da Web.
O Chrome mostra 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 sua página da Web. Agora você pode 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 uma lista de todos os tipos de recursos que podem ser buscados com os
valores corretos que devem ser usados para o atributo as, consulte o
artigo da MDN sobre pré-carregamento.
Pré-busca de recursos futuros
O 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.
Nesse site, clicar na imagem leva você a uma rota details/
separada.
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 pré-buscar esse recurso.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Para entender como isso aciona uma solicitação do arquivo, abra o painel Rede no DevTools e desmarque a opção Desativar cache.
Recarregue o aplicativo e observe como uma solicitação de prioridade muito baixa é feita para
details.css depois que todos os outros arquivos são buscados.
Com o DevTools aberto, clique na imagem no site para navegar até a página details.
Como um elemento de link é usado em details.html para buscar details.css, uma solicitação é feita para o
recurso conforme esperado.
Clique na solicitação de rede details.css no DevTools para conferir os detalhes. Você vai notar que o arquivo é recuperado do cache de disco do navegador.
Ao aproveitar o tempo ocioso do navegador, a pré-busca faz uma solicitação antecipada de um recurso necessário para outra página. Isso acelera as solicitações de navegação futuras permitindo que o navegador armazene o recurso em cache mais cedo e o disponibilize do cache quando necessário.
Pré-carregamento e pré-busca com webpack
A postagem Reduzir payloads JavaScript com divisão de código explora 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 do Lodash quando um formulário é enviado.
Acesse o Glitch para este aplicativo aqui.
O bloco de código a seguir, que fica em src/index.js,, é responsável por
importar dinamicamente o método 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 os tempos de carregamento da página
reduzindo o tamanho inicial dele. A versão 4.6.0 do webpack oferece suporte para pré-carregar ou
pré-buscar partes importadas dinamicamente. Usando esse aplicativo como exemplo, o método lodash pode ser pré-buscado durante o tempo ocioso do navegador. Quando um usuário pressiona o botão, não há atraso para buscar o recurso.
Use o parâmetro de comentário webpackPrefetch específico em uma importação dinâmica para pré-buscar um trecho 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 Rede também mostra que esse bloco é buscado com baixa prioridade depois que todos os outros recursos são solicitados.
Embora a pré-busca faça mais sentido para esse caso de uso, o webpack também oferece suporte para pré-carregamento de partes importadas dinamicamente.
import(/* webpackPreload: true */ 'module')
Conclusão
Com este codelab, você vai entender bem como a pré-carga 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 usadas em todos os recursos, e o uso incorreto pode prejudicar o desempenho. Os melhores resultados são notados apenas com pré-carregamento ou pré-busca seletivos.
Para resumir:
- Use preload para recursos descobertos tarde, mas essenciais para a página atual.
- Use pré-busca para recursos necessários em uma rota de navegação ou ação do usuário futura.
Nem todos os navegadores são compatíveis com pré-carregamento e pré-busca. Isso significa que nem todos os usuários do aplicativo vão notar melhorias de desempenho.
Se você quiser mais informações sobre aspectos específicos de como a pré-carga e a pré-busca podem afetar sua página da Web, consulte estes artigos: