Codelab: pré-carregue recursos essenciais para melhorar a velocidade de carregamento

Neste codelab, a performance da página da Web a seguir é melhorada com o pré-carregamento e a busca antecipada de alguns recursos:

Captura de tela do aplicativo

Medir

Primeiro, meça o desempenho do site antes de adicionar otimizações.

  • Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen tela cheia.

Execute a auditoria de desempenho do Lighthouse (Lighthouse > Opções > Performance) na versão ativa do Glitch. Consulte também Descubra oportunidades de performance com o Lighthouse.

O Lighthouse mostra a seguinte auditoria com falha para um recurso que é buscado tarde demais:

Lighthouse: auditoria de pré-carregamento de solicitações importantes
  • Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
  • Clique na guia Rede.
Painel de rede com recurso descoberto tardiamente

O arquivo main.css não é buscado por um elemento de link (<link>) colocado no documento HTML, mas um arquivo JavaScript separado, fetch-css.js, 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 quando o download do arquivo CSS é concluído.

A cadeia de solicitações críticas representa a ordem dos recursos que são priorizados e buscados pelo navegador. Para esta página da Web, atualmente ela parece 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 mais tarde.

Pré-carregar recursos críticos

O arquivo main.css é um recurso crítico que é necessário imediatamente assim que a página é carregada. Para arquivos importantes, como esse recurso, que são buscados com atraso no aplicativo, use uma tag de pré-carregamento de link para informar ao navegador que ele precisa ser feito 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 qual tipo de recurso está sendo buscado, e as="style" é usado para carregar arquivos de folha de estilo.

Recarregue o aplicativo e confira o painel Network no DevTools.

Painel de rede com recurso pré-carregado

Observe como o navegador busca o arquivo CSS antes mesmo que o JavaScript responsável pela busca tenha concluído a análise. Com o pré-carregamento, o navegador sabe fazer uma busca antecipada do recurso com a suposição de que ele é essencial para a página da Web.

Se não for usado corretamente, o carregamento prévio 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 uma /details route separada. 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>

Recarregue 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.

Painel de rede com pré-carregamento desnecessário

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.

Aviso de pré-carregamento no console

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.

Fazer a busca antecipada de recursos futuros

A pré-busca é outra sugestão do navegador que pode ser usada para fazer uma solicitação de um recurso usado em 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 você a uma rota details/ separada.

Detalhes do trajeto

Um arquivo CSS separado, details.css, contém todos os estilos necessários para essa página simples. Adicione um elemento de link a index.html para fazer o pré-carregamento desse recurso.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

Para entender como isso aciona uma solicitação do arquivo, abra o painel Network no DevTools e desmarque a opção Disable cache.

Desativar o cache no Chrome DevTools

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.

Painel de rede com recurso pré-buscado

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 o esperado.

Solicitações de rede da página de detalhes

Clique na solicitação de rede details.css no DevTools para conferir os detalhes. Você vai notar que o arquivo é recuperado do cache do disco do navegador.

A solicitação de detalhes foi buscada do cache do disco

Aproveitando o tempo de inatividade do navegador, o pré-carregamento faz uma solicitação antecipada de um recurso necessário para uma página diferente. Isso acelera as solicitações de navegação futuras permitindo que o navegador armazene o recurso em cache mais rapidamente e o forneça do cache quando necessário.

Pré-carregar e pré-buscar com o webpack

O post Reduzir payloads do JavaScript com a separação de códigos explora o uso de importações dinâmicas para dividir um pacote em vários fragmentos. Isso é demonstrado com um aplicativo simples que importa dinamicamente um módulo do Lodash quando um formulário é enviado.

App Magic Sorter que demonstra a divisão de código

Acesse 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) });
});

A divisão de um pacote melhora os tempos de carregamento da página reduzindo o tamanho inicial. A versão 4.6.0 do webpack oferece suporte para pré-carregar ou antecipar blocos que são importados dinamicamente. Usando este aplicativo como exemplo, o método lodash pode ser pré-buscado no tempo de inatividade do navegador. Quando um usuário pressiona o botão, não há atraso para que o recurso seja buscado.

Use o parâmetro de comentário webpackPrefetch específico em uma importação dinâmica para fazer a busca antecipada de um determinado bloco. Confira como ficaria com este aplicativo específico.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Quando o aplicativo é recarregado, o Webpack injeta uma tag de pré-busca para o recurso na cabeça do documento. Isso pode ser visto no painel Elements do DevTools.

Painel de elementos com a tag de pré-busca

Observar as solicitações no painel Network também mostra que esse bloco é buscado com prioridade baixa depois que todos os outros recursos são solicitados.

Painel de rede com solicitação pré-buscada

Embora o pré-carregamento faça mais sentido para esse caso de uso, o webpack também oferece suporte ao pré-carregamento de blocos importados dinamicamente.

import(/* webpackPreload: true */ 'module')

Conclusão

Com este codelab, você terá um bom entendimento de como o carregamento antecipado 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 para todos os recursos, e o uso incorreto delas pode prejudicar o desempenho. Os melhores resultados são notados apenas com o pré-carregamento ou pré-busca seletivos.

Para resumir:

  • Use o pré-carregamento para recursos que são descobertos tarde, mas são essenciais para a página atual.
  • Use o pré-carregamento para recursos necessários para uma rota de navegação futura ou ação do usuário.

No momento, nem todos os navegadores oferecem suporte ao pré-carregamento e ao pré-carregamento antecipado. Isso significa que nem todos os usuários do app vão notar melhorias no desempenho.

Se você quiser mais informações sobre aspectos específicos de como o carregamento prévio e a busca antecipada podem afetar sua página da Web, consulte estes artigos: