Navegação na Web mais rápida com pré-busca preditiva

Saiba mais sobre a pré-busca preditiva e como o Guess.js a implementa.

Na minha sessão Navegação na Web mais rápida com pré-busca preditiva no Google I/O 2019, comecei falando sobre como otimizar apps da Web com a divisão de código e as possíveis implicações de desempenho para a navegação de páginas subsequentes. Na segunda parte da palestra, discuti como melhorar a velocidade de navegação usando o Guess.js para configurar o pré-carregamento preditivo:

Divisão de código para apps da Web mais rápidos

Os apps da Web são lentos, e o JavaScript está entre os recursos mais caros que você envia. Esperar o carregamento de um app da Web lento pode frustrar os usuários e diminuir as conversões.

Apps da Web lentos são estressantes.

O carregamento lento é uma técnica eficiente para reduzir os bytes do JavaScript transferidos pela rede. Você pode usar várias técnicas para o carregamento lento do JavaScript, incluindo:

  • Divisão de código no nível do componente
  • Divisão de código no nível da rota

Com a divisão de código em nível de componente, você pode mover componentes individuais em blocos JavaScript separados. Em eventos específicos, é possível carregar os scripts relevantes e renderizar os componentes.

No entanto, com a divisão de código no nível da rota, você move rotas inteiras para partes independentes. Quando os usuários fazem a transição de uma rota para outra, eles precisam fazer o download do JavaScript associado e inicializar a página solicitada. Essas operações podem causar atrasos significativos, especialmente em redes lentas.

Pré-buscar JavaScript

A pré-busca permite que o navegador faça o download e armazene em cache os recursos que o usuário provavelmente vai precisar em breve. O método usual é usar <link rel="prefetch">, mas há duas armadilhas comuns:

  • A pré-busca de muitos recursos (overfetching) consome muitos dados.
  • Alguns recursos necessários para o usuário podem nunca ser pré-carregados.

A pré-busca preditiva resolve esses problemas usando um relatório dos padrões de navegação dos usuários para determinar quais recursos serão pré-carregados.

Exemplo de busca antecipada

Pré-busca preditiva com Guess.js

O Guess.js é uma biblioteca JavaScript que oferece a funcionalidade de pré-carregamento preditivo. O Guess.js usa um relatório do Google Analytics ou de outro provedor de análise para criar um modelo preditivo que pode ser usado para fazer o pré-carregamento inteligente apenas do que o usuário provavelmente vai precisar.

O Guess.js tem integrações com Angular, Next.js, Nuxt.js e Gatsby. Para usar no seu aplicativo, adicione estas linhas à configuração do webpack para especificar um ID de visualização do Google Analytics:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Se você não usa o Google Analytics, pode especificar um reportProvider e fazer o download dos dados do seu serviço favorito.

Integração com frameworks

Para saber mais sobre como integrar o Guess.js ao seu framework favorito, confira estes recursos:

Para um tutorial rápido sobre a integração com o Angular, confira este vídeo:

Como o Guess.js funciona?

Veja como a Guess.js implementa a pré-busca preditiva:

  1. Primeiro, ele extrai dados dos padrões de navegação do usuário do seu provedor de análise favorito.
  2. Em seguida, ele mapeia os URLs do relatório para os blocos de JavaScript produzidos pelo webpack.
  3. Com base nos dados extraídos, ele cria um modelo preditivo simples de quais páginas um usuário provavelmente vai acessar a partir de qualquer página específica.
  4. Ele invoca o modelo para cada bloco JavaScript, prevendo os outros blocos que provavelmente serão necessários em seguida.
  5. Ele adiciona instruções de pré-busca a cada bloco.

Quando o Guess.js estiver pronto, cada bloco vai conter instruções de pré-carregamento semelhantes a:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

Esse código gerado pelo Guess.js informa ao navegador que ele deve considerar o pré-carregamento do bloco a.js com probabilidade 0.2 e do bloco b.js com probabilidade 0.8.

Quando o navegador executa o código, o Guess.js verifica a velocidade de conexão do usuário. Se for suficiente, o Guess.js vai inserir duas tags <link rel="prefetch"> no cabeçalho da página, uma para cada bloco. Se o usuário estiver em uma rede de alta velocidade, o Guess.js fará a pré-busca dos dois blocos. Se o usuário tiver uma conexão de rede ruim, o Guess.js vai fazer pré-busca apenas do bloco b.js, já que ele tem uma alta probabilidade de ser necessário.

Saiba mais

Para saber mais sobre o Guess.js, confira estes recursos: